재단-퀵 가이드

재단이란 무엇입니까?

Foundation은 아름다운 반응 형 웹 사이트를 디자인하기위한 고급 프런트 엔드 프레임 워크 중 하나입니다. 모든 유형의 장치에서 작동하며 HTML, CSS 및 JavaScript 플러그인을 제공합니다.

재단은 2008 년 ZURB에 의해 구축 된 내부 스타일 가이드로 시작되었습니다. ZURB는 캘리포니아 주 캠벨에있는 제품 디자인 회사입니다. 2011 년 10 월에 Foundation 2.0을 오픈 소스로 출시했습니다. Foundation의 최신 버전은 2015 년 12 월에 출시 된 6.1.1입니다.

왜 재단을 사용합니까?

  • 기본 컴파일러보다 훨씬 빠르게 작동하는 Sass 컴파일러를 사용하여 더 빠른 개발을 제공합니다.

  • 가격표, 스위치, 조이 라이드, 범위 슬라이더, 라이트 박스 등으로 웹 사이트를 풍부하게합니다.

  • 더 빠른 코딩 및 제어를 위해 Grunt 및 Libsass와 같은 개발 패키지와 함께 제공됩니다.

  • Foundation for sites는 웹 사이트를 빠르게 구축 할 수 있도록 HTML, CSS 및 JS를 제공합니다.

  • 이메일 프레임 워크는 모든 장치에서 읽을 수있는 반응 형 HTML 이메일을 제공합니다.

  • Foundation for Apps를 사용하면 완전히 반응하는 웹 앱을 빌드 할 수 있습니다.

풍모

  • 강력한 그리드 시스템과 유용한 UI 구성 요소 및 멋진 JavaScript 플러그인이 있습니다.

  • 모든 유형의 장치를 지원하는 반응 형 디자인을 제공합니다.

  • 모바일 장치에 최적화되어 있으며 모바일 우선 접근 방식을 진정으로 지원합니다.

  • 사용자 정의 및 확장이 가능한 HTML 템플릿을 제공합니다.

장점

  • HTML과 CSS에 대한 기본적인 이해가 있으면 배우기 쉽습니다.

  • Foundation은 오픈 소스이므로 자유롭게 사용할 수 있습니다.

  • 웹 사이트 개발을 즉시 시작하는 데 도움이되는 다양한 템플릿을 제공합니다.

  • Foundation은 SASS 및 Compass와 같은 전처리기를 지원하므로 개발 속도가 빨라집니다.

단점

  • Twitter Bootstrap의 인기로 인해 Twitter Bootstrap에 대한 커뮤니티 지원이 Foundation보다 낫습니다.

  • 초보자가 전 처리기 지원을 배우고 활용하는 데 다소 시간이 걸릴 수 있습니다.

  • 문제 해결을위한 QA 사이트 및 포럼과 같은 광범위한 지원이 부족합니다.

  • 재단은 다른 사람들에 비해 테마가 적습니다.

이 장에서는 웹 사이트에서 Foundation을 설치하고 사용하는 방법에 대해 설명합니다.

재단 다운로드

Foundation.zurb.com 링크를 열면 아래와 같은 화면이 나타납니다.

클릭 Download Foundation 6 버튼을 누르면 다른 페이지로 이동합니다.

여기에 네 개의 버튼이 있습니다.

  • Download Everything − 기본 CSS 및 JS와 같은 프레임 워크에 모든 것을 포함하려면이 버전의 Foundation을 다운로드 할 수 있습니다.

  • Download Essentials − 그리드, 버튼, 타이포그래피 등이 포함 된 간단한 버전을 다운로드합니다.

  • Custom Download − Foundation 용 사용자 정의 라이브러리를 다운로드하며 요소를 포함하고 열 크기, 글꼴 크기, 색상 등을 정의합니다.

  • Install via SCSS − Foundation for sites를 설치하기위한 문서 페이지로 리디렉션됩니다.

클릭 할 수 있습니다 Download Everything버튼을 눌러 프레임 워크의 모든 것을 가져옵니다. 즉 CSS 및 JS. 파일은 프레임 워크의 모든 항목으로 구성되므로 매번 개별 기능에 대해 별도의 파일을 포함 할 필요가 없습니다. 이 튜토리얼을 작성할 당시 최신 버전 (Foundation 6)이 다운로드되었습니다.

파일 구조

Foundation이 다운로드되면 ZIP 파일의 압축을 풀면 다음 파일 / 디렉토리 구조가 표시됩니다.

보시다시피, 컴파일 된 CSS 및 JS (foundation. *)와 컴파일 및 축소 된 CSS 및 JS (foundation.min. *)가 있습니다.

이 튜토리얼 전체에서 라이브러리의 CDN 버전을 사용하고 있습니다.

HTML 템플릿

Foundation을 사용하는 기본 HTML 템플릿은 다음과 같습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

다음 섹션에서는 위 코드에 대해 자세히 설명합니다.

HTML5 문서 유형

Foundation은 HTML5 doctype을 사용해야하는 특정 HTML 요소와 CSS 속성으로 구성됩니다. 따라서 Foundation을 사용하는 모든 프로젝트의 시작 부분에 HTML5 doctype에 대한 다음 코드를 포함해야합니다.

<!DOCTYPE html>
<html>
   ....
</html>

모바일 우선

모바일 장치에 반응하는 데 도움이됩니다. 다음을 포함해야합니다.viewport meta tag <head> 요소에 추가하여 모바일 장치에서 적절한 렌더링 및 터치 확대 / 축소를 보장합니다.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • width 속성은 장치의 너비를 제어합니다. 기기 너비로 설정하면 다양한 기기 (모바일, 데스크톱, 태블릿 ...)에서 올바르게 렌더링됩니다.

  • initial-scale = 1.0 은로드 될 때 웹 페이지가 1 : 1 배율로 렌더링되고 확대 / 축소가 기본적으로 적용되지 않도록합니다.

구성 요소 초기화

jQuery 스크립트는 모달 및 드롭 다운과 같은 구성 요소를 위해 Foundation에 필요합니다.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

산출

위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

  • 위의 주어진 HTML 코드를 저장하십시오. firstexample.html 파일.

  • 브라우저에서이 HTML 파일을 열면 아래와 같이 출력이 표시됩니다.

당신은을 통해 설치 될 수있는 몇 가지 가능한 템플릿을 사용하여 프로젝트 개발을 시작할 수 있습니다 예티 실행 또는Foundation CLI. Sass, JavaScript, 파일 복사 등의 처리를 위해 Gulp 빌드 시스템을 사용하여 이러한 템플릿을 사용하여 새 프로젝트를 시작할 수 있습니다 .

기본 템플릿

기본 템플릿은 플랫 디렉토리 구조를 포함하고 SASS 파일 만 컴파일하는 SASS 템플릿과 유사하며 SASS 만 사용하면서이 간단한 템플릿을 사용하는 것이 좋습니다. Yeti Launch를 사용하거나 다음 명령을 사용하여 Foundation CLI를 사용하여 기본 템플릿을 사용할 수 있습니다.

$ foundation new --framework sites --template basic

이를 설정하려면 먼저 npm install , bower install 을 실행 하고 npm start 명령을 사용하여 실행합니다. Github 에서 템플릿 파일을 다운로드 할 수도 있습니다 .

ZURB 템플릿

CSS / SCSS, JavaScript, Handlebars 템플릿, 마크 업 구조, 이미지 압축의 조합이며 SASS 처리를 사용합니다. Yeti Launch를 사용하거나 아래 명령을 사용 하여 Foundation CLI 를 사용하여 ZURB 템플릿을 사용할 수 있습니다.

$ foundation new --framework sites --template zurb

이 템플릿을 실행하려면 기본 템플릿에 지정된 동일한 단계를 따르십시오. Github 에서 템플릿 파일을 다운로드 할 수도 있습니다 .

자산 복사

자산 이 프로젝트 폴더가 될 Gulp 를 사용하여 src / assets 폴더 의 콘텐츠를 복사 할 수 있습니다 . 여기서 중요한 점은 SASS 파일, JavaScript 파일 및 이미지가 컨텐츠를 복사하는 자체 프로세스를 가지므로이 자산 복사 프로세스에 포함되지 않는다는 것입니다.

페이지 편집

src / 디렉토리에 있는 pages , layoutspartials의 세 폴더 아래에 HTML 페이지를 만들 수 있습니다 . 템플릿, 페이지, HTML 부분을 사용하여 페이지의 레이아웃을 생성 하는 Panini 플랫 파일 컴파일러를 사용할 수 있습니다 . 이 프로세스는 Handlebars 템플릿 언어 를 사용하여 수행 할 수 있습니다 .

SASS 컴파일

Libsass를 사용하여 SASS를 CSS로 컴파일 할 수 있으며 기본 SASS 파일은 src / assets / scss / app.scss에 저장되며 새로 생성 된 SASS 부분도이 폴더 자체에 저장됩니다. CSS의 출력은 중첩 스타일 인 일반 CSS와 같습니다. clean-css로 CSS를 압축하고 UnCSS를 사용하여 스타일 시트에서 사용하지 않는 CSS를 제거 할 수 있습니다 .

자바 스크립트 컴파일

JavaScript 파일은 Foundation과 함께 src / assets / js 폴더에 저장되며 모든 종속성은 app.js 파일에 함께 연결 됩니다. 파일은 아래 순서대로 함께 묶입니다.

  • 재단의 종속성.
  • 파일은 src / assets / js 폴더에 저장됩니다.
  • 파일은 app.js 라는 하나의 파일에 번들로 제공됩니다 .

이미지 압축

기본적으로 모든 이미지는 dist 폴더 아래의 assets / img 폴더에 저장됩니다. JPEG, PNG, SVG 및 GIF 파일을 지원하는 gulp-imagemin 을 사용하여 프로덕션 용으로 빌드하는 동안 이미지를 압축 할 수 있습니다 .

BrowserSync

동기화 된 브라우저 테스트 인 BrowserSync 서버를 만들 수 있습니다.http://localhost:8000이 URL을 사용하여 컴파일 된 템플릿을 볼 수 있습니다. 서버가 실행되는 동안 파일을 저장하면 페이지가 자동으로 새로 고쳐지고 작업하는 동안 페이지에 대한 변경 사항을 실시간으로 볼 수 있습니다.

기술

웹 애플리케이션과 원활하게 작동하는 Foundation 요소가 포함되어 있습니다. 다음 표에는 재단 구성 요소 중 일부가 나열되어 있습니다.

Sr. 아니. 구성 요소 및 설명
1 아코디언

아코디언에는 웹 사이트에서 많은 양의 데이터를 확장 및 축소하는 데 사용되는 수직 탭이 포함되어 있습니다.

2 아코디언 메뉴

아코디언 효과와 함께 축소 가능한 메뉴를 표시합니다.

배지

배지는 중요한 메모 및 메시지와 같은 정보를 강조하는 데 사용되는 레이블과 유사합니다.

4 빵 부스러기

탐색 계층 구조 내에서 사이트의 현재 위치를 지정합니다.

5 버튼

Foundation은 다양한 스타일의 표준 버튼을 지원합니다.

6 부르다

콜 아웃은 콘텐츠를 내부에 배치하는 데 사용할 수있는 요소입니다.

7 닫기 버튼

경고 상자를 해제하는 데 사용됩니다.

8 드릴 다운 메뉴

드릴 다운 메뉴는 중첩 된 목록을 수직 드릴 다운 메뉴로 변경합니다.

9 드롭 다운 메뉴

드롭 다운 메뉴는 목록 형식으로 링크를 표시하는 데 사용됩니다.

10 드롭 다운 창

버튼을 클릭하면 드롭 다운 창에 콘텐츠가 표시됩니다.

11 Flex 비디오

웹 페이지에서 비디오 개체를 만드는 데 사용됩니다.

12 부동 클래스

HTML 요소에 유틸리티 클래스를 추가하는 데 사용됩니다.

13 양식

사용자 입력을 수집하기 위해 양식 레이아웃을 만드는 데 사용됩니다.

14 상표

레이블은 인라인 스타일로 입력 요소의 레이블을 정의합니다.

15 미디어 개체

콘텐츠 블록의 왼쪽 또는 오른쪽에 배치 할 수있는 이미지, 비디오, 블로그 댓글 등과 같은 미디어 개체를 추가하는 데 사용됩니다.

16 메뉴

웹 사이트의 다양한 모드에 대한 액세스를 제공합니다.

17 쪽수 매기기

콘텐츠를 일련의 관련 페이지로 나누는 탐색 유형입니다.

18 슬라이더

핸들을 드래그하여 값의 범위를 지정합니다.

19 스위치

온 / 오프 상태를 전환하는 데 사용됩니다.

20

행 및 열 형식으로 데이터를 나타냅니다.

21

페이지를 벗어나지 않고 다른 창에 콘텐츠를 표시하는 탐색 기반 탭입니다.

22 썸네일

축소판 모양으로 이미지의 스타일을 지정합니다.

23 타이틀 바

다른 메뉴 항목과 함께 사용자가 사용하는 현재 화면을 표시하는 데 사용됩니다.

24 툴팁

링크에 마우스를 가져 가면 정보를 설명하는 작은 팝업 상자입니다.

25 상단 바

웹 사이트에서 탐색 헤더를 만드는 데 사용됩니다.

26 궤도

궤도 클래스를 사용하여 요소를 스 와이프하는 쉽고 강력한 슬라이더입니다 .

이 장에서는 글로벌 스타일 에 대해 알아 봅니다 . Foundation 프레임 워크의 전역 CSS에는 브라우저간에 스타일이 일관되도록하는 유용한 재설정이 포함되어 있습니다.

글꼴 크기 조정

브라우저 스타일 시트의 글꼴 크기는 기본적으로 100 %로 설정됩니다. 기본 글꼴 크기는 16 픽셀로 설정됩니다. 글꼴 크기에 따라 그리드 크기가 계산됩니다. 고유 한 기본 글꼴 크기와 영향을받지 않는 그리드 중단 점을 가지려면 $ rem-base 를 픽셀 단위 인 $ global-font-size 값으로 설정하십시오.

그림 물감

링크버튼 과 같은 대화 형 요소 는 SASS 변수 $ primary-color 에서 가져온 기본 파란색 음영을 사용 합니다 . 구성 요소는 보조, 경고, 성공 및 경고 와 같은 색상을 가질 수도 있습니다 . 자세한 내용은 여기를 확인 하십시오 .

SASS 참조

변수

다음 표에는 _settings.scss 프로젝트에서 구성 요소의 기본 스타일을 사용자 정의하는 데 사용되는 SASS 변수가 나열되어 있습니다 .

Sr. 아니. 이름 및 설명 유형 기본값
1

$global-width

사이트의 전역 너비를 나타냅니다. 그리드의 행 너비를 결정하는 데 사용됩니다.

번호 rem-calc (1200)
2

$global-font-size

<html><body>에 적용된 글꼴 크기를 나타냅니다 . 기본적으로 100 %로 설정되어 있으며 사용자의 브라우저 설정 값이 상속됩니다.

번호 100 %

$global-lineheight

모든 유형의 기본 선 높이를 나타냅니다. $ global-lineheight 는 24px이고 $ global-font-size 는 16px로 설정됩니다.

번호 1.5
4

$primary-color

링크 및 버튼과 같은 대화 형 구성 요소에 색상을 제공합니다.

색깔 # 2199e8
5

$secondary-color

.secondary 클래스 를 지원하는 구성 요소와 함께 사용됩니다 .

색깔 # 777
6

$success-color

.success 클래스 와 함께 사용할 때 긍정적 인 상태 또는 작업을 나타냅니다 .

색깔 # 3adb76
7

$warning-color

.warning 클래스 와 함께 사용할 때주의 상태 또는 작업을 나타냅니다 .

색깔 # ffae00
8

$alert-color

.alert 클래스 와 함께 사용하면 부정적인 상태 또는 작업을 나타냅니다 .

색깔 # ec5840
9

$light-gray

밝은 회색 UI 항목에 사용됩니다.

색깔 # e6e6e6
10

$medium-gray

중간 회색 UI 항목에 사용됩니다.

색깔 #cacaca
11

$dark-gray

짙은 회색 UI 항목에 사용됩니다.

색깔 # 8a8a8a
12

$black

블랙 UI 아이템에 사용됩니다.

색깔 # 0a0a0a
13

$white

흰색 UI 항목에 사용됩니다.

색깔 # 페 페페
14

$body-background

바디의 배경색을 나타냅니다.

색깔 $ 흰색
15

$body-font-color

본문의 텍스트 색상을 나타냅니다.

색깔 $ 블랙
16

$body-font-family

본문의 글꼴 목록을 나타냅니다.

명부 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17

$body-antialiased

앤티 앨리어싱 된 유형은 CSS 속성 인 -webkit-font-smoothing-moz-osx-font-smoothing을 사용 하여이 속성을 true 로 설정하여 활성화됩니다 .

부울 진실
18

$global-margin

구성 요소에 대한 글로벌 마진 값을 나타냅니다.

번호 1rem
19

$global-padding

구성 요소의 전역 패딩 값을 나타냅니다.

번호 1rem
20

$global-margin

구성 요소간에 사용되는 글로벌 마진 값을 나타냅니다.

번호 1rem
21

$global-weight-normal

일반 유형의 전역 글꼴 두께를 나타냅니다.

키워드 또는 번호 표준
22

$global-weight-bold

굵은 글씨체의 전체 글꼴 두께를 나타냅니다.

키워드 또는 번호 굵게
23

$global-radius

테두리 반경이있는 모든 요소의 전역 값을 나타냅니다.

번호 0
24

$global-text-direction

CSS의 텍스트 방향을 ltr 또는 rtl로 설정합니다.

ltr

SASS는 Foundation에서 코드를보다 유연하고 사용자 정의 할 수 있도록 도와줍니다.

적합성

Foundation 용 SASS 기반 버전을 설치하려면 Ruby가 Windows에 설치되어 있어야합니다. Foundation은 Ruby SASS 및 libsass로 컴파일 할 수 있습니다. 우리는 추천합니다node-sass 3.4.2+ SASS를 컴파일하는 버전.

Autoprefixer 필요

Autoprefixer는 SASS 파일을 처리합니다. gulp-autoprefixer 는 프로세스를 빌드하는 데 사용됩니다. 다음 자동 접두사 설정은 적절한 브라우저 지원을 얻는 데 사용됩니다.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

프레임 워크로드

NPM을 사용하여 프레임 워크 파일을 설치할 수 있습니다. 명령 줄 인터페이스 (CLI)를 사용하여 Sass 파일을 컴파일 할 수 있습니다. 다음은 프레임 워크를로드하는 명령입니다.

npm install foundation-sites --save

위의 명령 줄 코드를 실행하면 다음 줄이 표시됩니다.

수동으로 컴파일

빌드 프로세스에 따라 프레임 워크 파일을 가져 오기 경로로 추가 할 수 있지만 경로는 동일한 packages_folder / foundation-sites / scss 입니다. @import의 문은 상단에 포함되어있는 기초-sites.scss의 파일입니다. 주어진 코드의 다음 줄은Adjusting CSS Output 부분.

@import 'foundation';
@include foundation-everything;

컴파일 된 CSS 사용

미리 컴파일 된 CSS 파일을 포함 할 수 있습니다. CSS 파일에는 축소 및 축소되지 않은 두 가지 유형이 있습니다. 축소 버전은 프로덕션에 사용되며 축소되지 않은 버전은 프레임 워크 CSS를 직접 편집하는 데 사용됩니다.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

CSS 출력 조정

다양한 구성 요소의 경우 Foundation 출력은 여러 클래스로 구성됩니다. 프레임 워크의 CSS 출력을 제어하는 ​​데 사용됩니다. 한 번에 모든 구성 요소를 포함하려면 다음 한 줄의 코드를 추가합니다.

@include foundation-everything;

다음은 scss 파일에 위 코드를 작성할 때 가져온 구성 요소 목록입니다. 필요하지 않은 구성 요소는 주석을 달 수 있습니다. Your_folder_name / node_modules / foundation-sites / scss / foundation.scss 파일 에서 아래 주어진 코드 행을 볼 수 있습니다 .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

설정 파일

설정 파일은 전체 기초 프로젝트, 즉 _settings.scss에 포함 됩니다. Yeti Launch 또는 CLI를 사용하여 Foundation for Sites 프로젝트를 만드는 경우 src / assets / scss /에서 설정 파일을 찾을 수 있습니다.

npm을 사용하여 Foundation을 설치 했으므로 your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss 아래에 포함 된 설정 파일을 찾을 수 있습니다 . 이를 작업 할 자신의 Sass 파일로 이동할 수 있습니다.

변수로 사용자 정의 할 수없는 경우 자체 CSS를 작성할 수 있습니다. 다음은 버튼의 기본 스타일을 변경하는 변수 세트입니다.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

이 장에서 우리는 JavaScript 에 대해 공부할 것 입니다. Foundation에서 JavaScript를 설정하는 것은 쉽습니다. 필요한 것은 jQuery뿐입니다.

자바 스크립트 설치

ZIP 다운로드, 패키지 관리자 또는 CDN을 사용하여 Foundation JavaScript 파일을 가져올 수 있습니다. 코드에서 닫는 <body> 앞에 배치 된 <script> 태그로 jQuery 및 Foundation에 대한 링크를 제공하고 Foundation이 jQuery 후에로드되는지 확인할 수 있습니다. 자세한 내용은 여기를 클릭하십시오 .

파일 구조

당신이 명령 줄을 통해 재단을 설치하는 경우, 재단은 다음과 같은 개별 파일로 다운로드 플러그인 foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js 등등하고있다. 이 모든 파일은 한 번에 모든 플러그인을 제공하는 Foundation.js 로 결합됩니다 . 플러그인을 사용하려면 먼저 Foundation.core.js 를로드해야합니다.

예를 들어-

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

특정 플러그인에는 Foundation 설치와 함께 제공되는 특정 유틸리티 라이브러리가 필요할 수 있습니다. 다음 장 JavaScript Utilities 에서 특정 플러그인 요구 사항에 대해 자세히 알아볼 수 있습니다 .

개별 파일을로드하면 특히 모바일 사용자에게 네트워크 오버 헤드가 발생합니다. 더 빠른 페이지로드를 위해 grunt 또는 gulp 를 사용하는 것이 좋습니다.

초기화 중

재단 () 함수를 한 번에 플러그인 모든 재단을 초기화하는 데 사용됩니다.

예를 들어-

(document).foundation();

플러그인 사용

데이터 속성을 사용하여 플러그인은 플러그인 이름과 일치하는 HTML 요소에 연결됩니다. 대부분의 플러그인은 다른 요소 내에 중첩 될 수 있지만 단일 HTML 요소에는 한 번에 하나의 플러그인 만있을 수 있습니다. 예를 들어, 툴팁 링크는 data-tooltip 을 추가하여 생성됩니다 . 자세한 내용은 여기를 클릭하십시오 .

플러그인 구성

플러그인은 구성 설정을 사용하여 사용자 정의 할 수 있습니다. 예를 들어, 아코디언이 위아래로 움직이는 속도를 설정할 수 있습니다 . 플러그인 설정은 플러그인을 사용하여 전역 적으로 변경할 수 있습니다.DEFAULTS특성. 자세한 내용은 여기를 클릭하십시오 .

페이지로드 후 플러그인 추가

새 HTML이 DOM에 추가되면 해당 요소의 플러그인이 기본적으로 초기화되지 않습니다. .foundation () 함수 를 다시 호출하여 새 플러그인을 확인할 수 있습니다 .

예를 들어-

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

프로그래밍 방식 사용

자바 스크립트에서 플러그인은 프로그래밍 방식으로 생성 될 수 있으며 각 플러그인은 요소와 개체와 같은 두 개의 매개 변수를 사용하는 생성자 가있는 전역 Foundation 개체의 클래스입니다.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

대부분의 플러그인은 JavaScript를 통해 조작 할 수있는 공용 API와 함께 제공됩니다. 플러그인 문서를 통해 사용 가능한 기능을 연구 할 수 있으며 메서드를 쉽게 호출 할 수 있습니다.

예를 들어-

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.
  • 모든 jQuery 선택기를 선택할 수 있으며 선택기에 여러 플러그인이 있으면 모두 동일한 선택된 메서드가 호출됩니다.

  • 인수는 JavaScript에 인수를 전달하는 것처럼 전달할 수 있습니다.

  • underscore (_) 접두사가 붙은 메서드 는 내부 API의 일부로 간주됩니다. 즉, 경고없이 중단, 변경 또는 사라질 수 있음을 의미합니다.

이벤트

특정 기능이 완료 될 때마다 DOM이 이벤트를 트리거합니다. 예를 들어, 탭이 변경 될 때마다 듣고 응답을 생성 할 수 있습니다. 각 플러그인은 이벤트 목록을 트리거 할 수 있으며 이는 플러그인 문서에 문서화됩니다. Foundation 6에서는 콜백 플러그인이 제거되고 이벤트 리스너로 가져와야합니다.

예를 들어-

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation에는 공통 기능을 추가하는 데 사용되는 JavaScript 유틸리티가 포함되어 있습니다. 매우 유용하고 사용하기 쉽습니다. 이 JavaScript 유틸리티 라이브러리는 Your_folder_name / node_modules / foundation-sites / js 폴더에서 찾을 수 있습니다.

상자

  • Foundation.Box 라이브러리는 몇 가지 메서드로 구성됩니다.

  • 그만큼 js/foundation.util.box.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

  • jQuery 객체 또는 일반 JavaScript 요소는 두 메서드 모두에 전달할 수 있습니다.

var dims = Foundation.Box.GetDimensions(element);

반환 된 객체는 요소 의 차원을 다음 과 같이 지정합니다.

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}
  • ImNotTouchingYou 기능 이 포함되어 있습니다.

  • 전달 된 요소를 기반으로 창의 가장자리와 충돌하거나 선택적 요소 또는 상위 요소 인 부울 값이 반환됩니다.

  • 아래 줄에 지정된 두 가지 옵션 즉, leftAndRightOnly, topAndBottomOnly는 하나의 축에서만 충돌을 식별하는 데 사용됩니다.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

건반

  • Foundation.Keyboard 에는 키보드 이벤트 상호 작용을 쉽게 만드는 데 도움 이되는 많은 메서드가 있습니다.

  • 그만큼 js/foundation.util.keyboard.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

  • Foundation.Keyboard.keys 개체 는 프레임 워크에서 더 자주 사용되는 키 / 값 쌍으로 구성됩니다.

  • 키를 누를 때마다 Foundation.Keyboard.parseKey 가 호출되어 문자열을 가져옵니다. 이것은 자신의 키보드 입력을 관리하는 데 도움이됩니다.

다음 코드는 주어진 $ element 내에서 모든 포커스 가능한 요소를 찾는 데 사용됩니다 . 따라서 사용자가 함수와 선택기를 작성할 필요가 없습니다.

var focusable = Foundation.Keyboard.findFocusable($('#content'));
  • handleKey의 기능은이 라이브러리의 주요 기능입니다.

  • 이 메서드는 키보드 이벤트를 처리하는 데 사용됩니다. 플러그인이 유틸리티에 등록 될 때마다 호출 될 수 있습니다.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Foundation.Keyboard.register의 당신이 당신의 자신의 키 바인딩을 사용하고자 할 때 함수를 호출 할 수 있습니다.

MediaQuery

  • MediaQuery 라이브러리는 모든 반응 형 CSS 기술의 중추입니다.

  • 그만큼 js/foundation.util.mediaQuery.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

  • Foundation.MediaQuery.atLeast ( '큰')가 화면 전체 브레이크 포인트만큼 적어도 있는지 확인하기 위해 사용된다.

  • Foundation.MediaQuery.get ( '매체') 중단 점의 미디어 쿼리를 가져옵니다.

  • Foundation.MediaQuery.queries는 미디어 쿼리의 배열, 재단은 브레이크 포인트에 사용됩니다.

  • Foundation.MediaQuery.current는 현재 브레이크 포인트 크기의 문자열입니다.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

다음 코드는 창에서 미디어 쿼리 변경을 브로드 캐스트합니다.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

모션 및 이동

  • Foundation.Motion javascript는 Foundation 6에 포함 된 Motion UI 라이브러리와 유사합니다. 사용자 정의 CSS 전환 및 애니메이션을 만드는 데 사용됩니다.

  • 그만큼 js/foundation.util.motion.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

  • Foundation.Move 는 CSS3 기반 애니메이션을 간단하고 우아하게 만드는 데 사용됩니다.

  • requestAnimationFrame();메소드는 브라우저에 애니메이션을 수행하도록 지시합니다. 브라우저가 다음 다시 그리기를 수행하기 전에 애니메이션 함수를 호출하도록 요청합니다.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

애니메이션이 완료되면 finished.zf.animate 가 실행됩니다.

타이머 및 이미지로드 됨

Orbit은 함수 타이머와로드 된 이미지를 모두 사용합니다. 그만큼js/foundation.util.timerAndImageLoader.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

이미지로드 메서드는 이미지가 완전히로드되면 jQuery 컬렉션에서 콜백 함수를 실행합니다.

Foundation.onImagesLoaded($images, callback);

접촉

  • 이 메서드는 가상 드래그 이벤트를 추가하고 요소에 스 와이프하는 데 사용됩니다.

  • 그만큼 js/foundation.util.touch.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

  • addTouch의 방법은 모바일 장치 용 슬라이더 플러그인에서 터치 이벤트에 바인딩 요소에 사용된다.

  • spotSwipe의 방법은 모바일 장치 용 궤도에 플러그인 와이프 이벤트 요소를 결합한다.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

트리거

  • 선택한 요소에 대해 지정된 이벤트를 트리거합니다.

  • 그만큼 js/foundation.util.triggers.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

  • 트리거는 많은 Foundation 플러그인에서 사용됩니다.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

이 라이브러리에서는 크기 조정 및 스크롤이라는 두 가지 방법이 사용됩니다.

  • 리사이즈 () resize 이벤트가 발생하는 경우에있어서, 상기 크기 조정 이벤트를 트리거한다.

  • 스크롤 () 는 스크롤 이벤트가 발생하는 경우에있어서, 상기 스크롤 이벤트를 트리거한다.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

여러 가지 잡다한

  • Foundation에는 여러 곳에서 사용되는 핵심 라이브러리의 기능이 거의 없습니다.

  • 그만큼 js/foundation.core.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

  • Foundation.GetYoDigits ([number, namespace])네임 스페이스 가있는 임의의 base-36 uid를 반환합니다. 기본적으로 6 자 길이의 문자열 길이를 반환합니다.

  • Foundation.getFnName (fn) 은 JavaScript 함수 이름을 반환합니다.

  • Foundation.transitionend 는 CSS 전환이 완료되면 발생합니다.

미디어 쿼리는 너비, 높이, 색상과 같은 미디어 기능을 포함하고 지정된 화면 해상도에 따라 콘텐츠를 표시하는 CSS3 모듈입니다.

재단은 다음과 같은 미디어 쿼리를 사용하여 분석 범위를 만듭니다.

  • Small − 모든 화면에 사용됩니다.

  • Medium − 640 픽셀 이상의 화면에 사용됩니다.

  • Large − 1024 픽셀 이상의 화면에 사용됩니다.

중단 점 클래스 를 사용하여 화면 크기를 변경할 수 있습니다 . 예를 들어, 당신이 사용할 수있는 .small-6 작은 크기의 화면과에 대한 클래스를 .medium-4 다음 코드에서와 같이 중간 크기의 스크린을위한 클래스 -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

중단 점 변경

응용 프로그램에서 Foundation의 SASS 버전을 사용하는 경우 중단 점을 변경할 수 있습니다. 아래와 같이 설정 파일 의 $ breakpoints 변수 아래에 중단 점 이름을 배치 할 수 있습니다.

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

$ breakpoint-classes 변수를 수정하여 설정 파일에서 중단 점 클래스를 변경할 수 있습니다 . CSS에서 .large 클래스 를 사용하려면 아래와 같이 목록 끝에 추가하십시오.

$breakpoints-classes: (small medium large);

CSS에서 .xlarge 클래스 를 사용 하고 다음과 같이 목록 끝에이 클래스를 추가 한다고 가정 합니다.

$breakpoints-classes: (small medium large xlarge);

SASS

중단 점 믹스 인

  • @include 와 함께 breakpoint () mixin을 사용하여 미디어 쿼리를 작성할 수 있습니다 .

  • 사용 다운 또는 단지 다음과 같은 코드 형식과 같이 키워드 중단 점의 값과 함께 미디어 쿼리의 동작을 변경 -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

기기 방향 또는 픽셀 밀도에 세로 , 가로망막의 세 가지 미디어 쿼리를 사용할 수 있으며 너비 기반 미디어 쿼리가 아닙니다.

중단 점 기능

  • 내부 함수를 사용하여 breakpoint () mixin 의 기능을 사용할 수 있습니다 .

  • 중단 점 () 기능은 자신의 미디어 쿼리를 작성하는 직접 사용할 수 있습니다 -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

자바 스크립트

미디어 쿼리 작업

  • Foundation JavaScript는 아래에 지정된대로 Foundation.MediaQuery 객체 의 현재 중단 점 이름에 액세스 할 수 있는 MediaQuery.current 함수를 제공합니다.

Foundation.MediaQuery.current
  • MediaQuery.current의 기능 표시 작은 , 중간 , 전류 브레이크 포인트 이름 등.

  • 아래와 같이 MediaQuery.get 함수를 사용하여 중단 점의 미디어 쿼리를 얻을 수 있습니다.

Foundation.MediaQuery.get('small')

Sass 참조

변수

다음 표는 구성 요소의 기본 스타일을 사용자 정의하는 데 사용할 수있는 SASS 변수를 나열합니다.

Sr. 아니. 이름 및 설명 유형 기본값
1

$breakpoints

breakpoint () mixin 을 사용하여 미디어 쿼리를 작성하는 데 사용할 수있는 중단 점 이름입니다 .

지도

작게 : 0px

중간 : 640px

크게 : 1024px

xlarge : 1200px

xxlarge : 1440px

2

$breakpoint-classes

$ breakpoint-classes 변수를 수정하여 CSS 클래스 출력을 변경할 수 있습니다 .

명부 작은 중간 큰

믹스 인

Mixins는 Foundation 구성 요소에 대한 CSS 클래스 구조를 구축하기 위해 스타일 그룹을 만듭니다.

BREAKPOINT

그것은 사용 중단 점 () 미디어 쿼리를 만들 믹스 인을 다음과 같은 활동을 포함 -

  • 문자열이 전달되면 mixin은 $ breakpoints 맵 에서 문자열을 검색 하고 미디어 쿼리를 생성합니다.

  • 픽셀 값을 사용하는 경우 $ rem-base를 사용하여 em 값으로 변환하십시오 .

  • rem 값이 전달되면 단위가 em으로 변경됩니다.

  • em 값을 사용하는 경우 그대로 사용할 수 있습니다.

다음 표는 중단 점에서 사용하는 매개 변수를 지정합니다.

Sr. 아니. 이름 및 설명 유형 기본값
1

$value

중단 점 이름, px, rem 또는 em 값을 사용하여 값을 처리합니다.

키워드 또는 번호 없음

기능

BREAKPOINT

그것은 사용 중단 () 과 일치하는 입력 값과 미디어 쿼리를 만드는 믹스 인이.

다음 표는 중단 점에서 사용되는 가능한 입력 값을 지정합니다.

Sr. 아니. 이름 및 설명 유형 기본값
1

$val

중단 점 이름, px, rem 또는 em 값을 사용하여 값을 처리합니다.

키워드 또는 번호 작은

자바 스크립트 참조

기능

두 가지 유형의 기능이 있습니다.

  • .atLeast− 화면을 확인합니다. 적어도 중단 점만큼 넓어야합니다.

  • .get − 중단 점의 미디어 쿼리를 가져 오는 데 사용됩니다.

다음 표는 위의 함수에서 사용하는 매개 변수를 지정합니다.

Sr. 아니. 이름 및 설명 유형
1

size

지정된 함수에 대한 중단 점의 이름을 각각 확인하고 가져옵니다.

기술

Foundation 그리드 시스템은 페이지를 통해 최대 12 개의 열로 확장됩니다. 그리드 시스템은 콘텐츠를 보관하는 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다.

그리드 옵션

다음 표는 Foundation 그리드 시스템이 여러 장치에서 작동하는 방식에 대해 간략하게 설명합니다.

소형 장치 전화 (<640px) 중형 기기 태블릿 (> = 640px) 대형 장치 노트북 및 데스크탑 (> = 1200px)
그리드 동작 항상 수평 시작하기 위해 축소, 중단 점 위 가로 시작하기 위해 축소, 중단 점 위 가로
클래스 접두사 .작은-* .매질-* .큰-*
열 수 12 12 12
중첩 가능
오프셋
컬럼 순서

기초 그리드의 기본 구조

다음은 기초 그리드의 기본 구조입니다-

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>
  • 먼저 클래스를 만들어 가로 열 그룹을 만듭니다.

  • 콘텐츠는 열 내에 배치되어야하며 열만 행의 직계 자식이 될 수 있습니다.

  • 그리드 열은 확장하려는 사용 가능한 열 수를 12 개 지정하여 생성됩니다. 예를 들어 4 개의 동일한 열에 대해 .large-3을 사용합니다.

다음은 Foundation 그리드 시스템에서 사용되는 세 가지 클래스입니다.

Sr. 아니. 기본 그리드 클래스 및 설명
1

대형 - *의 클래스가 큰 기기에 사용된다.

2 매질

중간 * 클래스는 중간 장치에 사용된다.

작은

small- * 클래스는 소형 장치에 사용됩니다.

고급 그리드

다음은 Foundation에서 사용되는 고급 그리드 형식입니다.

Sr. 아니. 고급 그리드 및 설명
1 결합 된 열 / 행

클래스 용기로 사용할 전폭 열을 얻기 위해 동일한 요소에 사용된다.

2 중첩

그리드 열을 다른 열 안에 중첩 할 수 있습니다.

오프셋

사용 큰 오프셋, * 또는 작은 오프셋, *의 클래스를, 당신은 오른쪽으로 열을 이동할 수 있습니다.

4 불완전한 행

행에 최대 12 개의 열이 포함되지 않은 경우 Foundation은 마지막 요소를 오른쪽으로 자동으로 띄웁니다.

5 행 축소 / 축소 해제

미디어 쿼리 크기를 사용하면 패딩을 표시하기 위해 축소 및 축소 해제 클래스가 행 요소에 포함됩니다.

6 중앙 열

기둥에 작은 중심 의 클래스를 포함하여 중앙 에 기둥을 만들 수 있습니다.

7 소스 주문

소스 순서 지정 클래스는 중단 점 사이에서 열을 이동하는 데 사용됩니다.

8 블록 그리드

블록 그리드는 콘텐츠를 분할하는 데 사용됩니다.

의미 론적으로 구축

SASS 믹스 인 세트를 사용하여 자체 시맨틱 그리드를 구축하는 데 사용되는 그리드 CSS가 생성됩니다. 자세한 정보는 여기를 클릭하세요

SASS 참조

다음은 Foundation에서 사용되는 그리드에 대한 SASS 참조입니다.

Sr. 아니. 기본 그리드 및 설명
1 변수

sass 변수를 사용하여이 구성 요소의 기본 스타일을 수정할 수 있습니다.

2 믹스 인

최종 CSS 출력은 mixin을 사용하여 빌드됩니다.

그리드는 플렉스 디스플레이 속성 에 따라 다릅니다 . 자동 스태킹, 소스 정렬, 수직 정렬 및 수평 정렬과 같이 flexbox에서 사용할 수있는 여러 기능으로 구성됩니다.

브라우저 지원

플렉스 그리드는 Chrome, Firefox, Internet Explorer 10 이상, Safari 6 이상, Android 4 이상 및 iOS 7 이상에서 지원됩니다.

다음 표는 설명과 함께 Flex Grid의 기능을 설명합니다.

Sr. 아니. 특징 및 설명
1 가져 오기

기본 CSS를 사용하기위한 플렉스 그리드 용 내보내기 믹스 인이 포함되어 있습니다.

2 기초

Flex 그리드 구조는 플로트 그리드의 구조와 유사합니다.

고급 사이징

크기 조정 클래스가 열에 포함되지 않은 경우 자체적으로 확장되어 열의 나머지 공간을 채 웁니다.

4 반응 형 조정

플렉스 그리드의 명시적인 열 크기가 제공되지 않으면 열 크기가 자동으로 조정됩니다.

5 열 정렬

플렉스 그리드 열은 상위 행에서 가로 또는 세로 축으로 정렬 될 수 있습니다.

6 소스 주문

소스 순서는 다른 크기의 화면에서 열을 재배 열하는 데 도움이됩니다.

7 Sass 참조

SASS (Syntactically Awesome Stylesheet)는 CSS의 반복을 줄이고 시간을 절약하는 데 도움이되는 CSS 전 처리기입니다.

이 장에서 우리는 Forms. Foundation 은 양식 스타일과 그리드 지원을 결합한 강력하고 간편하며 다양한 양식 레이아웃 시스템을 제공합니다.

다음 표에는 Foundation에서 사용되는 양식 요소가 나열되어 있습니다.

Sr. 아니. 양식 요소 및 설명
1 양식 기본 사항

양식 작성은 쉽고 매우 유연하며 표준화 된 양식 요소와 강력한 그리드 시스템의 조합으로 구축됩니다.

2 도움말 텍스트

요소의 목적을 사용자에게 알리는 데 사용되며 일반적으로 필드 아래에 배치됩니다.

라벨 포지셔닝

레이블을 입력의 왼쪽 또는 오른쪽 에 배치 할 수 있습니다 .

4 인라인 레이블 및 버튼

추가 텍스트 또는 컨트롤을 입력 필드의 왼쪽 / 오른쪽에 첨부 할 수 있습니다.

5 사용자 지정 컨트롤

날짜 선택기, 스위치 또는 슬라이더와 같은 사용자 지정 컨트롤에 액세스하려면 약간의주의가 필요합니다.

6 SASS 참조

SASS Reference를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.

기술

  • Foundation은 가시성 클래스를 사용하여 장치 방향 (세로 및 가로) 또는 화면 크기 (소형, 중형, 대형 또는 초대형 화면)에 따라 요소를 표시하거나 숨 깁니다.

  • 사용자는 브라우징 환경에 따라 요소를 사용할 수 있습니다.

다음 표는 탐색 환경을 기반으로 요소를 제어하는 ​​Foundation의 가시성 클래스를 나열합니다.

Sr. 아니. 가시성 등급 및 설명
1 화면 크기로 표시

.show 클래스 를 사용하여 장치 기반의 요소를 보여줍니다 .

2 화면 크기로 숨기기

.hide 클래스 를 사용하여 장치 기반의 요소를 숨 깁니다 .

Foundation은 .hide.invisible 클래스 를 사용하여 콘텐츠를 숨길 수있는 일부 클래스를 지원 하고 페이지에 아무것도 표시하지 않습니다.

방향 감지

장치는 가로세로 기능 을 사용하여 다른 방향을 결정할 수 있습니다 . 휴대폰과 같은 핸드 헬드 장치는 회전 할 때 다른 방향을 지정합니다. 데스크톱의 경우 방향은 항상 가로입니다.

접근성

다음 표는 화면 판독기가 읽을 수 있도록하는 동안 콘텐츠를 숨기는 화면 판독기에 대한 접근성 기술을 나열합니다.

Sr. 아니. 접근성 등급 및 설명
1 스크린 리더 용으로 표시

그것은 사용 쇼를 위해 SR 을 읽는 화면 판독기를 방지하면서 숨길 수있는 내용을 클래스를.

2 스크린 리더 용 숨기기

그것은 사용 아리아 - 숨겨진 텍스트를 볼 수 있지만 화면 판독기가 읽을 수 없습니다 속성을.

스킵 링크 생성

스크린 리더는 사이트의 콘텐츠를 탐색 할 수있는 건너 뛰기 링크를 만듭니다.

Sass 참조

Foundation은 다음 믹스 인을 사용하여 CSS 출력을 표시하므로 구성 요소에 대한 자체 클래스 구조를 구축 할 수 있습니다.

Sr. 아니. Mixin 및 설명 매개 변수 유형
1

show-for

기본적으로 요소를 숨기고 특정 화면 크기 위에 표시합니다.

$ size 예어
2

show-for-only

기본적으로 요소를 숨기고 중단 점 내에 표시합니다.

$ size 예어

hide-for

기본적으로 요소를 표시하고 특정 화면 크기 위에 숨 깁니다.

$ size 예어
4

hide-for-only

기본적으로 요소를 표시하고 특정 화면 크기 위에 숨 깁니다.

$ size 예어

이러한 모든 믹스 인의 기본값은 none 으로 설정됩니다 .

기술

Foundation의 Typography는 요소에 대한 매력적이고 간단한 기본 스타일을 만드는 제목, 단락, 목록 및 기타 인라인 요소를 정의합니다.

다음 표는 Foundation에서 사용되는 다양한 유형의 타이포그래피를 나열합니다.

Sr. 아니. 타이포그래피 및 설명
1 단락

단락은 다양한 글꼴 크기, 강조 표시된 단어, 줄 높이 등으로 정의 된 문장 그룹입니다.

2 머리글

h1에서 h6까지의 HTML 제목을 정의합니다.

연결

텍스트 나 이미지를 클릭하면 다른 문서를 여는 하이퍼 링크가 생성됩니다.

4 분할기

<hr> 태그를 사용하여 섹션 사이를 나누는 데 사용됩니다.

5 정렬 된 목록과 정렬되지 않은 목록

Foundation은 정렬 된 목록, 정렬되지 않은 목록을 지원하여 사물을 나열합니다.

6 정의 목록

정의 목록은 이름 값 쌍을 표시하는 데 사용됩니다.

7 인용구

그것은 평상시보다 훨씬 더 크게 정의하는 텍스트 블록을 나타냅니다.

8 약어 및 코드

약어는 단어 또는 구의 단축 용어를 정의하고 코드는 코드 조각을 나타냅니다.

9 키 입력

특정 기능을 수행하는 데 사용됩니다.

10 접근성

Foundation은 페이지의 콘텐츠에 액세스하기위한 몇 가지 지침을 제공합니다.

Sass 참조

표에 나열된 다음 SASS 변수를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.

Sr. 아니. 이름 및 설명 유형 기본값
1

$header-font-family

헤더 요소의 글꼴 패밀리를 지정합니다.

문자열 또는 목록 $ body-font-family
2

$header-font-weight

헤더의 글꼴 두께를 지정합니다.

$ global-weight-normal

$header-font-style

헤더의 글꼴 스타일을 제공합니다.

표준
4

$font-family-monospace

코드 샘플과 같이 고정 폭 유형을 사용하는 요소에 사용되는 글꼴 스택입니다.

문자열 또는 목록 Consolas, 'Liberation Mono', Courier, monospace
5

$header-sizes

제목의 화면 크기를 정의하고 각 키는 중단 점이며 각 값은 제목 크기의 맵입니다.

지도
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
6

$header-color

헤더의 색상을 제공합니다.

색깔 상속하다
7

$header-lineheight

헤더의 줄 높이를 정의합니다.

번호 1.4
8

$header-margin-bottom

헤더의 하단 여백을 제공합니다.

번호 0.5rem
9

$header-text-rendering

텍스트 렌더링 방법을 정의합니다.

optimizeLegibility
10

$small-font-size

<small> 요소의 글꼴 크기를 지정합니다.

번호 80 %
11

$paragraph-margin-bottom

단락의 아래쪽 여백을 지정합니다.

번호 1rem
12

$paragraph-text-rendering

텍스트 렌더링 단락을위한 방법.

optimizeLegibility
13

$code-color

코드 샘플에 텍스트 색상을 제공합니다.

색깔 $ 블랙
14

$code-font-family

코드 샘플에 글꼴 패밀리를 제공합니다.

문자열 또는 목록 $ font-family-monospace
15

$code-border

코드 주변의 테두리를 지정합니다.

명부 1px 단색 $ 중간 회색
16

$code-padding

텍스트 주위의 패딩을 지정합니다.

번호 또는 목록 rem-calc (2 5 1)
17

$anchor-color

링크의 기본 색상입니다.

색깔 $ 원색
18

$anchor-color-hover

마우스 오버시 링크의 기본 색상을 지정합니다.

색깔 scale-color ($ anchor-color, $ lightness : -14 %)
19

$anchor-text-decoration

링크의 기본 텍스트 장식.

없음
20

$anchor-text-decoration-hover

마우스 오버시 링크의 기본 텍스트 장식.

없음
21

$hr-width

구분선의 최대 너비를 정의합니다.

번호 $ global-width
22

$hr-border

구분선의 기본 테두리를 지정합니다.

명부 1px 단색 $ 중간 회색
23

$hr-margin

구분선의 기본 여백입니다.

번호 또는 목록 rem-calc (20) 자동
24

$list-lineheight

목록의 항목에 대한 행 높이를 정의합니다.

번호 $ paragraph-lineheight
25

$list-style-type

순서가 지정되지 않은 목록에 글 머리 기호 유형을 제공합니다.

디스크
26

$list-style-position

순서가 지정되지 않은 목록의 글 머리 기호 위치를 정의합니다.

외부
27

$list-side-margin

왼쪽 (또는 오른쪽) 여백을 정의합니다.

번호 1.25rem
28

$defnlist-term-weight

<dt> 요소의 글꼴 두께를 제공합니다.

$ global-weight-bold
29

$defnlist-term-margin-bottom

<dt> 및 <dd> 요소 사이의 간격을 제공합니다.

번호 0.3rem
30

$blockquote-color

<blockquote> 요소의 텍스트 색상을 적용합니다.

색깔 $ 진한 회색
31

$blockquote-padding

<blockquote> 요소 내부에 패딩을 제공합니다.

번호 또는 목록 rem-calc (9 20 0 19)
32

$blockquote-border

<blockquote> 요소에 대한 측면 테두리를 제공합니다.

명부 1px 단색 $ 중간 회색
33

$cite-font-size

<cite> 요소의 글꼴 크기를 정의합니다.

번호 rem-calc (13)
34

$cite-color

<cite>요소의 텍스트 색상을 제공합니다 .

색깔 $ 진한 회색
35

$keystroke-font

<kbd> 요소의 글꼴 패밀리를 정의합니다.

문자열 또는 목록 $ font-family-monospace
36

$keystroke-color

<kbd> 요소의 텍스트 색상을 정의합니다.

색깔 $ 블랙
37

$keystroke-background

<kbd> 요소의 배경색을 제공합니다.

색깔 $ 밝은 회색
38

$keystroke-padding

<kbd> 요소의 패딩을 지정합니다.

번호 또는 목록 rem-calc (2 4 0)
39

$keystroke-radius

<kbd> 요소의 테두리 반경을 표시합니다.

번호 또는 목록 $ global-radius
40

$abbr-underline

<abbr> 요소에 아래쪽 테두리 스타일을 제공합니다.

명부 1px 점선 $ black

이 장에서 우리는 Typography Helpers. 타이포그래피 도우미는 의미 상 관련있는 방식으로 텍스트 서식을 지정하는 데 사용됩니다. Foundation의 도우미 클래스를 사용하면 일부 타이포그래피 스타일을 더 빠르게 스캐 폴딩 할 수 있습니다.

다음 표에는 Foundation에서 사용되는 Typography Helpers가 나열되어 있습니다.

Sr. 아니. 타이포그래피 도우미 및 설명
1 텍스트 정렬

left , right , centerjustify 와 같은 요소의 텍스트 정렬을 변경하는 데 도움이됩니다 .

2 하위 헤더

.subheader 클래스 를 사용하여 모든 헤더 요소에 하위 헤더를 추가 할 수 있습니다 .

리드 단락

일반 텍스트에 비해 상당히 큰 텍스트 블록으로 광고 또는 기타 설명 텍스트에 사용할 수 있습니다.

4 글 머리 기호가없는 목록

기본적으로 <ul> 은 Foundation의 글 머리 기호 목록입니다. 글 머리 기호를 제거하려면 .no-bullet 클래스를 사용할 수 있습니다 .

5 통계

대시 보드를 다룰 때마다 몇 가지 중요한 숫자를 강조해야합니다. .stat 클래스 를 사용하여이를 달성 할 수 있습니다 .

Sass 참조

변수

다음 표는 사용자 정의 할 컴포넌트의 기본 스타일을 만드는 프로젝트 설정 파일의 SASS 변수를 나열합니다.

Sr. 아니. 이름 및 설명 유형 기본값
1

$lead-font-size

기본적으로 리드 단락의 글꼴 크기입니다.

번호 $ global-font-size * 1.25
2

$lead-lineheight

기본적으로 리드 단락의 줄 높이입니다.

1.6

$subheader-lineheight

하위 헤더의 기본 줄 높이입니다.

번호 1.4
4

$subheader-color

하위 헤더의 기본 글꼴 색상입니다.

색깔 $ 진한 회색
5

$subheader-font-weight

하위 헤더의 기본 글꼴 두께입니다.

$ global-weight-normal
6

$subheader-margin-top

하위 헤더의 기본 상단 여백.

번호 0.2rem
7

$subheader-margin-bottom

하위 헤더의 기본 하단 여백.

번호 0.5rem
8

$stat-font-size

고정 숫자의 기본 글꼴 크기

번호 2.5rem

이 장에서 우리는 basic controls. Foundation은 버튼 , 슬라이더스위치 와 같은 기본 컨트롤을 제공 합니다 .

다음 표에는 Foundation에서 사용되는 기본 컨트롤이 나열되어 있습니다.

Sr. 아니. 기본 제어 및 설명
1 단추

Foundation은 필요에 따라 사용자 정의 할 수있는 다양한 버튼 스타일을 지원합니다.

2 버튼 그룹

해당 작업 요소에 대한 컨테이너입니다. 작업 그룹이 막대에 표시되면 제대로 작동합니다.

닫기 버튼

닫기 버튼은 무언가를 클릭하여 사라지게 할 때 사용됩니다.

4 슬라이더

슬라이더는 범위 내에서 특정 값을 설정하는 데 매우 유용합니다.

5 스위치

그것은 당신이 그것을 클릭하여 스위치를 끄거나 켤 수 있습니다.

기술

Foundation은 탐색 요소 스타일 지정을위한 몇 가지 다른 옵션을 제공합니다. 많은 간단한 탐색 패턴이 번들로 제공됩니다. 강력한 반응 형 탐색 솔루션을위한 형태로 통합 할 수 있습니다.

다음 표는 설명과 함께 다양한 유형의 탐색을 설명합니다.

Sr. 아니. 유형 및 설명
1 탐색 개요

탐색은 다른 섹션에 대한 링크를 포함하며 많은 탐색 패턴으로 구성됩니다.

2 메뉴

메뉴는 많은 탐색 구성 요소를 만드는 데 사용됩니다.

드롭 다운 메뉴

드롭 다운 메뉴 플러그인은 주 메뉴 아래에 하위 메뉴를 만드는 데 사용됩니다.

4 드릴 다운 메뉴

드릴 다운 메뉴 플러그인은 슬라이더 형식으로 주 메뉴에 하위 메뉴를 만드는 데 사용됩니다.

5 아코디언 메뉴

아코디언 효과와 함께 축소 가능한 메뉴를 표시하고 아코디언 메뉴 플러그인을 사용하여 자동 축소를 지원합니다.

6 상단 바

상단 표시 줄은 복잡한 탐색 표시 줄을 다양한 화면 크기에 쉽게 표시하는 데 도움이됩니다.

7 반응 형 탐색

반응 형 메뉴 플러그인은 화면의 다양한 크기로 메뉴를 할당합니다.

8 마젤란

Magellan은 고정 된 위치에있는 내비게이션을 생성합니다. 스크롤 위치에 따라 페이지의 탐색 목록을 자동으로 추적합니다.

9 쪽수 매기기

페이지 매김, 정렬되지 않은 목록은 다른 많은 인터페이스 요소와 마찬가지로 Bootstrap에서 처리됩니다.

10 빵 부스러기

이동 경로는 탐색 계층 구조 내에서 사이트의 현재 위치를 지정합니다.

Foundation 컨테이너는 사이트에 대해 항상 브라우저의 전체 너비를 만들고 사이트 콘텐츠를 래핑하는 데 사용됩니다.

다음 표는 재단에서 사용되는 컨테이너의 일부를 나열합니다-

Sr. 아니. 컨테이너 및 설명
1 아코디언

아코디언에는 웹 사이트에서 많은 양의 데이터를 확장 및 축소하는 데 사용되는 수직 탭이 포함되어 있습니다.

2 부르다

구성 요소 내부에 콘텐츠를 배치합니다.

드롭 다운 창

버튼을 클릭하면 내용이 표시됩니다.

4 미디어 개체

이미지, 비디오, 블로그 댓글 등과 같은 미디어 개체를 일부 콘텐츠와 함께 추가합니다.

5 오프 캔버스

보이는 영역에서 탐색 메뉴를 설정하고 주요 콘텐츠를 표시합니다.

6 공개 모드

Foundation에서는 표시 클래스를 사용하여 모달 대화 상자 또는 팝업 창을 만들 수 있습니다 .

7 테이블

Foundation은 데이터를 표 형식으로 표시하기위한 레이아웃을 제공합니다.

8

페이지를 벗어나지 않고 다른 창에 콘텐츠를 표시하는 탐색 기반 탭입니다.

이 장에서는 Foundation의 미디어 에 대해 공부 합니다. Foundation은 Flex Video , Label , orbit , 진행률 표시 줄도구 설명 과 같은 여러 미디어 유형으로 구성됩니다 . 다음 표에는 모든 미디어 유형이 나열되어 있습니다.

Sr. 아니. 미디어 유형 및 설명
1 Flex 비디오

화면 크기에도 불구하고 올바른 종횡비를 유지하기 위해 플렉스 비디오 컨테이너에 비디오를 포함하는 데 사용됩니다.

2 상표

특정 섹션을 호출하거나 메타 데이터를 첨부하기 위해 본문에 넣을 수있는 인라인 스타일링에 사용할 수 있습니다.

궤도

강력하고 반응이 빠른 슬라이더로 사용자가 터치 스크린 장치에서 스 와이프 할 수 있습니다.

4 진행 표시 줄

진행 상황을 표시하는 데 사용되며 레이아웃에 추가 할 수 있습니다.

5 툴팁

페이지의 용어 또는 작업에 대한 추가 정보를 표시하는 데 사용됩니다.

기술

플러그인은 원래 Foundation 핵심 기능으로 완료되지 않은 추가 기능을 제공하는 소프트웨어입니다. 재단 플러그인을 업로드하여 사이트의 기능을 확장 할 수 있습니다. 플러그인은 작업을 더 쉽게 만드는 데 사용됩니다.

다음 표는 설명과 함께 다양한 유형의 플러그인을 설명합니다.

Sr. 아니. 유형 및 설명
1 머물다

Abide는 필수 속성 및 패턴을 사용하는 네이티브 API가있는 HTML5 양식 유효성 검사 라이브러리에서 사용됩니다.

2 평형 장치

이퀄라이저는 페이지에서 동일한 높이로 여러 콘텐츠를 만드는 방법입니다.

교환

사용자 기기에 따라 반응 형 콘텐츠를로드하는 데 사용됩니다.

4 토글 러

토글은 한 설정에서 다른 설정으로 전환하는 데 사용됩니다.

5 어려운

고정 플러그인은 웹 사이트에서 일정한 콘텐츠 또는 이미지를 만드는 데 사용됩니다.

Foundation은 util , color , selector , unit , value 등과 함께 사용할 수있는 SASS 유틸리티 함수 세트를 제공합니다 .

다음 코드 줄을 사용하여 한 번에 모든 유틸리티 파일을 가져올 수 있습니다-

@import 'util/util';

아래와 같이 개별 유틸리티 파일을 가져올 수도 있습니다.

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sass 참조

다음 SASS 함수를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.

전경

배경색을 기준으로 요소에 전경색을 제공합니다. 다른 유형의 매개 변수를 할당하기 위해 다음 형식을 사용합니다.

foreground($color, $yes, $no, $threshold)

위의 매개 변수는 다음 표에 지정되어 있습니다.

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$color

색상의 밝기를 확인합니다.

색깔 없음
2

$yes

색상이 밝은 경우 $ yes 색상을 반환합니다 .

색깔 $ 블랙

$no

색상이 어두우면 $ no 색상을 반환합니다 .

색깔 $ 흰색
4

$threshold

밝기의 임계 값을 나타냅니다.

백분율 60 %

스마트 스케일

밝기에 따라 요소에 적절한 색상을 제공합니다. 적절한 색상을 지정하기 위해 다음 형식을 사용합니다.

smart-scale($color, $scale, $threshold)

위의 주어진 매개 변수는 다음 표에 지정되어 있습니다.

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$color

색상을 조정하는 데 사용됩니다.

색깔 없음
2

$scale

확대 또는 축소 할 백분율을 지정합니다.

백분율 5 %

$threshold

밝기의 임계 값을 나타냅니다.

백분율 40 %

텍스트 입력

텍스트 입력 유형을 사용하는 동안 선택기를 만듭니다. 입력 유형을 지정하기 위해 다음 형식을 사용합니다-

text-inputs($types)

다음 표에 지정된 매개 변수를 사용합니다.

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$types

선택기를 생성하기위한 여러 텍스트 입력 유형을 제공합니다.

색깔 -

스트립 유닛

값에서 단위를 제거하고 숫자 만 반환합니다. 그것은 값에서 단위를 제거하기 위해 다음 형식을 사용합니다-

strip-unit($num)

다음 표에 지정된 매개 변수를 사용합니다.

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$num

값에서 단위를 제거 할 때 번호를 지정합니다.

색깔 없음

rem-calc

rem 값과 일치하도록 픽셀 값을 변경합니다. 픽셀 값을 rem 값으로 변환하기 위해 다음 형식을 사용합니다.

rem-calc($values, $base)

표에 지정된대로 다음 매개 변수를 사용합니다-

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$values

픽셀 값을 rem 값으로 변환하고 공백을 사용하여 구분합니다. 쉼표로 구분 된 목록을 변환하는 경우 목록을 괄호로 묶습니다.

번호 또는 목록 없음
2

$base

픽셀을 rem 값으로 변환하는 동안 기본 값을 제공합니다. 베이스에 null 값이 있으면 함수는 $ base-font-size 변수를베이스로 사용합니다.

번호 없는

가가

false가 아닌 경우 값을 지정합니다. false 값에는 null, none, 0 또는 빈 목록이 포함됩니다. 그것은 값을 지정하기 위해 다음 형식을 사용합니다-

has-value($val)

다음 표에 지정된 매개 변수를 사용합니다.

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$val

지정된 값을 확인합니다.

혼합 없음

겟 사이드

그것은 값의 측면을 지정하고 패딩, 여백 등에서 위쪽 / 오른쪽 / 아래쪽 / 왼쪽 값을 정의합니다. 값의 측면을 지정하기 위해 다음 형식을 사용합니다.

has-value($val)

표에 지정된대로 다음 매개 변수를 사용합니다-

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$val

값의 측면을 지정합니다.

목록 또는 번호 없음
2

$side

(위쪽 / 오른쪽 / 아래쪽 / 왼쪽) 값이 반환되어야하는 쪽을 결정합니다.

예어 없음

테두리 값 가져 오기

요소의 테두리 값을 결정합니다. 그것은 경계 값을 지정하기 위해 다음 형식을 사용합니다-

get-border-value($val, $elem)

표에 지정된대로 다음 매개 변수를 사용합니다-

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$val

테두리의 특정 값을 찾습니다.

명부 없음
2

$elem

테두리 구성 요소를 추출하는 데 사용됩니다.

예어 없음

가져 오기

scss / util / _mixins.scss 파일 아래에있는 SASS 믹스 인의 내용을 가져옵니다 . 다음 코드 줄을 사용하여 SASS 믹스 인을 가져올 수 있습니다.

@import 'util/mixins';

Sass 참조

SASS 함수를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.

믹스 인

다음 믹스 인을 사용하여 구성 요소의 CSS 클래스 구조를 구축 할 수 있습니다.

CSS-TRIANGLE

드롭 다운 화살표, 드롭 다운 핍 등을 만드는 데 사용됩니다. 기존 요소에 삼각형을 연결하기 위해 <i> & :: before </ i> 또는 <i> & :: after </ i> 선택기를 사용합니다. 다음 형식을 사용합니다-

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

그것은 표에 지정된 다음 매개 변수를 사용합니다-

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$triangle-size

삼각형의 너비를 정의합니다.

번호 없음
2

$triangle-color

삼각형의 색상을 정의합니다.

색깔 없음

$triangle-direction

위쪽, 오른쪽, 아래쪽 또는 왼쪽과 같은 삼각형의 방향을 정의합니다.

예어 없음

HAMBURGER

너비, 높이, 막대 수 및 색상으로 메뉴 아이콘을 만드는 데 사용됩니다. 다음 형식을 사용합니다-

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

그것은 표에 지정된 다음 매개 변수를 사용합니다-

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$color

아이콘의 색상을 정의합니다.

색깔 없음
2

$color-hover

아이콘 위로 마우스를 가져갈 때 색상을 정의합니다.

색깔 없음

$width

아이콘의 너비를 정의합니다.

번호 없음
4

$height

아이콘의 높이를 정의합니다.

번호 없음
5

$weight

아이콘에있는 개별 막대의 무게를 정의합니다.

번호 없음
6

$bars

아이콘의 막대 수를 정의합니다.

번호 없음

BACKGROUND-TRIANGLE

요소에 배경 이미지를 지정하는 데 사용됩니다. 다음 형식을 사용합니다-

@include background-triangle($color);

그것은 표에 지정된대로 매개 변수를 사용합니다-

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$color

삼각형의 색상을 정의합니다.

색깔 $ 블랙

CLEARFIX

이 믹스 인은 자동으로 자식 요소를 지워서 추가 마크 업이 필요하지 않습니다. 다음 형식을 사용합니다-

@include clearfix;

AUTO-WIDTH

컨테이너에있는 요소 수에 따라 요소의 크기를 자동으로 조정합니다. 다음 형식을 사용합니다-

@include auto-width($max, $elem);

표에 지정된대로 다음 매개 변수를 사용합니다-

Sr. 아니. 매개 변수 및 설명 유형 기본값
1

$max

컨테이너의 최대 항목 수를 식별합니다.

번호 없음
2

$elem

형제 선택자에 태그를 사용합니다.

예어

DISABLE-MOUSE-OUTLINE

마우스 입력 동작을 식별 할 때 요소 주변의 윤곽선을 비활성화하는 데 사용됩니다. 다음 형식을 사용합니다-

@include disable-mouse-outline;

ELEMENT-INVISIBLE

요소를 숨기는 데 사용되며 키보드 및 기타 장치에서 사용할 수 있습니다. 다음 형식을 사용합니다-

@include element-invisible;

ELEMENT-INVISIBLE-OFF

보이지 않는 요소를 제거하고 element-invisible () 믹스 인 을 사용하여 CSS 출력을 반전하는 데 사용됩니다 . 다음 형식을 사용합니다-

@include element-invisible-off;

VERTICAL-CENTER

다음 형식을 사용하여 정적이 아닌 부모 요소 내부에 요소를 수직으로 배치하는 데 사용됩니다.

@include vertical-center;

HORIZONTAL-CENTER

다음 형식을 사용하여 비 정적 부모 요소 내부에 요소를 수평 중앙에 배치하는 데 사용됩니다.

@include horizontal-center;

ABSOLUTE-CENTER

다음 형식을 사용하여 비 정적 부모 요소 내부에 절대적으로 요소를 배치하는 데 사용됩니다.

@include absolute-center;

Foundation은 UI 전환 및 애니메이션을 만들기위한 모션 UI 라이브러리를 제공하며 Toggler , RevealOrbit 과 같은 Foundation 구성 요소에서 사용됩니다 .

Motion UI 설치

다음 코드 줄과 같이 npm 또는 bower를 사용하여 프로젝트에 Motion UI 라이브러리를 설치할 수 있습니다.

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

다음 코드 줄과 같이 config.rb 를 사용하여 Compass 에서 Motion UI 라이브러리의 경로를 추가 할 수 있습니다.

add_import_path 'node_modules/motion-ui/src'

다음 코드 줄을 사용하여 gulp-sass에 경로를 포함 할 수 있습니다.

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

다음 코드를 사용하여 SASS 파일에서 Motion UI 라이브러리를 가져옵니다.

@import 'motion-ui'

기본 제공 전환

Foundation은 Motion UI 라이브러리에서 생성 된 전환 클래스를 사용하여 전환 효과를 제공합니다. 전환 효과 를 사용하여 간단한 예 를 하나 만들어 보겠습니다 .

사용자 지정 전환

모션 UI 라이브러리를 사용하여 사용자 정의 전환 클래스를 설정할 수 있습니다. 예를 들어, 요소를 회전하는 mui-hinge () 전환에 대한 사용자 정의 클래스를 설정 합니다.

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

생기

모션 UI 전환 효과를 사용하여 CSS 애니메이션을 만들 수 있습니다. 데이터 애니메이션 클래스를 사용하여 모달에서 애니메이션이 작동하는 방식을 확인 하려면이 링크 를 클릭하십시오 .