Materialize - 소재 디자인 CSS 프레임 워크
Google의 재료 디자인 웹과 모바일 앱에서 잘 작동하는 것을 목표로합니다. 개발자들에게 인기를 얻고 있으며이를 채택하고 싶다면 사이트에 Material Design을 구현하는 많은 방법이 있습니다. Polymer 또는 Angular를 사용하거나 Materialize를 사용할 수 있습니다..
구체화는 Sass를 지원하는 Material Design 원칙에 기반한 CSS 프레임 워크 더 나은 개발을 위해. 쉽게 사용할 수 있도록 기본 스타일링을 수행하며 자세한 설명서가 있습니다..
대화 상자, 모달, 날짜 선택기, 재료 버튼, 시차, 카드 등 많은 유용한 구성 요소를 찾을 수 있습니다. 또한 드롭 다운, 슬라이드 메뉴 및 탭과 같은 다양한 탐색 옵션을 선택할 수 있습니다. Materialize는 또한 12 그리드 시스템 기본 화면 크기 미디어 쿼리 3 개 : 600px의 최대 너비는 휴대 기기, 992px 태블릿 기기 및 992px 이상은 데스크톱 기기로 간주됩니다..
시작하기
Materialize를 시작하는 방법에는 두 가지가 있습니다. 표준 CSS 또는 Sass. 두 소스 모두 여기에서 다운로드 할 수 있습니다. 다음 명령을 사용하여 bower로 얻을 수도 있습니다.
박차를 달다
소스를 가져온 후에는 Sass 버전을 사용하는 경우 프로젝트 파일에 해당 소스를 제대로 연결하거나 소스를 컴파일해야합니다..
풍모
이 섹션에서는 Materialize가 제공하는 몇 가지 기능을 설명합니다..
1. Sass Mixins
이 프레임 워크에는 특정 CSS 속성을 작성할 때 모든 브라우저 접두사를 자동으로 추가하는 Sass Mixins가 있습니다. 보장해야 할 중요한 기능입니다. 모든 브라우저에서 호환성, 가능한 한 소란과 코드로.
다음 애니메이션 속성을 살펴보십시오.
-webkit-animation : 0.5 초; -moz-animation : 0.5 초; -o-animation : 0.5 초; -ms-animation : 0.5 초; 애니메이션 : 0.5 초;
이러한 코드 라인은 다음과 같이 Sass mixin의 한 줄로 다시 작성할 수 있습니다.
@include 애니메이션 (.5s);
거기에 대해 19 개의 주요 mixin 유효한. 전체 목록을 보려면 Sass 범주로 가십시오. 믹신 탭.
2. 흐름 텍스트
다른 프론트 엔드 프레임 워크는 고정 텍스트를 사용하지만 Materialize는 진정으로 반응 형 텍스트를 구현합니다. 가독성을 유지하기 위해 텍스트 크기와 선 높이도 그에 맞게 조정됩니다. 작은 화면의 경우 선 높이가 더 크게 조정됩니다..
흐름 텍스트를 사용하려면 흐름 텍스트 원하는 텍스트의 수업. 예를 들면 :
이것은 흐름 텍스트입니다..
흐름 텍스트 섹션에서 데모를 확인하십시오..
3. 웨이브로 리플 효과
머티리얼 디자인은 대화식 피드백과 함께 제공됩니다. 주목할만한 예로 리플 효과가 있습니다. Materialize에서이 효과를 호출합니다. 파도. 기본적으로 사용자가 버튼, 카드 또는 다른 요소를 클릭하거나 탭 / 터치하면 효과가 나타납니다. 추가하여 쉽게 웨이브를 만들 수 있습니다. 파도 효과 요소를 클래스에 추가.
이 스 니펫은 파도 효과를줍니다..
제출
잔물결은 기본적으로 회색입니다. 그러나 어두운 색 배경이있는 상황에서는 색을 바꿀 수 있습니다. 다른 색상을 추가하려면 파도 - (컬러) 요소에. "(색상)"을 색상 이름으로 바꾸십시오..
제출
7 가지 색상 중에서 선택할 수 있습니다. 빛, 빨강, 노랑, 오렌지, 보라색, 녹색 및 청록색. 색상이 필요에 맞지 않으면 언제든지 자신 만의 색상을 만들거나 맞춤 설정할 수 있습니다..
4. 그림자
요소 들간의 관계를 전달하기 위해 머티리얼 디자인에서는 서페이스에서 높이를 사용하는 것이 좋습니다. Materialise는이 원칙에 따라 z 깊이 (수) 수업. (숫자)를 1에서 5로 변경하여 그림자 깊이를 결정할 수 있습니다.
그림자 깊이 3
모든 그림자 깊이는 아래 이미지와 함께 시연됩니다..
5. 버튼과 아이콘
Material Design에는 세 가지 기본 버튼 유형이 있습니다. 제기 된 버튼, 팹 (플로팅 액션 버튼) 과 평면 버튼.
(1) 제기 된 버튼
제기 된 버튼이 기본 버튼입니다. 이 버튼을 만들려면 btn 클래스를 요소에 추가하십시오. 클릭하거나 누를 때 웨이브 효과를주고 싶다면 다음과 같이하십시오 :
단추
또는 단추의 텍스트 왼쪽이나 오른쪽에 아이콘을 지정할 수도 있습니다. 아이콘의 경우 사용자 정의를 추가해야합니다. 태그에 아이콘 클래스 이름과 위치가 표시됩니다. 예를 들면 :
다운로드
위의 코드에서 우리는 mdi-file-file-download 다운로드 아이콘 클래스. 거기에 대해 740 개의 다른 아이콘 당신이 사용할 수있는. 아이콘 탭의 Sass 페이지로 이동하십시오..
(2) 플로팅 버튼
부동 단추는 추가로 만들 수 있습니다. btn-floating 클래스 및 원하는 아이콘. 예를 들면 :
머티리얼 디자인에서 플랫 버튼은 대개 대화 상자 내에서 사용됩니다. 그것을 창조하기 위하여는, 다만 추가하십시오 btn-flat 귀하의 요소에 그렇게 :
쇠퇴
또한 버튼은 장애인 클래스를 사용하여 더 크게 만들고 큰 btn 수업.
6. 그리드
Materialize는 표준을 사용합니다. 12- 컬럼 반응 그리드 체계. 응답 성은 세 부분으로 나뉩니다. 모바일 용 소형, 중형 (m) 태블릿 및 대형 (l) 데스크톱 용.
기둥을 만들려면 s, m 또는 l을 사용하여 크기를 표시 한 다음 그리드 번호를 지정하십시오. 예를 들어 모바일 장치 용으로 절반 크기의 레이아웃을 만들려면 s6 레이아웃에 맞게 수업. s6 약자 소형 6 소형 장치의 경우 6 열을 의미합니다..
다음을 포함해야합니다. 안부 레이아웃에있는 클래스를 만들어서 열 수업. 레이아웃이 제대로 열에 배치 될 수 있습니다. 다음은 그 예입니다.
여기에 12 열 또는 전체 너비가 있습니다.4 열 (3 분의 1) 여기4 열 (3 분의 1) 여기4 열 (3 분의 1) 여기
결과는 다음과 같습니다.
기본적으로, col s12 고정 크기이며 모든 화면 크기에 최적화되어 있으며 기본적으로 col s12 m12 l12. 하지만 서로 다른 장치의 열 크기를 지정하려는 경우 다음과 같이 추가 크기를 나열하면됩니다.
내 너비에는 항상 12 개의 열이 있습니다.모바일에 12 개의 열, 태블릿에 6 개, 데스크톱에 9 개의 열이 있습니다.
이 모양은 다음과 같습니다.
이것들은 Materialize의 몇 가지 기능입니다. 다른 기능에 대한 자세한 내용을 보려면 설명서 페이지로 이동하십시오..
