財団-クイックガイド

Foundationとは何ですか？

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

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

Foundationを使用する理由

  • デフォルトのコンパイラよりもはるかに高速に動作するSassコンパイラを使用することで、開発を高速化します。

  • 価格表、スイッチ、ジョイライド、レンジスライダー、ライトボックスなどでWebサイトを充実させます。

  • コーディングと制御を高速化するために、GruntやLibsassなどの開発パッケージが付属しています。

  • Foundation for Sitesは、Webサイトをすばやく構築するためのHTML、CSS、およびJSを提供します。

  • 電子メールフレームワークは、どのデバイスでも読み取ることができるレスポンシブHTML電子メールを提供します。

  • Foundation for Appsを使用すると、完全にレスポンシブなWebアプリを構築できます。

特徴

  • 強力なグリッドシステムといくつかの便利なUIコンポーネントとクールなJavaScriptプラグインがあります。

  • レスポンシブデザインを提供し、あらゆるタイプのデバイスに対応します。

  • モバイルデバイス向けに最適化されており、モバイルファーストアプローチを真にサポートします。

  • カスタマイズ可能で拡張可能なHTMLテンプレートを提供します。

利点

  • HTMLとCSSの基本を理解すれば、簡単に学ぶことができます。

  • Foundationはオープンソースなので自由に利用できます。

  • それはあなたにたくさんのテンプレートを提供し、あなたがすぐにウェブサイトの開発を始めるのを助けます。

  • Foundationは、SASSやCompassなどのプリプロセッサをサポートしており、開発を高速化します。

短所

  • Twitter Bootstrapの人気のため、TwitterBootstrapのコミュニティサポートはFoundationよりも優れています。

  • 初心者がプリプロセッサのサポートを学び、活用するには時間がかかる場合があります。

  • 問題を修正するためのQAサイトやフォーラムなどの幅広いサポートの欠如。

  • 財団は他の人に比べてテーマが少ないです。

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

財団をダウンロードする

リンクfoundation.zurb.comを開くと、次のような画面が表示されます-

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

ここに4つのボタンがあります-

  • Download Everything −バニラCSSやJSなど、すべてをフレームワークに入れたい場合は、このバージョンのFoundationをダウンロードできます。

  • Download Essentials −グリッド、ボタン、タイポグラフィなどを含むシンプルなバージョンをダウンロードします。

  • Custom Download −これにより、Foundationのカスタムライブラリがダウンロードされます。これには要素が含まれ、列のサイズ、フォントサイズ、色などが定義されます。

  • Install via SCSS −これにより、Foundation forsitesをインストールするためのドキュメントページにリダイレクトされます。

あなたはクリックすることができます 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 doctype

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

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

モバイルファースト

モバイルデバイスに対応するのに役立ちます。あなたは含める必要がありますviewport meta tag <head>要素に追加して、モバイルデバイスで適切なレンダリングとタッチズームを確保します。

<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コードを保存します firstexample.html ファイル。

  • このHTMLファイルをブラウザで開くと、以下のような出力が表示されます。

イエティローンチまたはYetiLaunchからインストールできるいくつかの利用可能なテンプレートを使用してプロジェクト開発を開始できます。Foundation CLI。Sass、JavaScript、ファイルのコピーなどの処理にGulpビルドシステムを使用して、これらのテンプレートを使用することで、新しいプロジェクトを開始できます。

基本テンプレート

基本的なテンプレートはSASSテンプレートのようなもので、フラットなディレクトリ構造を含み、SASSファイルのみをコンパイルします。SASSのみを使用しながらこの単純なテンプレートを用意しておくとよいでしょう。基本テンプレートは、Yeti Launchを使用するか、次のコマンドを使用してFoundationCLIを使用して使用できます。

$ foundation new --framework sites --template basic

これを設定するには、最初にnpm install、bower installを実行し、npmstartコマンドを使用して実行します。Githubからテンプレートファイルをダウンロードすることもできます。

ZURBテンプレート

これは、CSS / SCSS、JavaScript、ハンドルバーテンプレート、マークアップ構造、画像圧縮の組み合わせであり、SASS処理を使用します。ZURBテンプレートを使用するには、Yeti Launchを使用するか、以下のコマンドを使用してFoundationCLIを使用します-

$ foundation new --framework sites --template zurb

このテンプレートを実行するには、基本テンプレートで指定されているのと同じ手順に従います。Githubからテンプレートファイルをダウンロードすることもできます。

資産のコピー

アセットがプロジェクトフォルダーになるGulpを使用して、src / assetsフォルダーのコンテンツをコピーできます。ここで重要なのは、SASSファイル、JavaScriptファイル、および画像は、コンテンツをコピーする独自のプロセスを持っているため、このアセットコピープロセスには含まれないということです。

ページの編集

src /ディレクトリ内にあるページ、レイアウト、パーシャルの3つのフォルダの下にHTMLページを作成できます。テンプレート、ページ、HTMLパーシャルを使用してページのレイアウトを作成するPaniniフラットファイルコンパイラを使用できます。このプロセスは、ハンドルバーテンプレート言語を使用して実行できます。

SASSコンパイル

Libsassを使用してSASSをCSSにコンパイルでき、メインSASSファイルはsrc / assets / scss / app.scssに保存され、新しく作成されたSASSパーシャルもこのフォルダー自体に保存されます。CSSの出力は、ネストされたスタイルの通常のCSSのようになります。clean-cssを使用してCSSを圧縮し、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コンポーネントの一部を示します-

シニア番号 コンポーネントと説明
1 アコーディオン

アコーディオンには、大量のデータを展開および折りたたむためにWebサイトで使用される垂直タブが含まれています。
2 アコーディオンメニュー

アコーディオン効果のある折りたたみ可能なメニューを表示します。
3 バッジ

バッジは、重要なメモやメッセージなどの情報を強調するために使用されるラベルに似ています。
4 パン粉

ナビゲーション階層内のサイトの現在の場所を指定します。
5 ボタン

Foundationは、さまざまなスタイルの標準ボタンをサポートしています。
6 叫ぶ

コールアウトは、コンテンツを内部に配置するために使用できる要素です。
7 閉じるボタン

アラートボックスを閉じるために使用されます。
8 ドリルダウンメニュー

ドリルダウンメニューは、ネストされたリストを垂直ドリルダウンメニューに変更します。
9 ドロップダウンメニュー

ドロップダウンメニューは、リンクをリスト形式で表示するために使用されます。
10 ドロップダウンペイン

ボタンをクリックすると、ドロップダウンペインにコンテンツが表示されます。
11 フレックスビデオ

Webページにビデオオブジェクトを作成するために使用されます。
12 フロートクラス

HTML要素にユーティリティクラスを追加するために使用されます。
13 フォーム

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

ラベルはインラインスタイルであり、入力要素のラベルを定義します。
15 メディアオブジェクト

画像、ビデオ、ブログコメントなどのメディアオブジェクトを追加するために使用されます。これらはコンテンツブロックの左または右に配置できます。
16 メニュー

Webサイトのさまざまなモードへのアクセスを提供します。
17 ページネーション

これは、コンテンツを一連の関連ページに分割するナビゲーションの一種です。
18 スライダー

ハンドルをドラッグして値の範囲を指定します。
19 スイッチ

オン状態とオフ状態を切り替えるために使用されます。
20 テーブル

これは、行と列の形式でデータを表します。
21 タブ

これは、ページを離れることなくコンテンツをさまざまなペインに表示するナビゲーションベースのタブです。
22 サムネイル

画像をサムネイル形式でスタイル設定します。
23 タイトルバー

これは、ユーザーが他のメニュー項目で使用している現在の画面を表示するために使用されます。
24 ツールチップ

リンク上にマウスを置くと情報を説明する小さなポップアップボックスです。
25 トップバー

Webサイトでナビゲーションヘッダーを作成するために使用されます。
26 軌道

これは、軌道クラスを使用して要素をスワイプする簡単で強力なスライダーです。

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

フォントのサイズ設定

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

色

リンクやボタンなどのインタラクティブな要素は、SASS変数$ primary-colorに由来するデフォルトの青の色合いを使用します。コンポーネントには、セカンダリ、アラート、成功、警告などの色を付けることもできます。詳細については、こちらを確認してください。

SASSリファレンス

変数

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

シニア番号 名前と説明 タイプ デフォルト値
1

$global-width

これは、サイトのグローバル幅を表します。グリッドの行幅を決定するために使用されます。

 数 rem-calc（1200）
2

$global-font-size

<html>と<body>に適用されるフォントサイズを表します。デフォルトでは100％に設定されており、ユーザーのブラウザ設定値が継承されます。

 数 100％
3

$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アイテムに使用されます。

 色 #fefefe
14

$body-background

体の背景色を表します。

 色 $ white
15

$body-font-color

本文のテキストの色を表します。

 色 $ black
16

$body-font-family

本文のフォントのリストを表します。

 リスト 'Helvetica Neue'、Helvetica、Roboto、Arial、sans-serif
17

$body-antialiased

アンチエイリアスタイプは、CSSプロパティ-webkit-font-smoothingおよび-moz-osx-font-smoothingを使用してこの属性をtrueに設定することで有効になります。

 ブール値 true
18

$global-margin

これは、コンポーネントのグローバルマージン値を表します。

 数 1レム
19

$global-padding

コンポーネントのグローバルパディング値を表します。

 数 1レム
20

$global-margin

コンポーネント間で使用されるグローバルマージン値を表します。

 数 1レム
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は、RubySASSとlibsassを使用してコンパイルできます。おすすめnode-sass 3.4.2+ SASSをコンパイルするためのバージョン。

自動プレフィックスが必要

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ファイルには、縮小版と非縮小版の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出力を制御するために使用されます。次の1行のコードを追加して、すべてのコンポーネントを一度に含めます。

@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....

設定ファイル

設定ファイルは、Foundationプロジェクト全体、つまり_settings.scssに含まれています。YetiLaunchまたはCLIを使用してFoundationfor 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だけです。

JavaScriptのインストール

ZIPダウンロード、パッケージマネージャー、またはCDNを使用して、FoundationJavaScriptファイルを取得できます。コードでは、jQueryとFoundationへのリンクを<script>タグとして提供し、終了<body>の前に配置して、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ユーティリティで、特定のプラグイン要件について詳しく調べることができます。

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

初期化中

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

たとえば-

(document).foundation();

プラグインの使用

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

プラグインの構成

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

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

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

たとえば-

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(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に引数を渡すのと同じように渡すことができます。

  • アンダースコア（_）が前に付いているメソッドは、内部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が含まれています。

  • 渡された要素に基づいて、ブール値が返されます。これは、ウィンドウの端との競合、オプション、または親要素のいずれかです。

  • 以下の行で指定されている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（「大」）はスクリーンが少なくともブレークポイントとして広いようであるかどうかをチェックするために使用されます。

  • 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は、Foundation6に含まれているMotionUIライブラリに似ています。これは、カスタム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);

image-loadedメソッドは、画像が完全に読み込まれると、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);

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

  • リサイズ（）サイズ変更イベントが発生したときの方法は、サイズ変更イベントをトリガします。

  • スクロール（）スクロールイベントが発生する方法は、スクロールイベントをトリガします。

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

その他

  • Foundationには、多くの場所で使用されているコアライブラリの機能がほとんど含まれていません。

  • ザ・ js/foundation.core.js はスクリプトファイル名であり、コードの記述中に含めることができます。

  • Foundation.GetYoDigits（[number、namespace]）は、名前空間を持つランダムなベース36uidを返します。デフォルトでは、6文字の文字列長を返します。

  • Foundation.getFnName（fn）は、JavaScript関数名を返します。

  • Foundation.transitionendは、CSSの移行が完了すると発生します。

メディアクエリは、幅、高さ、色などのメディア機能を含み、指定された画面解像度に従ってコンテンツを表示するCSS3モジュールです。

Foundationは、次のメディアクエリを使用して内訳範囲を作成します-

  • 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>

ブレークポイントの変更

アプリケーションがSASSバージョンのFoundationを使用している場合は、ブレークポイントを変更できます。以下に示すように、設定ファイルの$ 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（）ミックスインを使用して、メディアクエリを記述できます。

  • 次のコード形式に示すように、メディアクエリの動作を変更するには、ブレークポイント値とともにdownまたはonlyキーワードを使用します。

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

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

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

ブレークポイント関数

  • 内部関数を使用して、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の機能表示小規模、中、大電流のブレークポイントの名前として。

  • 以下に示すように、MediaQuery.get関数を使用してブレークポイントのメディアクエリを取得できます-

Foundation.MediaQuery.get('small')

Sassリファレンス

変数

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

シニア番号 名前と説明 タイプ デフォルト値
1

$breakpoints

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

 地図

小：0px

ミディアム：640px

大：1024px

xlarge：1200px

xxlarge：1440px
2

$breakpoint-classes

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

 リスト 小中大

Mixins

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

BREAKPOINT

これは、使用してブレークポイント（）メディアクエリを作成するために、ミックスインをして、次の活動が含まれて-

  • 文字列が渡されると、mixinは$ breakpointsマップで文字列を検索し、メディアクエリを作成します。

  • ピクセル値を使用している場合は、$ rem-baseを使用してそれをem値に変換します。

  • rem値が渡されると、その単位がemに変更されます。

  • em値を使用している場合は、そのまま使用できます。

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

シニア番号 名前と説明 タイプ デフォルト値
1

$value

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

 キーワードまたは番号 なし

関数

BREAKPOINT

これは、使用ブレークポイント（）に一致する入力値とメディアクエリを作成するためにミックスインを。

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

シニア番号 名前と説明 タイプ デフォルト値
1

$val

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

 キーワードまたは番号 小さい

JavaScriptリファレンス

関数

関数には2つのタイプがあります-

  • .atLeast−画面を確認します。少なくともブレークポイントとしては幅が広くなければなりません。

  • .get −ブレークポイントのメディアクエリを取得するために使用されます。

次の表は、上記の関数で使用されるパラメーターを示しています-

シニア番号 名前と説明 タイプ
1

size

指定された関数のブレークポイントの名前をそれぞれチェックして取得します。

 ストリング

説明

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

グリッドオプション

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

小型デバイス電話（<640px） 中型デバイスタブレット（> = 640px） 大型デバイスラップトップおよびデスクトップ（> = 1200px）
グリッドの動作 常に水平 ブレークポイントの上の水平方向に折りたたまれて開始 ブレークポイントの上の水平方向に折りたたまれて開始
クラスプレフィックス 。小さい-* 。中-* 。大-*
列の数 12 12 12
必要な はい はい はい
オフセット はい はい はい
列の順序 はい はい はい

基礎グリッドの基本構造

以下は、Foundationグリッドの基本構造です。

<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グリッドシステムで使用される3つのクラスです。

シニア番号 基本的なグリッドクラスと説明
1 大

大*クラスは大型の装置に使用されます。
2 中

中長期*クラスは、メディアデバイスに使用されます。
3 小さい

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

高度なグリッド

以下は、Foundationで使用される高度なグリッド形式です。

シニア番号 高度なグリッドと説明
1 列/行の組み合わせ

列と行のクラスはコンテナとして使用する全幅列を取得するために同一の要素に使用されます。
2 ネスティング

グリッド列を別の列の中にネストできます。
3 オフセット

使用した大offset- *または小offset- *クラスを、あなたは右に列を移動することができます。
4 不完全な行

行に12までの列が含まれていない場合、Foundationは最後の要素を自動的に右側にフロートさせます。
5 行を折りたたむ/折りたたまない

メディアクエリサイズを使用して、折りたたみクラスと折りたたみ解除クラスが行要素に含まれ、パディングが表示されます。
6 中央の列

列の中央に小さいクラスを含めることで、列を中央に配置できます。
7 ソースの順序

ソース順序付けクラスは、ブレークポイント間で列をシフトするために使用されます。
8 ブロックグリッド

ブロックグリッドは、コンテンツを分割するために使用されます。

セマンティックに構築する

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

SASSリファレンス

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

シニア番号 基本的なグリッドと説明
1 変数

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

最終的なCSS出力は、ミックスインを使用してビルドされます。

グリッドは、フレックス表示のプロパティによって異なります。これは、自動スタッキング、ソースの順序付け、垂直方向の配置、水平方向の配置など、フレックスボックスで使用できる多くの機能で構成されています。

ブラウザのサポート

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

次の表に、FlexGridの機能とその説明を示します。

シニア番号 機能と説明
1 インポート

これには、デフォルトのCSSを使用するためのフレックスグリッドのエクスポートミックスインが含まれています。
2 基本

フレックスグリッドの構造は、フロートグリッドの構造と似ています。
3 高度なサイジング

サイジングクラスが列に含まれていない場合は、それ自体が展開され、列の残りのスペースが埋められます。
4 レスポンシブ調整

フレックスグリッドの列の明示的なサイズが指定されていない場合は、列のサイズが自動化されます
5 列の配置

フレックスグリッド列は、親行の水平軸または垂直軸に揃えることができます。
6 ソースの順序

ソースの順序は、さまざまなサイズの画面で列を再配置するのに役立ちます。
7 Sassリファレンス

SASS（Syntactically Awesome Stylesheet）は、CSSでの繰り返しを減らし、時間を節約するのに役立つCSSプリプロセッサです。

この章では、 Forms。Foundationは、フォームスタイルとグリッドサポートを組み合わせた、強力で簡単で用途の広いフォームのレイアウトシステムを提供します。

次の表に、Foundationで使用されるフォーム要素を示します。

シニア番号 フォーム要素と説明
1 フォームの基本

フォームの作成は簡単で非常に柔軟であり、標準化されたフォーム要素と強力なグリッドシステムの組み合わせで構築されています。
2 ヘルプテキスト

これは、要素の目的についてユーザーに通知するために使用され、通常はフィールドの下に配置されます。
3 ラベルの配置

ラベルは入力の左または右に配置できます。
4 インラインラベルとボタン

追加のテキストまたはコントロールは、入力フィールドの左/右に添付できます。
5 カスタムコントロール

日付ピッカー、スイッチ、スライダーなどのカスタムコントロールにアクセスするには、注意が必要です。
6 SASSリファレンス

SASSリファレンスを使用してコンポーネントのスタイルを変更できます。

説明

  • Foundationは、可視性クラスを使用して、デバイスの向き（縦向きと横向き）または画面サイズ（小、中、大、またはx大画面）に基づいて要素を表示または非表示にします。

  • これにより、ユーザーはブラウジング環境に基づいて要素を使用できます。

次の表に、ブラウジング環境に基づいて要素を制御するFoundationの可視性クラスを示します。

シニア番号 可視性クラスと説明
1 画面サイズで表示

.showクラスを使用して、デバイスに基づいた要素を表示します。
2 画面サイズで非表示

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

財団は、あなたが使用していないコンテンツを非表示にすることができますいくつかのクラスをサポート.hideと.invisibleページ上のクラスと表示され、何も。

方向検出

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

アクセシビリティ

次の表に、スクリーンリーダーで読みやすくしながら、コンテンツを非表示にするスクリーンリーダーのアクセシビリティ技術を示します。

シニア番号 アクセシビリティクラスと説明
1 スクリーンリーダーに表示

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

aria-hidden属性を使用して、テキストを表示しますが、スクリーンリーダーで読み取ることができませんでした。
3 スキップリンクの作成

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

Sassリファレンス

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

シニア番号 Mixinと説明 パラメータ タイプ
1

show-for

デフォルトでは、要素を非表示にし、特定の画面サイズより上に表示します。

 $ size キーワード
2

show-for-only

デフォルトでは、要素を非表示にし、ブレークポイント内に表示します。

 $ size キーワード
3

hide-for

デフォルトでは、要素を表示し、特定の画面サイズより上に非表示にします。

 $ size キーワード
4

hide-for-only

デフォルトでは、要素を表示し、特定の画面サイズより上に非表示にします。

 $ size キーワード

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

説明

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

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

シニア番号 タイポグラフィと説明
1 段落

段落は、さまざまなフォントサイズ、強調表示された単語、行の高さなどで定義された文のグループです。
2 ヘッダ

h1からh6までのHTML見出しを定義します。
3 リンク

テキストまたは画像をクリックすると別のドキュメントを開くハイパーリンクが作成されます。
4 仕切り

<hr>タグを使用して、セクション間に区切りを付けるために使用されます。
5 順序付きリストと順序なしリスト

Foundationは、順序付きリスト、順序なしリストをサポートして、物事をリストします。
6 定義リスト

定義リストは、名前と値のペアを表示するために使用されます。
7 ブロッククォート

これはテキストのブロックを表し、通常よりもはるかに大きく定義されます。
8 略語とコード

略語は単語または句の短縮された用語を定義し、コードはコードの一部を表します。
9 キーストローク

特定の機能を実行するために使用されます。
10 アクセシビリティ

Foundationは、ページのコンテンツにアクセスするためのガイドラインをいくつか提供しています。

Sassリファレンス

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

シニア番号 名前と説明 タイプ デフォルト値
1

$header-font-family

ヘッダー要素のフォントファミリーを指定します。

 文字列またはリスト $ body-font-family
2

$header-font-weight

ヘッダーのフォントの太さを指定します。

 ストリング $ global-weight-normal
3

$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.5レム
9

$header-text-rendering

テキストレンダリングの方法を定義します。

 ストリング optimizeLegibility
10

$small-font-size

<small>要素のフォントサイズを指定します。

 数 80％
11

$paragraph-margin-bottom

段落の下マージンを指定します。

 数 1レム
12

$paragraph-text-rendering

テキストレンダリング段落のメソッド。

 ストリング optimizeLegibility
13

$code-color

コードサンプルにテキストの色を提供します。

 色 $ black
14

$code-font-family

コードサンプルにフォントファミリーを提供します。

 文字列またはリスト $ font-family-monospace
15

$code-border

コードの周囲の境界線を指定します。

 リスト 1pxソリッド$ medium-gray
16

$code-padding

テキストの周囲のパディングを指定します。

 番号またはリスト rem-calc（2 5 1）
17

$anchor-color

リンクのデフォルトの色。

 色 $ primary-color
18

$anchor-color-hover

ホバー時のリンクのデフォルトの色を指定します。

 色 スケールカラー（$アンカーカラー、$明度：-14％）
19

$anchor-text-decoration

リンクのデフォルトのテキスト装飾。

 ストリング なし
20

$anchor-text-decoration-hover

ホバー上のリンクのデフォルトのテキスト装飾。

 ストリング なし
21

$hr-width

仕切りの最大幅を定義します。

 数 $ global-width
22

$hr-border

仕切りのデフォルトの境界線を指定します。

 リスト 1pxソリッド$ medium-gray
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>要素のテキストの色を適用します。

 色 $ dark-gray
31

$blockquote-padding

<blockquote>要素内にパディングを提供します。

 番号またはリスト rem-calc（9 20 0 19）
32

$blockquote-border

<blockquote>要素のサイドボーダーを提供します。

 リスト 1pxソリッド$ medium-gray
33

$cite-font-size

<cite>要素のフォントサイズを定義します。

 数 rem-calc（13）
34

$cite-color

<cite>要素のテキストの色を提供します。

 色 $ dark-gray
35

$keystroke-font

<kbd>要素のフォントファミリーを定義します。

 文字列またはリスト $ font-family-monospace
36

$keystroke-color

<kbd>要素のテキストの色を定義します。

 色 $ black
37

$keystroke-background

<kbd>要素の背景色を提供します。

 色 $ light-gray
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で使用されるタイポグラフィヘルパーを示します。

シニア番号 タイポグラフィヘルパーと説明
1 テキストの配置

左、右、中央、両端揃えなどの要素のテキスト配置を変更するのに役立ちます。
2 サブヘッダー

サブヘッダーは、.subheaderクラスを使用して任意のヘッダー要素に追加できます。
3 リードパラグラフ

これは、広告やその他の説明テキストに使用できる通常のテキストと比較して、かなり大きなテキストブロックです。
4 箇条書きなし

デフォルトでは、<ul>はFoundationの箇条書きです。箇条書きを削除するには、.no-bulletクラスを使用できます。
5 統計

ダッシュボードを扱うときはいつでも、いくつかの重要な数字を強調する必要があります。これは、.statクラスを使用して実現できます。

Sassリファレンス

変数

次の表に、プロジェクトの設定ファイル内のSASS変数を示します。これにより、コンポーネントのデフォルトのスタイルがカスタマイズされます。

シニア番号 名前と説明 タイプ デフォルト値
1

$lead-font-size

デフォルトの先頭段落のフォントサイズ。

 数 $ global-font-size * 1.25
2

$lead-lineheight

デフォルトでは、先頭段落の行の高さ。

 ストリング 1.6
3

$subheader-lineheight

サブヘッダーのデフォルトの行の高さ。

 数 1.4
4

$subheader-color

サブヘッダーのデフォルトのフォントの色。

 色 $ dark-gray
5

$subheader-font-weight

サブヘッダーのデフォルトのフォントの太さ。

 ストリング $ global-weight-normal
6

$subheader-margin-top

サブヘッダーのデフォルトの上部マージン。

 数 0.2レム
7

$subheader-margin-bottom

サブヘッダーのデフォルトの下マージン。

 数 0.5レム
8

$stat-font-size

静的番号のデフォルトのフォントサイズ

 数 2.5レム

この章では、 basic controls。Foundationは、ボタン、スライダー、スイッチなどの基本的なコントロールを提供します。

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

シニア番号 基本的な制御と説明
1 ボタン

Foundationは、ニーズに応じてカスタマイズできる多くのボタンスタイルをサポートしています。
2 ボタングループ

これらは、対応するアクション要素のコンテナです。アクションのグループがバーに表示されている場合は正常に機能します。
3 閉じるボタン

閉じるボタンは、クリックして何かを消したいときに使用します。
4 スライダー

スライダーは、範囲内の特定の値を設定するのに非常に便利です。
5 スイッチ

それはあなたがそれをクリックすることによってスイッチをオフまたはオンにすることを可能にします。

説明

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

次の表では、さまざまなタイプのナビゲーションとその説明について説明します。

シニア番号 タイプと説明
1 ナビゲーションの概要

ナビゲーションには他のセクションへのリンクが含まれており、多くのナビゲーションパターンで構成されています。
2 メニュー

メニューは、多くのナビゲーションコンポーネントを構築するために使用されます。
3 ドロップダウンメニュー

ドロップダウンメニュープラグインは、メインメニューの下にサブメニューを作成するために使用されます。
4 ドリルダウンメニュー

ドリルダウンメニュープラグインは、メインメニューにスライダー形式のサブメニューを作成するために使用されます。
5 アコーディオンメニュー

アコーディオン効果のある折りたたみ可能なメニューを表示し、アコーディオンメニュープラグインを使用した自動折りたたみのサポートを提供します。
6 トップバー

トップバーは、画面のさまざまなサイズで複雑なナビゲーションバーを簡単に表示するのに役立ちます。
7 レスポンシブナビゲーション

レスポンシブメニュープラグインは、画面のさまざまなサイズにメニューを割り当てます。
8 マゼラン

マゼランは、固定位置にあるナビゲーションを作成します。スクロール位置に基づいて、ページ上のナビゲーションリストを自動的に追跡します。
9 ページネーション

ページネーション、順序付けられていないリストは、他の多くのインターフェイス要素と同様にBootstrapによって処理されます。
10 パン粉

ブレッドクラムは、ナビゲーション階層内のサイトの現在の場所を指定します。

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

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

シニア番号 コンテナと説明
1 アコーディオン

アコーディオンには、大量のデータを展開および折りたたむためにWebサイトで使用される垂直タブが含まれています。
2 叫ぶ

コンポーネント内にコンテンツを配置します。
3 ドロップダウンペイン

ボタンをクリックすると内容が表示されます。
4 メディアオブジェクト

画像、ビデオ、ブログのコメントなどのメディアオブジェクトをいくつかのコンテンツとともに追加します。
5 オフキャンバス

表示領域からナビゲーションメニューをオフにし、メインコンテンツを表示します。
6 明らかに-モーダル

Foundationでは、revealクラスを使用してモーダルダイアログまたはポップアップウィンドウを作成できます。
7 テーブル

Foundationは、データを表形式で表示するためのレイアウトを提供します。
8 タブ

これは、ページを離れることなくコンテンツをさまざまなペインに表示するナビゲーションベースのタブです。

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

シニア番号 メディアタイプと説明
1 フレックスビデオ

画面サイズに関係なく正しいアスペクト比を維持するために、フレックスビデオコンテナにビデオを埋め込むために使用されます。
2 ラベル

これは、特定のセクションを呼び出したり、メタデータを添付したりするために本文に入れることができるインラインスタイリングに使用できます。
3 軌道

これは強力で応答性の高いスライダーであり、ユーザーはタッチスクリーンデバイスをスワイプできます。
4 プログレスバー

進行状況を表示するために使用され、レイアウトに追加できます。
5 ツールチップ

これは、ページ上の用語またはアクションの追加情報を表示するために使用されます。

説明

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

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

シニア番号 タイプと説明
1 従う

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

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

ユーザーのデバイスに応じてレスポンシブコンテンツをロードするために使用されます。
4 トグラー

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

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

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)

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$color

色の明るさをチェックします。

 色 なし
2

$yes

色が明るい場合は、$ yesの色を返します。

 色 $ black
3

$no

色が暗い場合は、$ nocolorを返します。

 色 $ white
4

$threshold

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

 パーセンテージ 60％

スマートスケール

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

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

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$color

色をスケーリングするために使用されます。

 色 なし
2

$scale

スケールアップまたはスケールダウンするパーセンテージを指定します。

 パーセンテージ 5％
3

$threshold

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

 パーセンテージ 40％

テキスト入力

テキスト入力タイプを使用しながらセレクターを作成します。入力タイプの指定には、次の形式を使用します-

text-inputs($types)

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$types

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

 色 -

ストリップユニット

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

strip-unit($num)

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$num

値から単位を削除するときの数値を指定します。

 色 なし

rem-calc

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

rem-calc($values, $base)

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$values

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

 番号またはリスト なし
2

$base

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

 数 ヌル

持っている値

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

has-value($val)

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$val

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

 混合 なし

ゲットサイド

値の辺を指定し、パディング、マージンなどで上/右/下/左の値を定義します。値の辺を指定するには、次の形式を使用します-

has-value($val)

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$val

値の側面を指定します。

 リストまたは番号 なし
2

$side

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

 キーワード なし

get-border-value

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

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

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$val

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

 リスト なし
2

$elem

境界成分を抽出するために使用されます。

 キーワード なし

インポート

scss / util /_mixins.scssファイルの下に配置されているSASSミックスインのコンテンツをインポートします。次のコード行を使用して、SASSミックスインをインポートできます-

@import 'util/mixins';

Sassリファレンス

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

Mixins

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

CSS-TRIANGLE

ドロップダウン矢印、ドロップダウンピップなどを作成するために使用されます。<i>＆:: before </ i>または<i>＆:: after </ i>セレクターを使用して、既存の要素に三角形をアタッチします。次の形式を使用します-

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

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$triangle-size

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

 数 なし
2

$triangle-color

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

 色 なし
3

$triangle-direction

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

 キーワード なし

HAMBURGER

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

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

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$color

アイコンの色を定義します。

 色 なし
2

$color-hover

アイコンにカーソルを合わせたときの色を定義します。

 色 なし
3

$width

アイコンの幅を定義します。

 数 なし
4

$height

アイコンの高さを定義します。

 数 なし
5

$weight

アイコン内の個々のバーの重みを定義します。

 数 なし
6

$bars

アイコンのバーの数を定義します。

 数 なし

BACKGROUND-TRIANGLE

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

@include background-triangle($color);

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$color

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

 色 $ black

CLEARFIX

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

@include clearfix;

AUTO-WIDTH

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

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

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

シニア番号 パラメータと説明 タイプ デフォルト値
1

$max

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

 数 なし
2

$elem

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

 キーワード li

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トランジションとアニメーションを作成するためのMotion UIライブラリを提供し、Toggler、Reveal、OrbitなどのFoundationコンポーネントによって使用されます。

MotionUIのインストール

次のコード行に示すように、npmまたはbowerを使用して、プロジェクトにMotionUIライブラリをインストールできます。

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

次のコード行に示すように、config.rbを使用して、コンパスにモーション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']
   }));

次のコードを使用して、モーションUIライブラリをSASSファイルにインポートします-

@import 'motion-ui'

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

Foundationは、MotionUIライブラリによって作成された遷移クラスを使用して遷移効果を提供します。遷移効果を使用して1つの簡単な例を作成しましょう。

カスタムトランジション

Motion UIライブラリを使用して、カスタムトランジションクラスを設定できます。たとえば、要素を回転させるmui-hinge（）遷移のカスタムクラスを設定します-

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

アニメーション

モーションUIトランジションエフェクトを使用してCSSアニメーションを作成できます。このリンクをクリックして、data-animationクラスを使用してモーダルでアニメーションがどのように機能するかを確認します。

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