財団-概要

財団とは？

Foundationは、美しいレスポンシブWebサイトを設計するための高度なフロントエンドフレームワークの1つです。すべてのタイプのデバイスで動作し、HTML、CSS、およびJavaScriptプラグインを提供します。

Foundationは、2008年にZURBによって作成された内部スタイルガイドとして始まりました。 ZURBは、カリフォルニア州キャンベルにある製品設計会社です。 2011年10月にFoundation 2.0をオープンソースとしてリリースしました。 Foundationの最新バージョンは6.1.1で、2015年12月にリリースされました。

Foundationを使用する理由

デフォルトのコンパイラよりもはるかに高速に動作するSassコンパイラを使用して、開発を高速化します。
それはあなたのウェブサイトを価格表、スイッチ、無謀な行動、範囲スライダー、ライトボックスなどで豊かにします。
GruntやLibsassなどの開発パッケージが付属しており、コーディングと制御を高速化できます。
Foundation for Sitesは、Webサイトを迅速に構築するためのHTML、CSS、およびJSを提供します。
電子メールフレームワークは、応答性の高いHTML電子メールを提供します。これは、どのデバイスでも読み取ることができます。
Foundation for Appsを使用すると、完全にレスポンシブなWebアプリを構築できます。

特徴

強力なグリッドシステムといくつかの便利なUIコンポーネントとクールなJavaScriptプラグインがあります。
あらゆる種類のデバイスに対応するレスポンシブデザインを提供します。
モバイルデバイス向けに最適化され、モバイルファーストアプローチを真にサポートします。
カスタマイズ可能で拡張可能なHTMLテンプレートを提供します。

利点

HTMLとCSSの基本的な理解があれば、簡単に習得できます。
Foundationはオープンソースであるため、自由に使用できます。
多数のテンプレートを提供し、Webサイトの開発をすぐに開始できるようにします。
Foundationは、SASSやCompassなどのプリプロセッサをサポートしているため、開発が高速になります。

デメリット

Twitter Bootstrapの人気のため、Twitter BootstrapのコミュニティサポートはFoundationよりも優れています。
初心者がプリプロセッサのサポートを学習して活用するには、時間がかかる場合があります。
問題を修正するためのQAサイトやフォーラムのような幅広いサポートの欠如。
財団のテーマは他のものに比べて少なくなっています。

基礎-インストール

この章では、WebサイトにFoundationをインストールして使用する方法について説明します。

財団をダウンロードする

あなたがリンクhttps://foundation.zurb.com [foundation.zurb.com]を開くと、以下に示すような画面が表示されます-

Foundation Installation

*Download Foundation 6* ボタンをクリックすると、別のページにリダイレクトされます。

ここでは、4つのボタンを見ることができます-

Foundation Installation

すべてをダウンロード-フレームワークにすべてのものを入れたい場合は、このバージョンのFoundationをダウンロードできます。バニラCSSとJS。
要点のダウンロード-グリッド、ボタン、タイポグラフィなどを含む簡単なバージョンをダウンロードします。
カスタムダウンロード-Foundationのカスタムライブラリをダウンロードします。これには要素が含まれ、列のサイズ、フォントサイズ、色などを定義します。
* SCSS経由でインストール*-これにより、ドキュメントページにリダイレクトされ、サイトのFoundationがインストールされます。

すべてをダウンロード*ボタンをクリックして、フレームワーク内のすべてを取得できます。 CSSとJS。ファイルはフレームワーク内のすべてのもので構成されているため、個々の機能ごとに個別のファイルを含める必要はありません。このチュートリアルを書いている時点で、最新バージョン（Foundation 6）がダウンロードされました。

ファイル構造

Foundationがダウンロードされたら、ZIPファイルを解凍すると、次のファイル/ディレクトリ構造が表示されます-

Foundation Installation

ご覧のとおり、コンパイル済みの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 doctype

Foundationは、HTML5 Doctypeの使用を必要とする特定のHTML要素とCSSプロパティで構成されています。したがって、Foundationを使用するすべてのプロジェクトの最初に、HTML5 doctypeの次のコードを含める必要があります。

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

モバイルファースト

モバイルデバイスに応答するのに役立ちます。モバイルデバイスで適切なレンダリングとタッチズームを保証するには、<head>要素に* viewportメタタグ*を含める必要があります。

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

_width_プロパティは、デバイスの幅を制御します。デバイス幅に設定すると、さまざまなデバイス（モバイル、デスクトップ、タブレットなど）で適切にレンダリングされるようになります。
_initial-scale = 1.0_を使用すると、ロード時にWebページが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コード firstexamplel ファイルを保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

財団-スタータープロジェクト

Yeti Launchまたは 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_フォルダー内のコンテンツをコピーできます。ここで、_assets_はプロジェクトフォルダーになります。ここで重要なことは、SASSファイル、JavaScriptファイル、および画像は、コンテンツをコピーする独自のプロセスを持つため、このアセットのコピープロセスには含まれないことです。

ページ編集

src/_ディレクトリ内にある_pages _、 layouts_および_partials_という3つのフォルダの下にHTMLページを作成できます。テンプレート、ページ、HTMLパーシャルを使用してページのレイアウトを作成するhttps://foundation.zurb.com/sites/docs/paninil[Panini]フラットファイルコンパイラを使用できます。このプロセスは、http：//handlebarsjs.com/[Handlebars]テンプレート言語を使用して実行できます。

SASSコンパイル

Libsassを使用してSASSをCSSにコンパイルできます。メインのSASSファイルは_src/assets/scss/app.scss_の下に保存され、新しく作成されたSASSパーシャルも下に保存されますこのフォルダ自体。 CSSの出力は、ネストされたスタイルの通常のCSSのようになります。 clean-cssを使用してCSSを圧縮し、https://github.com/giakki/uncss [UnCSS]を使用してスタイルシートから未使用のCSSを削除できます。

JavaScriptのコンパイル

JavaScriptファイルはFoundationとともに_src/assets/js_フォルダーに保存され、すべての依存関係は_app.js_ファイルにまとめられます。ファイルは、以下の順序で指定されるように一緒に結び付けられます-

財団の依存関係。
ファイルは_src/assets/js_フォルダーに保存されます。
ファイルは、_app.js_という1つのファイルにバンドルされています。

画像圧縮

デフォルトでは、すべての画像は_dist_フォルダーの下の_assets/img_フォルダーの下に保存されます。 JPEG、PNG、SVG、およびGIFファイルをサポートする_gulp-imagemin_を使用して、実動用にビルド中に画像を圧縮できます。

BrowserSync

BrowserSyncサーバーを作成できます。このサーバーは、 http：//localhost：8000 で利用可能な同期ブラウザーテストであり、このURLを使用してコンパイル済みテンプレートを表示できます。サーバーの実行中、ファイルを保存するとページが自動的に更新され、作業中にリアルタイムでページに加えられた変更を確認できます。

基礎-キッチンシンク

説明

Webアプリケーションとスムーズに連携するためのFoundation要素が含まれています。次の表は、Foundationのコンポーネントの一部を示しています-

Sr.No.	Component & Description
1	Accordion アコーディオンには、大量のデータを展開および縮小するためにWebサイトで使用される垂直タブが含まれています。
2	Accordion Menu アコーディオン効果のある折りたたみ可能なメニューが表示されます。
3	Badge バッジはラベルに似ており、重要なメモやメッセージなどの情報を強調するために使用されます。
4	Breadcrumbs ナビゲーション階層内のサイトの現在の場所を指定します。
5	Buttons Foundationは、さまざまなスタイルの標準ボタンをサポートしています。
6	Callout コールアウトは、コンテンツを内部に配置するために使用できる要素です。
7	Close Button 警告ボックスを閉じるために使用されます。
8	Drilldown Menu ドリルダウンメニューは、ネストされたリストを垂直ドリルダウンメニューに変更します。
9	Dropdown Menu ドロップダウンメニューは、リスト形式でリンクを表示するために使用されます。
10	Dropdown Pane ボタンをクリックすると、ドロップダウンペインにコンテンツが表示されます。
11	Flex Video Webページでビデオオブジェクトを作成するために使用されます。
12	Float Classes ユーティリティクラスをHTML要素に追加するために使用されます。
13	Forms ユーザー入力を収集するフォームレイアウトを作成するために使用されます。
14	Label ラベルはインラインスタイルで、入力要素のラベルを定義します。
15	Media Object 画像、ビデオ、ブログのコメントなどのメディアオブジェクトを追加するために使用されます。コンテンツブロックの左または右に配置できます。
16	Menu Webサイトのさまざまなモードへのアクセスを提供します。
17	Pagination これは、コンテンツを一連の関連ページに分割するナビゲーションの一種です。
18	Slider ハンドルをドラッグして値の範囲を指定します。
19	Switch オンとオフの状態を切り替えるために使用されます。
20	Table 行と列の形式でデータを表します。
21	Tabs これは、ページを離れることなくコンテンツをさまざまなペインに表示するナビゲーションベースのタブです。
22	Thumbnail サムネイルの形で画像のスタイルを設定します。
23	Title Bar ユーザーが使用する現在の画面を他のメニュー項目とともに表示するために使用されます。
24	Tooltip リンクの上にマウスを置いたときに情報を説明する小さなポップアップボックスです。
25	Top Bar Webサイトでナビゲーションヘッダーを作成するために使用されます。
26	Orbit _orbit_クラスを使用して要素をスワイプする簡単で強力なスライダーです。

財団-グローバルスタイル

この章では、_グローバルスタイル_について学習します。 FoundationフレームワークのグローバルCSSには、ブラウザー間でスタイリングの一貫性を保証する便利なリセットが含まれています。

フォントサイズ

ブラウザのスタイルシートのフォントサイズは、デフォルトで100％に設定されています。デフォルトのフォントサイズは16ピクセルに設定されています。フォントサイズに応じて、グリッドサイズが計算されます。明確な基本フォントサイズと影響を受けないグリッドブレークポイントを設定するには、_ $ rem-base_を_ $ global-font-size_値に設定します。これはピクセル単位である必要があります。

色

links_や_buttons_などのインタラクティブな要素は、SASS変数 $ primary-color_からのデフォルトの青の影を使用します。コンポーネントには、_secondary、alert、success、warning_などの色を付けることもできます。詳細については、リンクを確認してください：/foundation/global_styles_color [こちら]。

SASSリファレンス

変数

次の表に、プロジェクトの__settings.scss_のコンポーネントのデフォルトスタイルをカスタマイズするために使用されるSASS変数を示します。

Sr.No.	Name & Description	Type	Default Value
1	$global-width サイトのグローバル幅を表します。グリッドの行幅を決定するために使用されます。	Number	rem-calc(1200)
2	$global-font-size _ <html> および <body> _に適用されるフォントサイズを表します。デフォルトでは100％に設定されており、ユーザーのブラウザー設定値が継承されます。	Number	100%
3	$global-lineheight すべてのタイプのデフォルトの行の高さを表します。 _ $ global-lineheight_は24pxで、_ $ global-font-size_は16pxに設定されています。	Number	1.5
4	$primary-color リンクやボタンなどのインタラクティブなコンポーネントに色を付けます。	Color	#2199e8
5	$secondary-color _.secondary_クラスをサポートするコンポーネントで使用されます。	Color	#777
6	$success-color _.success_クラスとともに使用した場合の肯定的なステータスまたはアクションを表します。	Color	#3adb76
7	$warning-color _.warning_クラスとともに使用した場合の注意ステータスまたはアクションを表します。	Color	#ffae00
8	$alert-color _.alert_クラスとともに使用すると、ネガティブなステータスまたはアクションを表します。	Color	#ec5840
9	$light-gray ライトグレーのUIアイテムに使用されます。	Color	#e6e6e6
10	$medium-gray 中程度のグレーのUIアイテムに使用されます。	Color	#cacaca
11	$dark-gray 濃い灰色のUIアイテムに使用されます。	Color	#8a8a8a
12	$black 黒のUIアイテムに使用されます。	Color	#0a0a0a
13	$white 白いUIアイテムに使用されます。	Color	#fefefe
14	$body-background ボディの背景色を表します。	Color	$white
15	$body-font-color ボディのテキストの色を表します。	Color	$black
16	$body-font-family 本文のフォントのリストを表します。	List	'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17	$body-antialiased アンチエイリアスタイプは、CSSプロパティ_-webkit-font-smoothing_および_-moz-osx-font-smoothing_を使用してこの属性を_true_に設定することにより有効になります。	Boolean	true
18	$global-margin コンポーネントのグローバルマージン値を表します。	Number	1rem
19	$global-padding コンポーネントのグローバルパディング値を表します。	Number	1rem
20	$global-margin コンポーネント間で使用されるグローバルマージン値を表します。	Number	1rem
21	$global-weight-normal 通常のタイプのグローバルフォントウェイトを表します。	Keyword or Number	normal
22	$global-weight-bold ボールド体のグローバルフォントの太さを表します。	Keyword or Number	bold
23	$global-radius 境界半径を持つすべての要素のグローバル値を表します。	Number	0
24	$global-text-direction CSSのテキストの方向を_ltr_または_rtl_に設定します		ltr

財団-サス

SASSは、Foundationでコードをより柔軟でカスタマイズ可能にするのに役立ちます。

互換性

Foundation用のSASSベースのバージョンをインストールするには、WindowsにRubyをインストールする必要があります。 Foundationは、Ruby SASSとlibsassでコンパイルできます。 SASSをコンパイルするには、 node-sass 3.4.2 + バージョンをお勧めします。

オートプレフィックスが必要

AutoprefixerはSASSファイルを処理します。 _gulp-autoprefixer_はプロセスをビルドするために使用されます。次のautoprefixer設定は、適切なブラウザーサポートを取得するために使用されます。

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

フレームワークをロードする

NPMを使用してフレームワークファイルをインストールできます。コマンドラインインターフェイス（CLI）を使用して、Sassファイルをコンパイルできます。以下は、フレームワークをロードするコマンドです-

npm install foundation-sites --save

上記のコマンドラインコードを実行した後、次の行を取得します-

Foundation sass

手動でコンパイルする

フレームワークファイルは、ビルドプロセスに応じてインポートパスとして追加できますが、パスは同じ_packages_folder/foundation-sites/scss_になります。 _ @ import_ステートメントは、_foundation-sites.scss_ファイルの上部に含まれています。指定されたコードの次の行は、* CSS出力の調整*セクションで説明されています。

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

コンパイル済みCSSの使用

事前にコンパイルされたCSSファイルを含めることができます。 CSSファイルには2種類あります。縮小および非縮小。縮小版は実稼働に使用され、縮小版はフレームワーク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

この章では、_JavaScript_について学習します。 FoundationでJavaScriptをセットアップするのは簡単です。必要なのはjQueryだけです。

JavaScriptインストール

Foundation JavaScriptファイルを取得するには、ZIPダウンロード、パッケージマネージャー、またはCDNを使用できます。コードでは、jQueryとFoundationへのリンクを<script>タグとして提供し、閉じる<body>の前に配置し、jQueryの後にFoundationがロードされることを確認できます。詳細については、リンク：/foundation/foundation_javascript_installation [ここをクリック]をご覧ください。

ファイル構造

コマンドラインからFoundationをインストールすると、Foundationプラグインは_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のインストールに付属する特定のユーティリティライブラリが必要な場合があります。特定のプラグイン要件については、次の章のリンクで詳しく調べることができます：/foundation/foundation_javascript_utilities [JavaScriptユーティリティ]。

個々のファイルをロードすると、特にモバイルユーザーにネットワークオーバーヘッドが発生します。ページの読み込みを高速化するには、http：//gruntjs.com/[grunt]またはhttp://gulpjs.com/[gulp]の使用をお勧めします。

初期化中

_foundation（）_関数は、すべてのFoundationプラグインを一度に初期化するために使用されます。

例えば-

(document).foundation();

プラグインを使用する

データ属性を使用して、プラグインはプラグインの名前と一致するため、HTML要素に接続されます。プラグインの大部分は他のプラグイン内にネストできますが、単一のHTML要素には一度に1つのプラグインしか含めることができません。たとえば、_data-tooltip_を追加すると、ツールチップリンクが作成されます。詳細については、リンク：/foundation/javascript_using_plugins [ここをクリック]をご覧ください。

プラグインの構成

プラグインは、その構成設定を使用してカスタマイズできます。たとえば、_accordion_スライドの速度を上下に設定できます。プラグインの設定は、プラグインの DEFAULTS プロパティを使用してグローバルに変更できます。詳細については、/foundation/javascript_configuring_plugins [こちらをクリック]をご覧ください。

ページの読み込み後にプラグインを追加する

新しいHTMLがDOMに追加されると、それらの要素のプラグインはデフォルトで初期化されません。 _.foundation（）_関数を呼び出して、新しいプラグインを確認できます。

例えば-

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

プログラムによる使用

JavaScriptでは、プラグインはプログラムで作成でき、各プラグインはグローバルな_Foundation_オブジェクトのクラスであり、要素とオブジェクトなどの2つのパラメーターを取るコンストラクターを持ちます。

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

プラグインの大部分はパブリックAPIで提供されており、JavaScriptでプラグインを操作できます。プラグインのドキュメントを参照して、使用可能な関数を調べて、メソッドを簡単に呼び出すことができます。

例えば-

$('.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ユーティリティ

Foundationには、共通の機能を追加するために使用されるJavaScriptユーティリティが含まれています。とても便利で使いやすいです。このJavaScriptユーティリティライブラリは、_Your_folder_name/node_modules/foundation-sites/js_フォルダーにあります。

Box

_Foundation.Box_ライブラリは、いくつかのメソッドで構成されています。
js/foundation.util.box.js はスクリプトのファイル名であり、コードの作成中に含めることができます。
jQueryオブジェクトまたはプレーンなJavaScript要素のいずれかを両方のメソッドに渡すことができます。

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

返されるオブジェクトは、_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_が含まれています。
渡された要素に基づいて、ブール値が返されます。これは、ウィンドウの端またはオプション要素または親要素との競合です。
以下の行に指定されている2つのオプション、つまり leftAndRightOnly、topAndBottomOnlyは、1つの軸のみの衝突を識別するために使用されます。

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（ 'large'）_は、画面が少なくともブレークポイントと同じ幅かどうかを確認するために使用されます。
_Foundation.MediaQuery.get（ 'medium'）_は、ブレークポイントのメディアクエリを取得します。
_Foundation.MediaQuery.queries_はメディアクエリの配列であり、Foundationはブレークポイントに使用します。
_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_メソッドは、モバイルデバイス用のSliderプラグインの要素をタッチイベントにバインドするために使用されます。
_spotSwipe_メソッドは、モバイルデバイス用のOrbitプラグインの要素をスワイプイベントにバインドします。

$('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);

このライブラリでは、次の2つのメソッドが使用されます。サイズ変更とスクロール。

_resize（）_メソッドは、サイズ変更イベントが発生したときにサイズ変更イベントをトリガーします。
_scroll（）_メソッドは、スクロールイベントが発生したときにスクロールイベントをトリガーします。

$('#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モジュールであり、指定された画面解像度に従ってコンテンツを表示します。

Foundationは、以下のメディアクエリを使用して分類範囲を作成します-

Small -任意の画面に使用されます。
中-640ピクセル以上の画面に使用されます。
大-1024ピクセル以上の画面に使用されます。

breakpoint classes_を使用して、画面サイズを変更できます。たとえば、次のコードスニペットに示すように、小さなサイズの画面には.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を使用して、メディアクエリを記述できます。
_down_または_only_キーワードとブレークポイント値を使用して、次のコード形式に示すようにメディアクエリの動作を変更します-

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

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

デバイスの向きまたはピクセル密度に3つのメディアクエリ_portrait 、 landscape_および_retina_を使用できます。これらは幅ベースのメディアクエリではありません。

ブレークポイント関数

内部関数を使用して、breakpoint（） mixinの機能を使用できます。
_breakpoint（）_機能は、独自のメディアクエリを書くために直接使用することができます-

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

JavaScript

メディアクエリの操作

Foundation JavaScriptは、以下に指定されている_Foundation.MediaQuery_オブジェクトの現在のブレークポイント名にアクセスする_MediaQuery.current_関数を提供します-

Foundation.MediaQuery.current

MediaQuery.current_関数は、現在のブレークポイント名として_small _、 medium 、 large_を表示します。 *以下に示すように_MediaQuery.get_関数を使用してブレークポイントのメディアクエリを取得できます-

Foundation.MediaQuery.get('small')

Sassリファレンス

変数

次の表は、コンポーネントのデフォルトのスタイルをカスタマイズするために使用できるSASS変数を示しています-

Sr.No.

Name & Description

Type

Default Value

1

$breakpoints*

breakpoint（） mixinを使用してメディアクエリを書き込むために使用できるブレークポイント名です。

Map

small: 0px

中：640px

大：1024px

xlarge：1200px

xxlarge：1440px

2

$breakpoint-classes

_ $ breakpoint-classes_変数を変更することにより、CSSクラスの出力を変更できます。

List

small medium large

ミックスイン

Mixinsは、FoundationコンポーネントのCSSクラス構造を構築するためのスタイルのグループを作成します。

ブレークポイント

breakpoint（） mixinを使用してメディアクエリを作成し、次のアクティビティを含めます-

文字列が渡された場合、mixinは_ $ breakpoints_マップ内の文字列を検索し、メディアクエリを作成します。
ピクセル値を使用している場合は、_ $ rem-base_を使用してem値に変換します。
rem値が渡されると、単位がemに変更されます。 *em値を使用している場合は、そのまま使用できます。

次の表は、ブレークポイントで使用されるパラメータを指定します-

Sr.No.

Name & Description

Type

Default Value

1

$value*

ブレークポイント名、px、rem、またはem値を使用して値を処理します。

keyword or number

None

関数

ブレークポイント *

breakpoint（） mixinを使用して、一致する入力値を持つメディアクエリを作成します。

次の表は、ブレークポイントで使用される可能な入力値を指定します-

Sr.No.

Name & Description

Type

Default Value

1

$val*

ブレークポイント名、px、rem、またはem値を使用して値を処理します。

keyword or number

small

JavaScriptリファレンス

関数

機能には2種類あります-

.atLeast -画面を確認します。少なくともブレークポイントとしては幅が広い必要があります。
.get -ブレークポイントのメディアクエリを取得するために使用されます。

次の表は、上記の機能で使用されるパラメータを指定します-

Sr.No.

Name & Description

Type

1

size

指定された関数のブレークポイントの名前をそれぞれ確認および取得します。

String

基礎-グリッド

説明

Foundationグリッドシステムは、ページ全体で最大12列まで拡大します。グリッドシステムは、コンテンツを収容する一連の行と列を介してページレイアウトを作成するために使用されます。

グリッドオプション

次の表は、複数のデバイスでFoundationグリッドシステムがどのように機能するかについて簡単に説明しています。

	Small devices Phones(<640px)	Medium devices Tablets(>=640px)	Large devices Laptops & Desktops(>=1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Class prefix	.small-*	.medium-*	.large-*
Number of columns	12	12	12
Nestable	Yes	Yes	Yes
Offsets	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes

基盤グリッドの基本構造

以下は、財団グリッドの基本構造です-

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

<div class = "row">
   ...
</div>

まず、_row_クラスを作成して、列の水平グループを作成します。
コンテンツは列内に配置する必要があり、列のみが行の直接の子になります。
グリッド列は、スパンする12の使用可能な列の数を指定することにより作成されます。たとえば、4つの等しい列の場合、_。large-3_を使用します

以下は、財団グリッドシステムで使用される3つのクラスです-

Sr.No.

Basic Grid classes & Description

1

Large

_large-* _クラスは、大型デバイスに使用されます。

2

Medium

_medium-* _クラスは、メディアデバイスに使用されます。

3

Small

_small-* _クラスは、小型デバイスに使用されます。

高度なグリッド

Foundationで使用される高度なグリッド形式は次のとおりです。

Sr.No.	Advanced Grids & Description
1	Combined Column/Row _column_クラスと_row_クラスは、コンテナとして使用するために全幅の列を取得するために同じ要素で使用されます。
2	Nesting グリッド列を別の列内にネストできます。
3	Offsets _large-offset-* _または_small-offset-* _クラスを使用すると、列を右に移動できます。
4	Incomplete Rows 行に最大12の列が含まれない場合、Foundationは最後の要素を自動的に右にフロートします。
5	Collapse/Uncollapse Rows メディアクエリサイズを使用して、パディングを表示するために、collapseクラスとuncollapseクラスが行要素に含まれます。
6	Centered Columns 列に_small-centered_クラスを含めることにより、列を中央に作成できます。
7	Source Ordering ソース順序付けクラスは、ブレークポイント間で列をシフトするために使用されます。
8	Block Grids ブロックグリッドは、コンテンツを分割するために使用されます。

意味的に構築する

SASSミックスインのセットを使用して、独自のセマンティックグリッドを構築するために使用されるグリッドCSSが生成されます。詳細については、リンク：/foundation/building_semantically [ここをクリック]

SASSリファレンス

以下は、Foundationで使用されるグリッドのSASSリファレンスです。

Sr.No.

Basic Grids & Description

1

Variables

sass変数を使用して、このコンポーネントのデフォルトのスタイルを変更できます。

2

Mixins

最終的なCSS出力は、mixinを使用して構築されます。

基盤-フレックスグリッド

グリッドは、flex displayプロパティに依存します。自動スタッキング、ソースの順序付け、垂直方向の整列、水平方向の整列など、flexboxで利用できる多くの機能で構成されています。

ブラウザのサポート

フレックスグリッドは、Chrome、Firefox、Internet Explorer 10以上、Safari 6以上、Android 4以上、iOS 7以上でサポートされています。

次の表に、Flexグリッドの機能とその説明を示します。

Sr.No.	Features & Description
1	Importing デフォルトのCSSを使用するためのflexグリッドのエクスポートミックスインが含まれています。
2	Basics Flexグリッドの構造は、フロートグリッドの構造に似ています。
3	Advanced Sizing サイズ変更クラスが列に含まれていない場合、それはそれ自体を拡張し、列の残りのスペースを埋めます。
4	Responsive Adjustments フレックスグリッドの列の明示的なサイズが指定されていない場合、列のサイズが自動調整されます
5	Column Alignment フレックスグリッド列は、親行の水平軸または垂直軸に整列できます。
6	Source Ordering ソースの順序付けは、異なるサイズの画面で列を再配置するのに役立ちます。
7	Sass Reference SASS（Syntactically Awesome Stylesheet）は、CSSの繰り返しを減らし、時間を節約するのに役立つCSSプリプロセッサです。

財団-フォーム

説明

フォームは、ユーザー入力を収集するフォームレイアウトを作成するために使用されます。

例

次の例は、Foundationでの_forms_の使用を示しています-

<!doctype html>
   <head>
      <meta charset = "utf-8"/>
      <meta http-equiv = "x-ua-compatible" content = "ie = edge"/>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>

      <title>Forms</title>

      <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>
      <h2>Forms Example</h2>

      <form>
         <label>Input Label
            <input type = "text" placeholder = "enter your text">
         </label>
         <p class = "help-text">This is help text..</p>
         <label>
            <textarea placeholder = "This is text area"></textarea>
         </label>

         <label>Select Menu
            <select>
               <option value = "india">India</option>
               <option value = "newzealand">New Zealand</option>
               <option value = "china">China</option>
               <option value = "japan">Japan</option>
            </select>
         </label>

         <div class = "row">
            <fieldset class = "small-6 columns">
               <legend>Your Favorite Fruit?</legend>

               <input type = "radio" name = "fruit" value = "Apple">
               <label for = "fruitApp">Apple</label>

               <input type = "radio" name = "fruit" value = "Grapes">
               <label for = "fruitGrp">Grapes</label>
            </fieldset>

            <fieldset class = "small-6 columns">
               <legend>Choose your car?</legend>
               <input id = "checkbox1" type = "checkbox">
               <label for = "checkbox1">Scorpio</label>

               <input id = "checkbox2" type = "checkbox">
               <label for = "checkbox2">XUV</label>

               <input id = "checkbox3" type = "checkbox">
               <label for = "checkbox3">Xylo</label>
            </fieldset>
         </div>

         <div class = "input-group">
            <span class = "input-group-label">Amnt</span>
            <input class = "input-group-field" type = "url">
            <a class = "input-group-button button">Submit</a>
         </div>
      </form>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコード formsl ファイルを保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

基礎-可視性クラス

説明

Foundationは、可視性クラスを使用して、デバイスの向き（縦と横）または画面サイズ（小、中、大、または大画面）に基づいて要素を表示または非表示にします。 *ユーザーは、ブラウジング環境に基づいて要素を使用できます。

次の表は、その閲覧環境に基づいて要素を制御するFoundationの可視性クラスを示しています-

Sr.No.

Visibility Class & Description

1

Show by Screen Size

_.show_クラスを使用して、デバイスに基づいた要素を表示します。

2

Hide by Screen Size

_.hide_クラスを使用して、デバイスに基づいて要素を非表示にします。

Foundationは、。hide_クラスと.invisible_クラスを使用してコンテンツを非表示にできるいくつかのクラスをサポートし、ページには何も表示しません。

方向検出

デバイスは、_landscape_および_portrait_機能を使用して、異なる方向を決定できます。携帯電話などのハンドヘルドデバイスは、回転するときにさまざまな方向を指定します。デスクトップの場合、向きは常に横向きになります。

アクセシビリティ

次の表は、スクリーンリーダーでコンテンツを非表示にし、スクリーンリーダーで読みやすくするためのスクリーンリーダーのアクセシビリティ技術を示しています-

Sr.No.

Accessibility Class & Description

1

Show for Screen Readers

_show-for-sr_クラスを使用してコンテンツを非表示にし、スクリーンリーダーが読み取れないようにします。

2

Hide for Screen Readers

aria-hidden属性を使用して、テキストを表示しますが、スクリーンリーダーでは読み取れません。

3

Creating Skip Links

スクリーンリーダーは、サイトのコンテンツへのナビゲーションを取得するためのスキップリンクを作成します。

Sassリファレンス

Foundationは、次のミックスインを使用してCSS出力を表示します。これにより、コンポーネントの独自のクラス構造を構築できます-

Sr.No.	Mixin & Description	Parameter	Type
1	show-for* デフォルトでは、要素を非表示にし、特定の画面サイズの上に表示します。	$size	Keyword
2	show-for-only デフォルトでは、要素を非表示にし、ブレークポイント内に表示します。	$size	Keyword
3	hide-for デフォルトでは、要素を表示し、特定の画面サイズを超えて非表示にします。	$size	Keyword
4	hide-for-only デフォルトでは、要素を表示し、特定の画面サイズを超えて非表示にします。	$size	Keyword

これらすべてのミックスインのデフォルト値は_none_に設定されます。

Foundation-Base Typography

説明

Foundationのタイポグラフィは、見出し、段落、リスト、および要素の魅力的でシンプルなデフォルトスタイルを作成するその他のインライン要素を定義します。

次の表は、Foundationで使用されるタイポグラフィのさまざまなタイプを示しています-

Sr.No.	Typography & Description
1	Paragraphs 段落は、異なるフォントサイズ、強調表示された単語、行の高さなどで定義された文のグループです。
2	Header h1からh6までのHTML見出しを定義します。
3	Links テキストまたは画像をクリックすると別のドキュメントを開くハイパーリンクを作成します。
4	Dividers <hr>タグを使用して、セクション間に区切りを付けるために使用されます。
5	Ordered and Unordered Lists Foundationは、物事をリストするための順序付きリスト、順序なしリストをサポートしています。
6	Definition Lists 定義リストは、名前と値のペアを表示するために使用されます。
7	Blockquotes これは、通常よりもはるかに大きいテキストブロックを表します。
8	Abbreviations and Code 略語は単語またはフレーズの短縮された用語を定義し、コードはコードの一部を表します。
9	Keystrokes 特定の機能を実行するために使用されます。
10	Accessibility Foundationは、ページのコンテンツにアクセスするためのガイドラインを提供しています。

Sassリファレンス

表にリストされている次のSASS変数を使用して、コンポーネントのスタイルを変更できます。

以下は、次のSASS変数を使用したコンポーネントのスタイルです。

Sr.No.	Name & Description	Type	Default Value
1	$header-font-family ヘッダー要素のフォントファミリを指定します。	String or List	$body-font-family
2	$header-font-weight ヘッダーのフォントの太さを指定します。	String	$global-weight-normal
3	$header-font-style ヘッダーのフォントスタイルを提供します。	String	normal
4	$font-family-monospace コードサンプルなど、等幅タイプを使用する要素に使用されるフォントスタック。	String or List	Consolas, 'Liberation Mono', Courier, monospace
5	$header-sizes 見出しの画面サイズを定義します。各キーはブレークポイントであり、各値は見出しサイズのマップです。	Map	`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 ヘッダーの色を提供します。	Color	inherit
7	$header-lineheight ヘッダーの行の高さを定義します。	Number	1.4
8	$header-margin-bottom ヘッダーの下マージンを提供します。	Number	0.5rem
9	$header-text-rendering テキストレンダリングのメソッドを定義します。	String	optimizeLegibility
10	$small-font-size <small>要素のフォントサイズを指定します。	Number	80%
11	$paragraph-margin-bottom 段落の下マージンを指定します。	Number	1rem
12	$paragraph-text-rendering 段落をテキスト表示するためのメソッド。	String	optimizeLegibility
13	$code-color コードサンプルにテキストの色を提供します。	Color	$black
14	$code-font-family コードファミリにフォントファミリを提供します。	String or List	$font-family-monospace
15	$code-border コードの周囲の境界線を指定します。	List	1px solid $medium-gray
16	$code-padding テキストの周囲のパディングを指定します。	Number or List	rem-calc(2 5 1)
17	$anchor-color リンクのデフォルトの色。	Color	$primary-color
18	$anchor-color-hover ホバー時のリンクのデフォルトの色を指定します。	Color	scale-color($anchor-color, $lightness: -14%)
19	$anchor-text-decoration リンクのデフォルトのテキスト装飾。	String	none
20	$anchor-text-decoration-hover ホバー時のリンクのデフォルトのテキスト装飾。	String	none
21	$hr-width 仕切りの最大幅を定義します。	Number	$global-width
22	$hr-border 仕切りのデフォルトの境界線を指定します。	List	1px solid $medium-gray
23	$hr-margin 仕切りのデフォルトのマージン。	Number or List	rem-calc(20) auto
24	$list-lineheight リスト内のアイテムの行の高さを定義します。	Number	$paragraph-lineheight
25	$list-style-type 順不同リストの箇条書きタイプを提供します。	String	disc
26	$list-style-position 順不同リストの箇条書きの位置を定義します。	String	outside
27	$list-side-margin 左側（または右側）のマージンを定義します。	Number	1.25rem
28	$defnlist-term-weight <dt>要素のフォントの太さを提供します。	String	$global-weight-bold
29	$defnlist-term-margin-bottom <dt>要素と<dd>要素の間に間隔を空けます。	Number	0.3rem
30	$blockquote-color <blockquote>要素のテキスト色を適用します。	Color	$dark-gray
31	$blockquote-padding <blockquote>要素内にパディングを提供します。	Number or List	rem-calc(9 20 0 19)
32	$blockquote-border <blockquote>要素の横の境界線を提供します。	List	1px solid $medium-gray
33	$cite-font-size <cite>要素のフォントサイズを定義します。	Number	rem-calc(13)
34	$cite-color `+ <cite> +`要素のテキストの色を提供します。	Color	$dark-gray
35	$keystroke-font <kbd>要素のフォントファミリを定義します。	String or List	$font-family-monospace
36	$keystroke-color <kbd>要素のテキストの色を定義します。	Color	$black
37	$keystroke-background <kbd>要素の背景色を提供します。	Color	$light-gray
38	$keystroke-padding <kbd>要素のパディングを指定します。	Number or List	rem-calc(2 4 0)
39	$keystroke-radius <kbd>要素の境界半径を表示します。	Number or List	$global-radius
40	$abbr-underline <abbr>要素に下罫線スタイルを提供します。	List	1px dotted $black

財団-タイポグラフィヘルパー

この章では、 Typography Helpers について学習します。タイポグラフィヘルパーは、意味的に関連する方法でテキストをフォーマットするために使用されます。 Foundationのヘルパークラスを使用すると、いくつかの活版印刷スタイルをすばやく構築できます。

次の表に、Foundationで使用される_Typography Helpers_を示します。

Sr.No.	Typography helper & Description
1	Text Alignment left _、 right 、 center 、 justify_などの要素のテキストの配置を変更するのに役立ちます。
2	Subheader _.subheader_クラスを使用して、任意のヘッダー要素にサブヘッダーを追加できます。
3	Lead Paragraph 広告やその他の説明テキストに使用できる通常のテキストと比較して、かなり大きなテキストブロックです。
4	Un-bulleted List デフォルトでは、_ <ul> はFoundationの箇条書きリストです。箇条書きを削除するには、。no-bullet_クラスを使用できます。
5	Statistics ダッシュボードを扱うときはいつでも、いくつかの重要な数字を強調する必要があります。 _.stat_クラスを使用してこれを実現できます。

Sassリファレンス

変数

次の表は、コンポーネントのデフォルトスタイルをカスタマイズできるようにするプロジェクトの設定ファイル内のSASS変数を示しています。

Sr.No.	Name & Description	Type	Default Value
1	$lead-font-size デフォルトでリード段落のフォントサイズ。	Number	$global-font-size *1.25
2	$lead-lineheight* デフォルトでリード段落の行の高さ。	String	1.6
3	$subheader-lineheight サブヘッダーのデフォルトの行の高さ。	Number	1.4
4	$subheader-color サブヘッダーのデフォルトのフォント色。	Color	$dark-gray
5	$subheader-font-weight サブヘッダーのデフォルトのフォントの太さ。	String	$global-weight-normal
6	$subheader-margin-top サブヘッダーのデフォルトの上余白。	Number	0.2rem
7	$subheader-margin-bottom サブヘッダーのデフォルトの下マージン。	Number	0.5rem
8	$stat-font-size 静的な番号のデフォルトのフォントサイズ	Number	2.5rem

基礎-基本コントロール

この章では、*基本的なコントロール*について学習します。 Foundationは、buttons _、 sliders 、 switches_などの基本的なコントロールを提供します。

次の表に、Foundationで使用される基本的なコントロールを示します。

Sr.No.	Basic control & Description
1	Button Foundationは、ニーズに応じてカスタマイズできる多くのボタンスタイルをサポートしています。
2	Button Group これらは、対応するアクション要素のコンテナです。アクションのグループがバーに表示されている場合は正常に機能します。
3	Close Button 閉じるボタンは、クリックして何かを消したいときに使用します。
4	Slider スライダーは、範囲内の特定の値を設定するのに非常に便利です。
5	Switch スイッチをクリックすることで、スイッチをオフまたはオンにすることができます。

基礎-ナビゲーション

説明

Foundationは、ナビゲーション要素をスタイル設定するためのいくつかの異なるオプションを提供します。多くの単純なナビゲーションパターンがバンドルされています。堅牢なレスポンシブナビゲーションソリューションのフォームに統合できます。

次の表に、さまざまな種類のナビゲーションと説明を示します。

Sr.No.	Type & Description
1	Navigation Overview ナビゲーションには他のセクションへのリンクが含まれ、多くのナビゲーションパターンで構成されています。
2	Menu メニューは、多くのナビゲーションコンポーネントを構築するために使用されます。
3	Dropdown Menu ドロップダウンメニュープラグインは、メインメニューの下にサブメニューを作成するために使用されます。
4	Drilldown Menu ドリルダウンメニュープラグインは、スライダー形式でメインメニューにサブメニューを作成するために使用されます。
5	Accordion Menu アコーディオン効果のある折りたたみ可能なメニューを表示し、アコーディオンメニュープラグインを使用して自動折りたたみをサポートします。
6	Top Bar トップバーを使用すると、複雑なナビゲーションバーをさまざまなサイズの画面に簡単に表示できます。
7	Responsive Navigation レスポンシブメニュープラグインは、画面のさまざまなサイズでメニューを割り当てます。
8	Magellan マゼランは、固定位置にあるナビゲーションを作成します。スクロール位置に基づいて、ページ上のナビゲーションリストを自動的に追跡します。
9	Pagination ページ区切り、順序付けられていないリストは、他の多くのインターフェイス要素と同様にBootstrapによって処理されます。
10	Breadcrumbs ブレッドクラムは、ナビゲーション階層内のサイトの現在の場所を指定します。

基礎-コンテナ

Foundationコンテナは、サイトのブラウザを常に全幅にし、サイトのコンテンツをラップするために使用されます。

次の表は、Foundationで使用されるコンテナの一部を示しています-

Sr.No.	Container & Description
1	Accordion アコーディオンには、大量のデータを展開および縮小するためにWebサイトで使用される垂直タブが含まれています。
2	Callout コンテンツをコンポーネント内に配置します。
3	Dropdown-panes ボタンをクリックするとコンテンツが表示されます。
4	Media Object 画像、動画、ブログのコメントなどのメディアオブジェクトを追加します。いくつかのコンテンツとともに。
5	Off-canvas 表示領域からナビゲーションメニューを開始し、メインコンテンツを表示します。
6	Reveal-Modal Foundationでは、_reveal_クラスを使用して、モーダルダイアログまたはポップアップウィンドウを作成できます。
7	Tables Foundationは、データを表形式で表示するためのレイアウトを提供します。
8	Tabs これは、ページを離れることなくコンテンツをさまざまなペインに表示するナビゲーションベースのタブです。

財団-メディア

この章では、Foundationの_media_について学習します。 Foundationは、Flex Video _、 Label 、 orbit 、 progress bar 、 tooltip_などの複数のメディアタイプで構成されています。次の表に、すべてのメディアタイプを示します。

Sr.No.	Media Type & Description
1	Flex Video フレックスビデオコンテナにビデオを埋め込み、画面サイズに関係なく正しいアスペクト比を維持するために使用されます。
2	Label 特定のセクションを呼び出したりメタデータを添付したりするためにボディに配置できるインラインスタイリングに使用できます。
3	Orbit これは強力で応答性の高いスライダーであり、ユーザーはタッチスクリーンデバイスをスワイプできます。
4	Progress Bar 進行状況を表示するために使用され、レイアウトに追加できます。
5	Tooltips ページ上の用語またはアクションの追加情報を表示するために使用されます。

Foundation-プラグイン

説明

プラグインは、もともとFoundationのコア機能では完了しなかった追加機能を提供するソフトウェアです。 Foundationプラグインをアップロードして、サイトの機能を拡張できます。プラグインは、作業を簡単にするために使用されます。

次の表に、さまざまなタイプのプラグインとその説明を示します。

シニア

タイプと説明

1

リンク：/foundation/plugins_abide [Abide]

Abideは、必要な属性とパターンを使用するネイティブAPIとともにHTML5フォーム検証ライブラリで使用されます。

2

リンク：/foundation/plugin_equalizer [イコライザー]

イコライザーは、ページ上に同じ高さの複数のコンテンツを作成する方法です。

3

リンク：/foundation/plugin_interchange [交換]

ユーザーのデバイスに応じてレスポンシブコンテンツを読み込むために使用されます。

4

リンク：/foundation/plugin_toggler [トグル]

トグルは、ある設定から別の設定に切り替えるために使用されます。

5

リンク：/foundation/plugin_sticky [スティッキー]

スティッキープラグインは、Webサイトで一定のコンテンツまたは画像を作成するために使用されます。

基礎-Sass関数

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.No.	Parameter & Description	Type	Default Value
1	$color 色の明るさをチェックします。	Color	None
2	$yes 色が明るい場合、_ $ yes_色を返します。	Color	$black
3	$no 色が暗い場合、_ $ no_色を返します。	Color	$white
4	$threshold 明度のしきい値を表します。	Percentage	60%

スマートスケール

明度に応じて要素に適切な色を提供します。適切な色を指定するために次の形式を使用します-

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

上記のパラメータは、次の表で指定されています-

Sr.No.

Parameter & Description

Type

Default Value

1

$color

色のスケーリングに使用されます。

Color

None

2

$scale

拡大または縮小する割合を指定します。

Percentage

5%

3

$threshold

明度のしきい値を表します。

Percentage

40%

テキスト入力

テキスト入力タイプの使用中にセレクターを作成します。入力タイプを指定するために次の形式を使用します-

text-inputs($types)

次の表に指定されているパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$types

セレクターを生成するための多くのテキスト入力タイプを提供します。

Color

-

ストリップユニット

値から単位を削除し、数値のみを返します。値から単位を削除するために次の形式を使用します-

strip-unit($num)

次の表に指定されているパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$num

値から単位を削除するときに番号を指定します。

Color

None

レムカルク

rem値に一致するようにピクセル値を変更します。ピクセル値をrem値に変換するために次の形式を使用します-

rem-calc($values, $base)

表に指定されているように、次のパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$values

ピクセル値をrem値に変換し、スペースを使用して区切ります。コンマ区切りリストを変換する場合は、リストを括弧で囲みます。

Number or List

None

2

$base

ピクセルをrem値に変換するときにベース値を提供します。ベースにnull値がある場合、関数は_ $ base-font-size_変数をベースとして使用します。

Number

null

価値がある

falseでない場合、値を指定します。 false値には、null、none、0、または空のリストが含まれます。値を指定するために次の形式を使用します-

has-value($val)

次の表に指定されているパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$val

指定された値をチェックします。

Mixed

None

ゲットサイド

値のサイドを指定し、パディング、マージンなどの上/右/下/左の値を定義します。値の側を指定するために次の形式を使用します-

has-value($val)

表に指定されているように、次のパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$val

値の側を指定します。

List or Number

None

2

$side

（上/右/下/左）値がどちら側に戻るかを決定します。

Keyword

None

境界値を取得

要素の境界値を決定します。それは、境界値を指定するために次の形式を使用します-

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

表に指定されているように、次のパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$val

境界線の特定の値を見つけます。

List

None

2

$elem

境界コンポーネントを抽出するために使用されます。

Keyword

None

財団-Sass Mixins

インポート中

_scss/util/_mixins.scss_ファイルの下にあるSASSミックスインの内容をインポートします。次のコード行を使用して、SASSミックスインをインポートできます-

@import 'util/mixins';

Sassリファレンス

SASS関数を使用して、コンポーネントのスタイルを変更できます。

ミックスイン

次のミックスインを使用して、コンポーネントのCSSクラス構造を構築できます。

CSS-三角形 *
ドロップダウン矢印、ドロップダウンピップなどの作成に使用されます。 <i>＆

before </i>または<i>＆:: after </i>セレクターを使用して、既存の要素に三角形を添付します。それは次の形式を使用します-

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

表に指定されている次のパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$triangle-size*

三角形の幅を定義します。

Number

None

2

$triangle-color

三角形の色を定義します。

Color

None

3

$triangle-direction

上、右、下、左などの三角形の方向を定義します。

Keyword

None

ハンバーガー *

これは、幅、高さ、バーの数、色でメニューアイコンを作成するために使用されます。それは次の形式を使用します-

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

表に指定されている次のパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$color* アイコンの色を定義します。	Color	None
2	$color-hover アイコンにカーソルを合わせたときの色を定義します。	Color	None
3	$width アイコンの幅を定義します。	Number	None
4	$height アイコンの高さを定義します。	Number	None
5	$weight アイコンの個々のバーの重量を定義します。	Number	None
6	$bars アイコンのバーの数を定義します。	Number	None

背景三角形 *

背景画像を要素に指定するために使用されます。それは次の形式を使用します-

@include background-triangle($color);

表に指定されているパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$color*

三角形の色を定義します。

Color

$black

クリアフィックス

このミックスインは、子要素を自動的にクリアするため、追加のマークアップは不要です。それは次の形式を使用します-

@include clearfix;

自動幅 *

コンテナに存在する要素の数に基づいて、要素のサイズを自動的に調整します。それは次の形式を使用します-

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

表に指定されているように、次のパラメータを使用します-

Sr.No.

Parameter & Description

Type

Default Value

1

$max*

コンテナ内のアイテムの最大数を識別します。

Number

None

2

$elem

兄弟セレクターのタグを使用します。

Keyword

li

無効マウス概要

マウス入力アクションを識別するときに要素の周囲のアウトラインを無効にするために使用されます。それは次の形式を使用します-

@include disable-mouse-outline;

*ELEMENT-INVISIBLE*

要素を非表示にするために使用され、キーボードや他のデバイスで使用できます。それは次の形式を使用します-

@include element-invisible;

要素非表示オフ

非表示の要素を削除し、element-invisible（） mixinを使用してCSS出力を反転します。それは次の形式を使用します-

@include element-invisible-off;

垂直センター

次の形式を使用して、非静的な親要素内の要素を垂直方向の中央に配置するために使用されます-

@include vertical-center;

水平センター

次の形式を使用して、非静的な親要素内の要素を水平方向に中央に配置するために使用されます-

@include horizontal-center;

アブソリュートセンター

次の形式を使用して、非静的な親要素内の要素を絶対中心に配置するために使用されます-

@include absolute-center;

基礎-モーションUI

Foundationは、UIトランジションとアニメーションを作成するためのMotion 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ファイルにモーションUIライブラリをインポートします-

@import 'motion-ui'

組み込みのトランジション

Foundationは、Motion UIライブラリによって作成される遷移クラスを使用して、遷移効果を提供します。遷移効果を使用して、1つの単純なリンクを作成しましょう：/foundation/foundation_transitions [example]。

カスタムトランジション

Motion UIライブラリを使用して、カスタム遷移クラスを設定できます。例えば、我々は要素を回転させる_mui-hinge（）_遷移のカスタムクラスを設定します-

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

アニメーション

Motion UI遷移効果を使用して、CSSアニメーションを作成できます。このリンク：/foundation/reveal_animations [link]をクリックして、_data-animation_クラスを使用したモーダルでのアニメーションの動作を確認します。

Foundation-quick-guide

財団-概要

財団とは？

Foundationを使用する理由

特徴

利点

デメリット

基礎-インストール

財団をダウンロードする

ファイル構造

HTMLテンプレート

HTML5 doctype

モバイルファースト

コンポーネントの初期化

出力

財団-スタータープロジェクト

基本テンプレート

ZURBテンプレート

資産のコピー

ページ編集

SASSコンパイル

JavaScriptのコンパイル

画像圧縮

BrowserSync

基礎-キッチンシンク

説明

財団-グローバルスタイル

フォントサイズ

色

SASSリファレンス

変数

財団-サス

互換性

オートプレフィックスが必要

フレームワークをロードする

手動でコンパイルする

コンパイル済みCSSの使用

CSS出力の調整

設定ファイル

基礎-JavaScript

JavaScriptインストール

ファイル構造

初期化中

プラグインを使用する

プラグインの構成

ページの読み込み後にプラグインを追加する

プログラムによる使用

イベント

Foundation-JavaScriptユーティリティ

Box

キーボード

MediaQuery

モーション＆ムーブ

ロードされたタイマーと画像

タッチ

トリガー

その他

財団-メディアクエリ

ブレークポイントを変更する

SASS

ブレークポイントのミックスイン

ブレークポイント関数

JavaScript

メディアクエリの操作

Sassリファレンス

変数

ミックスイン

関数

JavaScriptリファレンス

関数

基礎-グリッド

説明

グリッドオプション

基盤グリッドの基本構造

高度なグリッド

意味的に構築する

SASSリファレンス

基盤-フレックスグリッド

ブラウザのサポート

財団-フォーム