Specter : 경량 CSS 프레임 워크

Specter CSS 프레임 워크 : 가벼운, 반응 형 및 현대 CSS 솔루션

프로젝트 개발에서 프레임 워크는 개발 시간을 크게 줄일 수 있습니다. 부트 스트랩과 같은 인기있는 프레임 워크는 기능이 풍부하지만 모든 기능이 모든 프로젝트에 적합한 것은 아닙니다. 이 기사에서는 새로운 경량, 현대적이고 반응 형이며 모바일 친화적 인 프레임 워크 인 Specter를 소개합니다. 압축 및 GZIP 후 크기는 약 6.8KB입니다. 기본 그리드 시스템 외에도 탭, 모달 박스 및 카드와 같은 다른 많은 실제 구성 요소도 제공합니다.

이 튜토리얼을 사용하면 프레임 워크에 대한 간단한 개요를 제공하고 신속하게 시작할 수있는 지침을 제공합니다.

키 포인트

Specter는 개발 시간을 크게 줄이는 가볍고 현대적이며 반응이 좋으며 모바일 친화적 인 CSS 프레임 워크입니다. 기본 그리드 시스템 및 탭, 모달 박스 및 카드와 같은 다양한 구성 요소를 제공합니다.

이 프레임 워크에는 아시아 글꼴에 최적화 된 기본 스타일의 타이포그래피 요소가 포함되어 있으며 테이블, 버튼 및 일반적으로 사용되는 형태 요소에 대한 클래스를 제공합니다. 또한 내비게이션 바, 수직 메뉴 및 빵 부스러기의 세 가지 탐색 구성 요소도 제공합니다.

Spectre의 두 가지 중요한 구성 요소는 Bootstrap의 해당 구성 요소와 유사한 모달 박스 및 카드입니다. 또한 "토스트"알림, 배지, 태그, 페이지 매김 및 툴팁과 같은 다른 구성 요소도 포함됩니다. 유틸리티 클래스는 미묘한 레이아웃 조정에 사용할 수 있습니다. Specter는 요소에 가장 적은 스타일을 제공하고 크기가 제공하는 구성 요소의 수를 고려할 때 크기가 매우 합리적이지만 구성 요소와 상호 작용할 수있는 JavaScript는 제공하지 않습니다. 사용자는 모달 상자 표시 또는 숨기는 것과 같은 기능을 구현하기 위해 자체 코드를 작성해야합니다.

설치

• 압축 된 Spectre.css 파일을 직접 다운로드하거나 NPM 및 Bower를 사용하여 설치할 수 있습니다. 설치가 완료되면 일반 스타일 시트처럼 프로젝트에 파일을 포함시킬 수 있습니다.
• 디렉토리에서 적은 파일을 편집하거나 Spectre.less 파일에서 원치 않는 구성 요소를 제거하여 고유 한 사용자 정의 프레임 워크 버전을 만들 수도 있습니다. 그런 다음 Gulp를 사용하여 명령 줄에서 CSS 파일을 빌드 할 수 있습니다.
그리드 시스템
• Specter에는 12 개의 열이있는 Flexbox 기반의 반응 형 래스터 시스템이 있습니다. 각 열의 너비는 클래스 이름에 따라 결정됩니다. 각 클래스는 로 시작하고 요소가 차지 해야하는 열의 수를 나타내는 숫자가 뒤 따릅니다. 예를 들어,
는 폭이 100%인 12 개의 열을 차지합니다. 기본적으로 다른 열 사이에는 약간의 간격이 있습니다. 컨테이너에 클래스를 추가 하여이 간격을 제거 할 수 있습니다. Bootstrap과 마찬가지로 뷰포트 크기가 변경 될 때 요소의 너비를 제어하는 ​​데 도움이되는 ,
• 및 와 같은 클래스도 제공합니다.
는 특정 뷰포트 크기 하에서 요소를 숨기기 위해 ,

및

와 같은 클래스도 제공합니다. 뷰포트 너비가 480 픽셀 미만인 경우 모든 열이 단일 행으로 표시됩니다.

클래스는 폭이 480 픽셀보다 큰 모든 요소에 적용됩니다. 마찬가지로 col-xs-*는 뷰포트 너비가 600 픽셀보다 큰 요소에 적용되며 col-sm-*는 뷰포트 너비가 800 픽셀보다 큰 요소에 적용됩니다. col-md-* 다음 코드 스 니펫은 너비가 33.333% (

), 폭은 25% (

) 인 열을 생성합니다. col-4 col-3 _{... (후속 내용은 원본 텍스트와 유사합니다. 원래 의도를 변경하지 않기 위해 필요에 따라 문구 및 단락 구조를 조정할 수 있습니다) ....}

위 내용은 Specter : 경량 CSS 프레임 워크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!