>웹 프론트엔드 >CSS 튜토리얼 >27가지 유용한 CSS 프레임워크 권장사항

27가지 유용한 CSS 프레임워크 권장사항

巴扎黑
巴扎黑원래의
2017-04-05 16:08:173419검색

CSS 프레임워크를 사용하면 작업을 단순화하고 작업 효율성을 높일 수 있습니다. CSS 프레임워크는 기본 요소 재설정, 페이지 레이아웃, 그리드 레이아웃, 양식 스타일, 일반 규칙 및 기타 코드 블록을 포함한 CSS 파일 모음입니다. 여기 당신이 선택할 수 있는 27개의 훌륭한 CSS 프레임워크가 있습니다.

1.960gs

페이지 너비 960픽셀은 현재 다양한 해상도에서도 웹 콘텐츠를 잘 표시할 수 있는 디자인 표준이 된 것 같습니다. 웹 디자인 프로세스를 단순화하기 위해 더 일반적으로 사용되는 크기가 제공되어 작업을 간단하고 효율적으로 만듭니다.

2. YUI 2: 그리드 CSS

Mango는 Yahoo 개발팀이 출시한 YUI를 소개한 적이 있으며, 이 YUI Grids CSS는 그 일부입니다. 가장 유명한 CSS 프레임워크 중 하나인 YUI Grids CSS는 4개의 사전 설정된 페이지 너비와 6개의 사전 설정된 템플릿을 제공합니다. 그중에서도 측정 단위 em을 사용하는 네거티브 마진 기술, 레이아웃 플로트 클리어 및 기타 기술은 학습하고 참고할 가치가 매우 높습니다.

​3. 설계도

Blueprint는 레이아웃, 타이포그래피, 위젯, 재설정 및 인쇄를 다양한 CSS 파일로 나누는 성숙한 CSS 프레임워크입니다. 웹 디자인 시 도입되는 코드가 줄어들고 페이지 로딩 효율이 향상됩니다.

4. 블루트립

BlueTrip은 Hartija의 인쇄 스타일과 Elements 아이콘의 장점을 통합한 CSS 프레임워크입니다. 유용한 스타일 컬렉션과 웹사이트 제작을 위한 일반적인 방법을 제공합니다. 이렇게 하면 디자인에만 집중할 수 있습니다.

5. 탄력적 CSS

Elastic은 웹 페이지를 레이아웃하는 데 사용되는 간단한 CSS 프레임워크입니다. Elastic은 다양한 공통 웹 페이지 레이아웃을 지원합니다.

6. 쉽다

시중에서 널리 사용되는 JQUERY 구성 요소 기능은 모두 해당 프레임워크에 통합되어 있으므로 복잡한 AJAX JQuery 구문을 배우지 않고도 이 프레임워크를 직접 사용하면 됩니다. 이는 매우 편리합니다.

7. EZ-CSS

EZ-CSS는 가볍고 브라우저 친화적이며 사용하기 쉬운 CSS 프레임워크입니다. CSS+p를 사용하여 복잡한 페이지 레이아웃을 만드는 데 사용됩니다.

8. 트리폴리

Tripoli는 HTML 프리젠테이션을 위한 일반적인 CSS 사양입니다. 브라우저 표준을 재설정하고 재구축함으로써 Tripoli는 웹 사이트 프로젝트를 위한 표준, 크로스 브라우저 성능을 위한 기반을 제공합니다.

9. 영리한CSS

CleverCSS는 Python에서 영감을 받은 작은 CSS용 마크업 언어로, 깔끔하고 구조화된 방식으로 스타일시트를 만드는 데 사용할 수 있습니다. 여러 면에서 CSS2보다 더 깔끔하고 강력합니다. CSS와의 가장 분명한 차이점은 구문입니다. 들여쓰기를 기반으로 하며 단조롭지 않습니다. 이는 분명히 Python의 규칙에 위배되지만 스타일을 구성하는 데는 여전히 좋은 아이디어입니다.

10. 센CSS

CSS의 반복되는 부분에 대해 합리적인 스타일을 제공하므로 웹 사이트 스타일에 더 많은 주의를 기울일 수 있습니다. 다른 CSS 프레임워크와 달리 SenCS에는 다양하고 복잡한 레이아웃 스타일이나 사전 정의된 그리드 시스템이 포함되어 있지 않습니다. 그렇다면 SenCS는 무엇을 할 수 있을까요? 기준선, 글꼴, 패딩, 여백, 표, 목록, 헤더, 인용문, 양식 등은 모두 SenCS가 할 수 있는 작업입니다.

11. 에마스틱

Emastic은 이상한 새로운 세계를 탐험하고, 새로운 삶과 새로운 웹 사이트 공간을 찾고, CSS 프레임워크가 아직 도달하지 못한 곳으로 대담하게 나아가는 지속적인 사명을 가진 CSS 프레임워크입니다. 페이지 너비가 가볍고 사용자 친화적이며 그리드에서 고정 및 고정되지 않은 열 너비를 사용합니다. Elastic에서는 "em" 레이아웃을 사용합니다.

12. 타이포그리드

Typogridphy는 그리드 레이아웃에 적합한 CSS 프레임워크로, 웹 디자이너와 프런트엔드 개발자가 신속하게 코딩하여 아름다운 그리드 레이아웃을 달성하는 데 사용됩니다. 쉽고 간단하게 다양한 그리드 레이아웃을 빠르게 생성할 수 있습니다. 이 프레임워크의 CSS는 의미론적 검증, 엄격한 Xhtml 및 기타 표준을 완전히 준수합니다.

13. Less Framework 3

믹스인, 변수, 중첩 등 고급 기능을 최대한 활용하는 less.js 기반의 CSS 프레임워크입니다.

14. 요소

이는 매우 가벼운 CSS 프레임워크입니다. 코드 구성 구조로 볼 때 저자는 전체 프로젝트가 CSS 프레임워크에 배포될 수 있기를 바랍니다.

15. 상용구

HTML5-CSS3를 지원하는 크로스 브라우저 웹사이트를 구축하는 데 도움이 될 수 있는 HTML/CSS/JS용 사전 설정된 템플릿입니다.

16. 말로

폭이 가변적인 초소형, 유연하고 사용하기 쉬운 개인화된 페이지입니다.

17. 1kb CSS 그리드

웹 사이트의 기본 프레임워크를 구축하는 데 경량 CSS 그리드 시스템만 필요한 경우 1Kb CSS 그리드를 사용해 볼 수 있습니다. 1KB CSS 그리드 웹사이트에서는 CSS 그리드를 사용자 정의할 수 있는 생성기를 제공하며, 사용자 정의된 CSS 그리드를 직접 다운로드할 수 있습니다.

18. 유동 격자 시스템

웹사이트 내비게이션 메뉴의 텍스트는 현재 메뉴 버튼의 내용을 표현하기에 충분한 정보를 제공하지 못합니다. 그러면 일반적인 해결책은 툴팁 정보를 사용하는 것입니다. 그러면 모바일 내비게이션 메뉴도 이 문제를 해결하고 웹사이트 디자인에 패션을 추가할 수도 있습니다. 그리고 동적 요소.

19. 스타일이 있는 콘텐츠

스타일이 있는 콘텐츠 다음 논리적 단계는 이를 CSS 프레임워크로 확장하여 이미 작성되고 테스트된 구성 요소를 사용하여 웹 사이트를 신속하게 개발하는 것입니다. 실제로 필요한 것은 일련의 명명 규칙과 유연한 기본 템플릿입니다.

20. WYM스타일

WYMstyle은 쉽게 결합하여 웹 사이트 레이아웃을 빠르게 만들 수 있는 CSS 파일 세트입니다. 신뢰할 수 있고 잘 테스트된 CSS 모듈을 제공함으로써 WYMstyle은 모든 웹 사이트가 지루한 브라우저 간 호환성 테스트를 방지하기 위해 노력하고 있습니다.

21. 골든 그리드

이는 vladocar가 개발한 상대적으로 새로운 CSS 프레임워크로, 현대 웹사이트 디자인에 대한 새로운 레이아웃 참조를 제공할 수 있습니다. 매우 컴팩트하므로 배우고 사용하기 쉽습니다. 레이아웃을 처리하는 방법 중 일부는 배울 가치가 있습니다. 960 그리드 시스템을 이해한다면 이 프레임워크를 사용하는 것이 더 쉬울 것입니다.

22. 또 다른 다중 열 레이아웃(YAML)

YAML은 유연하고 사용자 친화적인 레이아웃을 위해 개발된 (X)HTML/CSS 프레임워크입니다. YAML은 2007년 등장 이후 광범위하고 포괄적인 문서를 제공해 왔습니다. Blueprint CSS 또는 YUI Grids와 같은 다른 많은 CSS 프레임워크와 마찬가지로 그리드 기반 레이아웃을 생성하기 위해 사전 정의된 CSS 클래스 시스템을 제공합니다. 레이아웃을 만들기 위해 디자이너는 웹 사이트의 HTML 구조를 만든 다음 컨테이너(html 태그)에 대한 CSS를 작성하고 나머지는 처리합니다.

23. 나침반

Compass는 스타일 시트와 마크업을 쉽게 만들고 유지 관리할 수 있게 해주는 스타일 제작 프레임워크입니다. 원본 CSS 대신 Sass를 사용하여 나만의 스타일을 작성하세요. Sass에서 Mixin과 Compass를 결합하면 Blueprint와 같은 스타일 프레임워크를 사용하여 나만의 스타일 태그를 대체할 수 있으며, Blueprint와 같은 CSS 프레임워크를 사용할 수도 있습니다. . 매우 편리합니다.

24. 스키마 웹 디자인 프레임워크

스키마는 반복적인 디자인 작업에 필요한 CSS 및 HTML 태그를 제공하도록 설계된 프레젠테이션 레이어 웹 페이지 프레임워크입니다. 모든 새로운 웹 사이트 프로젝트에 대해 처음부터 HTML/CSS를 생성하는 대신 Schema는 시작하고 즉시 디자인을 실행하는 데 필요한 기반을 제공합니다.

25. 스파클

이는 매우 성숙한 시스템이며, 작고, 유연하며, 배우고 사용하기 쉽습니다.

26. jQuery UI CSS 프레임워크

​jquery를 기반으로 스킨 교체 기능을 갖춘 UI 컨트롤과 마우스 상호작용 구성요소의 집합입니다. 개발자가 좋은 사용자 경험을 갖춘 웹 애플리케이션을 구축하는 데 도움이 됩니다. jQuery를 사용하여 사용자 정의 위젯을 위한 강력한 CSS 프레임워크를 제공합니다. 그중 ThemeRoller를 사용하면 원하는 대로 다양한 스타일의 웹 인터페이스를 작동하고 디자인할 수 있습니다.

27. 52프레임워크

HTML5와 CSS3를 구현한 웹 개발 프레임워크입니다. IE6를 포함한 모든 주요 브라우저에서 실행될 수 있는 크로스 브라우저 프레임워크입니다. 주로 HTML5 지원 JavaScript 파일을 사용하여 구현됩니다.

위 내용은 27가지 유용한 CSS 프레임워크 권장사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.