재단-퀵 가이드

재단이란 무엇입니까?

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 , layouts 및 partials의 세 폴더 아래에 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 , center 및 justify 와 같은 요소의 텍스트 정렬을 변경하는 데 도움이됩니다 .
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 , Reveal 및 Orbit 과 같은 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 애니메이션을 만들 수 있습니다. 데이터 애니메이션 클래스를 사용하여 모달에서 애니메이션이 작동하는 방식을 확인 하려면이 링크 를 클릭하십시오 .

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved