Twilightbloom BETA
GITHUB
寄付する

Twilightbloom
を始めましょう、
今すぐダウンロード！

をダウンロード
Parallax Image
Twilightbloom - Scalable and Maintainable Architecture

はじめに

TWILIGHTBOOMを始めましょう。
レスポンシブなモバイルファーストWebアプリまたはサイトを構築するための、シンプルでありながらスケーラブルで保守可能なアーキテクチャ。
Twilightbloomは、高速であるだけでなく、スケーラブルで保守可能なWebアプリまたはサイトの構築を支援します。 「Twilightbloom」を使用すると、方法論、コード、パッケージなど、開発者の最高の知識と労力で構築されたパッケージを取得できます。

Twilightbloomを使用してプロジェクトを開始する準備はできましたか？ パッケージをダウンロードします。
必ず最新の設計および開発標準でページをセットアップしてください。 つまり、HTML5 Doctypeを使用し、適切な応答動作のためにビューポートメタタグを含めることを意味します。 または、パッケージに含まれる「boilerplate.html」を使用できます。

NOTE:  This is translated using Google Translate. This may be wierd to read and the message may be incorrect, if you want to help with this documentation please email me. Thank you!

Content

パッケージに含まれるものを見つけます。 ダウンロードしたら、圧縮フォルダを解凍すると、次のようなものが表示されます。


                  Twilightbloom/
                  ├── addon/
                  ├── assets/
                  │   ├── fonts/
                  │   └── images/
                  ├── scripts/
                  │   ├── jquery-3.4.1.min.js
                  │   ├── object-fit-images-3.2.3.min.js
                  │   └── script.js
                  ├── styles/
                  │   ├── source
                  │   │   ├── base
                  │   │   │   └── *.scss
                  │   │   ├── component
                  │   │   │   └── *.scss
                  │   │   ├── layout
                  │   │   │   └── *.scss
                  │   │   ├── setting
                  │   │   │   └── *.scss
                  │   │   ├── utility
                  │   │   │   └── *.scss
                  │   │   ├── all.scss
                  │   │   ├── base.scss
                  │   │   ├── component.scss
                  │   │   ├── layout.scss
                  │   │   ├── setting.scss
                  │   │   └── utility.scss
                  │   ├── all.css
                  │   ├── all.css.map
                  │   ├── base.css
                  │   ├── base.css.map
                  │   ├── component.css
                  │   ├── component.css.map
                  │   ├── layout.css
                  │   ├── layout.css.map
                  │   ├── setting.css
                  │   ├── setting.css.map
                  │   ├── style.css
                  │   ├── utility.css
                  │   └── utility.css.map
                  ├── .editorconfig
                  ├── .gitattributes
                  ├── .gitignore
                  ├── .htaccess
                  ├── android-icon-192x192.png
                  ├── apple-icon-precomposed.png
                  ├── favicon-16x16.png
                  ├── favicon-32x32.png
                  ├── favicon-96x96.png
                  ├── favicon.png
                  ├── 404.html
                  ├── boilerplate.html
                  ├── index.html
                  └── robots.txt

Theming

テーマやコンポーネントを簡単に変更できるように、グローバルスタイル設定用にCSS変数またはSASS変数で「Twilightbloom」をカスタマイズします。
含めるCSS変数は次のとおりです。「：root」が必要であることに注意してください。 詳細については、「settings.css」または「scss」コードベース（ミックスイン、変数など）を確認してください。


                  :root {

                    /* Color */
                    --primary: #263238;
                    --secondary: #37474F;
                    --success: #4CAF50;
                    --warning: #FF5722;
                    --danger: #F44336;
                    --info: #2196F3;
                    --light: #FAFAFA;
                    --dark: #212121;

                    --red: #F44336;
                    --pink: #E91E63;
                    --purple: #9C27B0;
                    --deep-purple: #673AB7;
                    --indigo: #3F51B5;
                    --blue: #2196F3;
                    --light-blue: #03A9F4;
                    --cyan: #00BCD4;
                    --teal: #009688;
                    --green: #4CAF50;
                    --light-green: #8BC34A;
                    --lime: #CDDC39;
                    --yellow: #FFEB3B;
                    --amber: #FFC107;
                    --orange: #FF9800;
                    --deep-orange: #FF5722;
                    --brown: #795548;
                    --blue-grey: #607D8B;

                    --grey-50: #FAFAFA;
                    --grey-100: #F5F5F5;
                    --grey-200: #EEEEEE;
                    --grey-300: #E0E0E0;
                    --grey-400: #BDBDBD;
                    --grey-500: #9E9E9E;
                    --grey-600: #757575;
                    --grey-700: #616161;
                    --grey-800: #424242;
                    --grey-900: #212121;

                    /* Transition */
                    --transition: all 300ms ease-in-out 120ms;

                    /* font-family */
                    --font-family-sans-serif: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", "游ゴシック体", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", HiraKakuProN-W3, "TakaoExゴシック", TakaoExGothic, "MotoyaLCedar", "Droid Sans Japanese", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                  }

NOTE:  You can utilize our source Sass files to take advantage of variables, maps, mixins, and more.

Breakpoints

Twilightbloomは、いくつかのメディアクエリを使用して、レイアウトとインターフェイスの賢明なブレークポイントを作成します。
これらのブレークポイントは主に最小ビューポート幅に基づいており、ビューポートの変更に応じて要素を拡大できます。


                  // Extra small devices (411px and up)
                  @media (min-width: 411px) { ... }

                  // Small devices (576px and up)
                  @media (min-width: 576px) { ... }

                  // Medium devices (768px and up)
                  @media (min-width: 768px) { ... }

                  // Large devices (992px and up)
                  @media (min-width: 992px) { ... }

                  // Extra large devices (1200px and up)
                  @media (min-width: 1200px) { ... }

Accessibility

視覚的には非表示にする必要がありますが、スクリーンリーダーなどの支援技術からはアクセス可能なコンテンツは、「.sr-only」クラスを使用してスタイル設定できます。
これにより、コントロールがフォーカスされると表示されるようになります。


                  <p class="text-danger">
                    <span class="sr-only">Danger: </span>
                    This action is not reversible
                  </p>

従来の「スキップ」リンクなど、視覚的に隠されたインタラクティブコントロールの場合、 「.sr-only」を「.sr-only.is-focusable」クラスと組み合わせることができます。これにより、コントロールがフォーカスされるとコントロールが表示されるようになります。


                  <a class="sr-only is-focusable" href="#site-content">Skip to main content</a>

NOTE:  To extend Twilightbloom's accessibility please see WAI-ARIA, WCAG 2.0 and similar accessibility standards and requirements.

方法論

グローバル名前空間、カスケード、セレクターの特異性など、CSSの特性をより適切に処理できるプロジェクトファイルを整理します。
「ITCSS」、「SMACSS」、「OOCSS」などのいくつかの一般的な方法論と同じ方法論を共有します。
このアプローチは、Webサイトの開発に参加するすべての人が単一のコードベースで作業し、同じ言語を話せるようにすることです。

Codebase

CSSコードベースをいくつかのセクションに分離します。これにより、「グローバル名前空間」、「カスケード」、「セレクターの特異性」などの「CSSの特性」をより適切に処理できるプロジェクトファイルを整理できます。

setting.css - カスタムプロパティ（css変数）、フォントフェースなどが含まれています。
base.css - 「Reset」および「Normalize」スタイル、「Box sizing」定義など...
layout.css - 特定の「UI」レイアウト。
component.css - 特定の「UI」コンポーネント。
utitity.css - 何かをオーバーライドする機能を持つユーティリティおよびヘルパークラス。


                  Twilightbloom/
                  └── styles/
                      ├── source
                      │   ├── base
                      │   │   └── *.scss
                      │   ├── component
                      │   │   └── *.scss
                      │   ├── layout
                      │   │   └── *.scss
                      │   ├── setting
                      │   │   └── *.scss
                      │   ├── utility
                      │   │   └── *.scss
                      │   ├── all.scss
                      │   ├── base.scss
                      │   ├── component.scss
                      │   ├── layout.scss
                      │   ├── setting.scss
                      │   └── utility.scss
                      ├── all.css
                      ├── all.css.map
                      ├── base.css
                      ├── base.css.map
                      ├── component.css
                      ├── component.css.map
                      ├── layout.css
                      ├── layout.css.map
                      ├── setting.css
                      ├── setting.css.map
                      ├── style.css
                      ├── utility.css
                      └── utility.css.map
                  
                  

                  // Import order
                  @import "setting.css";
                  @import "base.css";
                  @import "layout.css";
                  @import "component.css";
                  @import "utility.css";

Naming Convention

フロントエンドコードを読みやすく、理解しやすく、操作しやすく、スケーリングしやすくする、非常に便利で強力かつシンプルな命名規則。 より堅牢で明示的で、より厳密です。

prefix - (u) utility, (l) layout, (c) component, and (js) javascript related classes.
name - preferred class/object name.
modifier - preferred modifier name.
viewport - (sm) small, (md) medium, (lg) large, (xl) extra large.
int - integer (0, 1, 2, 3, 4, 5, 6, 7, 8, 9).
others - min, max, auto.


                  .prefix-name { ... }
                  .prefix-name-int { ... }
                  .prefix-name-viewport { ... }
                  .prefix-name-viewport-int { ... }
                  .prefix-name.modifier { ... }
                  .prefix-name.modifier-int { ... }
                  .prefix-name.modifier-viewport { ... }
                  .prefix-name.modifier-viewport-int { ... }
                  .prefix-name-child { ... }
                  .prefix-name-child-int { ... }
                  .prefix-name-child-viewport { ... }
                  .prefix-name-child-viewport-int { ... }

                  .l-flex { ... }
                  .l-flex.is-wrp-no { ... }
                  .l-flex.is-wrp-no-md { ... }
                  .l-flex-item { ... }
                  .l-flex-item-12 { ... }
                  .l-flex-item-md { ... }
                  .l-flex-item-md-12 { ... }
                  .u-mar-top-10 { ... }
                  .u-mar-top-sm-20 { ... }
                  .u-mar-top-md-30 u-mar-top-lg-50 { ... }

NOTE:  Two dashes (also known as the modifier notation) imply that the class is a modifier and two underscores (also known as the child notation) imply that the class is a child.

サンプル

Twilightbloomコードベースで何を期待するかのサンプルを次に示します。詳細については、「* .css」または「SASS」コードベース（ミックスイン、変数など）を確認してください。

Container


                  <div class="l-container">
                    <!-- Content here -->
                  </div>

                  <div class="l-container is-fluid">
                    <!-- Content here -->
                  </div>
                  
                  

                  .l-container.is-fluid {
                    max-width: 100% !important;
                  }

                  @media (min-width: 576px) {
                    .l-container { max-width: 540px; }
                  }

                  @media (min-width: 768px) {
                    .l-container { max-width: 720px; }
                  }

                  @media (min-width: 992px) {
                    .l-container { max-width: 960px; }
                  }

                  @media (min-width: 1200px) {
                    .l-container { max-width: 1140px; }
                  }

Flex


                  <div class="l-flex">
                    <div class="l-flex-item-12 l-flex-item-md-6"><!-- Content here --></div>
                    <div class="l-flex-item-12 l-flex-item-md-6"><!-- Content here --></div>
                  </div>
Column one - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Column two - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 

                  .l-flex {
                    display: flex;
                    flex-wrap: wrap;
                  }

                  .l-flex.is-row-wrp { flex-flow: row wrap; }
                  .l-flex.is-row-wrp-no { flex-flow: row nowrap; }
                  .l-flex.is-row-wrp-rev { flex-flow: row wrap-reverse; }
                  .l-flex.is-row-rev-wrp { flex-flow: row-reverse wrap; }
                  .l-flex.is-row-rev-wrp-no { flex-flow: row-reverse nowrap; }
                  .l-flex.is-row-rev-wrp-rev { flex-flow: row-reverse wrap-reverse; }

                  .l-flex.is-col-wrp { flex-flow: column wrap; }
                  .l-flex.is-col-wrp-no { flex-flow: column nowrap; }
                  .l-flex.is-col-wrp-rev { flex-flow: column wrap-reverse; }
                  .l-flex.is-col-rev-wrp { flex-flow: column-reverse wrap; }
                  .l-flex.is-col-rev-wrp-no { flex-flow: column-reverse nowrap; }
                  .l-flex.is-col-rev-wrp-rev { flex-flow: column-reverse wrap-reverse; }

                  .l-flex.is-wrp { flex-wrap: wrap; }
                  .l-flex.is-wrp-no { flex-wrap: nowrap; }
                  .l-flex.is-wrp-rev { flex-wrap: wrap-reverse; }

                  .l-flex.is-col { flex-direction: column; }
                  .l-flex.is-col-rev { flex-direction: column-reverse; }

                  .l-flex.is-row { flex-direction: row; }
                  .l-flex.is-row-rev { flex-direction: row-reverse; }

                  .l-flex.is-jus-start { justify-content: flex-start; }
                  .l-flex.is-jus-end { justify-content: flex-end; }
                  .l-flex.is-jus-center { justify-content: center; }
                  .l-flex.is-jus-sparound { justify-content: space-around; }
                  .l-flex.is-jus-spbetween { justify-content: space-between; }
                  .l-flex.is-jus-spevenly { justify-content: space-evenly; }

                  .l-flex.is-ali-start { align-content: flex-start; }
                  .l-flex.is-ali-end { align-content: flex-end; }
                  .l-flex.is-ali-center { align-content: center; }
                  .l-flex.is-ali-stretch { align-content: stretch; }
                  .l-flex.is-ali-sparound { align-content: space-around; }
                  .l-flex.is-ali-spbetween { align-content: space-between; }

                  .l-flex.is-alt-start { align-items: flex-start; }
                  .l-flex.is-alt-end { align-items: flex-end; }
                  .l-flex.is-alt-center { align-items: center; }
                  .l-flex.is-alt-stretch { align-items: stretch; }
                  .l-flex.is-alt-baseline { align-items: baseline; }

                  .l-flex-order-1 { order: 1; }
                  .l-flex-order-2 { order: 2; }
                  .l-flex-order-3 { order: 3; }
                  .l-flex-order-4 { order: 4; }
                  .l-flex-order-5 { order: 5; }
                  .l-flex-order-6 { order: 6; }
                  .l-flex-order-7 { order: 7; }
                  .l-flex-order-8 { order: 8; }
                  .l-flex-order-9 { order: 9; }
                  .l-flex-order-10 { order: 10; }
                  .l-flex-order-11 { order: 11; }
                  .l-flex-order-12 { order: 12; }

                  .l-flex-als-start { align-self: flex-start; }
                  .l-flex-als-end { align-self: flex-end; }
                  .l-flex-als-center { align-self: center; }
                  .l-flex-als-stretch { align-self: stretch; }
                  .l-flex-als-baseline { align-self: baseline; }

                  .l-flex-item {
                    flex: 0 0 auto;
                    width: auto;
                    max-width: 100%;
                  }

                  .l-flex-item-1 {
                    flex: 0 0 8.333333%;
                    max-width: 8.333333%;
                  }

                  .l-flex-item-2 {
                    flex: 0 0 16.666667%;
                    max-width: 16.666667%;
                  }

                  .l-flex-item-3 {
                    flex: 0 0 25%;
                    max-width: 25%;
                  }

                  .l-flex-item-4 {
                    flex: 0 0 33.333333%;
                    max-width: 33.333333%;
                  }

                  .l-flex-item-5 {
                    flex: 0 0 41.666667%;
                    max-width: 41.666667%;
                  }

                  .l-flex-item-6 {
                    flex: 0 0 50%;
                    max-width: 50%;
                  }

                  .l-flex-item-7 {
                    flex: 0 0 58.333333%;
                    max-width: 58.333333%;
                  }

                  .l-flex-item-8 {
                    flex: 0 0 66.666667%;
                    max-width: 66.666667%;
                  }

                  .l-flex-item-9 {
                    flex: 0 0 75%;
                    max-width: 75%;
                  }

                  .l-flex-item-10 {
                    flex: 0 0 83.333333%;
                    max-width: 83.333333%;
                  }

                  .l-flex-item-11 {
                    flex: 0 0 91.666667%;
                    max-width: 91.666667%;
                  }

                  .l-flex-item-12 {
                    flex: 0 0 100%;
                    max-width: 100%;
                  }

                  .l-flex-item-a {
                    flex: 0 0 10%;
                    max-width: 10%;
                  }

                  .l-flex-item-b {
                    flex: 0 0 20%;
                    max-width: 20%;
                  }

                  .l-flex-item-c {
                    flex: 0 0 30%;
                    max-width: 30%;
                  }

                  .l-flex-item-d {
                    flex: 0 0 40%;
                    max-width: 40%;
                  }

                  .l-flex-item-e {
                    flex: 0 0 60%;
                    max-width: 60%;
                  }

                  .l-flex-item-f {
                    flex: 0 0 70%;
                    max-width: 70%;
                  }

                  .l-flex-item-g {
                    flex: 0 0 80%;
                    max-width: 80%;
                  }

                  .l-flex-item-h {
                    flex: 0 0 90%;
                    max-width: 90%;
                  }

Cluster Gap


                  // You can omit adding class name "l-gap-item" on "l-gap" child item (only if the child item is a "div").
                  <div class="l-flex l-gap-20">
                    <div class="l-gap-item"><!-- Content here --></div>
                    <div class="l-gap-item"><!-- Content here --></div>
                  </div>
Column one - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Column two - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 

                  .l-gap-10 { margin: -5px; }
                  .l-gap-20 { margin: -10px; }
                  .l-gap-30 { margin: -15px; }
                  .l-gap-40 { margin: -20px; }
                  .l-gap-50 { margin: -25px; }

                  .l-gap-10 > div, .l-gap-10 > .l-gap-item { padding: 5px; }
                  .l-gap-20 > div, .l-gap-20 > .l-gap-item { padding: 10px; }
                  .l-gap-30 > div, .l-gap-30 > .l-gap-item { padding: 15px; }
                  .l-gap-40 > div, .l-gap-40 > .l-gap-item { padding: 20px; }
                  .l-gap-50 > div, .l-gap-50 > .l-gap-item { padding: 25px; }

Button


                  <a class="c-button" href="#">Button</a>
Button Primary
Button Light
Button Dark
Button Danger 

                  .c-button {
                    display: inline-block;
                    min-width: 35px;
                    padding: 0 15px;
                    color: #FAFAFA !important;
                    font-size: 1.6rem;
                    line-height: 35px;
                    text-align: center;
                    text-decoration: none;
                    text-transform: uppercase;
                    border-radius: 2px;
                    background-color: #880E4F;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.15);
                    white-space: nowrap;
                  }

                  .c-button:hover,
                  .c-button:visited,
                  .c-button:active,
                  .c-button:focus {
                    text-decoration: none;
                  }

                  .c-button:hover {
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 4px 4px -4px rgba(0, 0, 0, 0.2);
                  }

                  .c-button.is-large {
                    min-width: 50px;
                    line-height: 50px;
                    padding: 0 20px;
                  }

                  .c-button.is-light {
                    color: #212121 !important;
                    color: var(--dark) !important;
                    background-color: #FAFAFA;
                    background-color: var(--light, #FAFAFA);
                  }

                  .c-button.is-dark {
                    color: #FAFAFA !important;
                    color: var(--light, #FAFAFA) !important;
                    background-color: #212121;
                    background-color: var(--dark, #212121);
                  }

                  .c-button.is-success {
                    color: #FAFAFA !important;
                    color: var(--light, #FAFAFA) !important;
                    background-color: #4CAF50;
                    background-color: var(--success, #4CAF50);
                  }

                  .c-button.is-warnig {
                    color: #FAFAFA !important;
                    color: var(--light, #FAFAFA) !important;
                    background-color: #FF5722;
                    background-color: var(--warning, #FF5722);
                  }

                  .c-button.is-danger {
                    color: #FAFAFA !important;
                    color: var(--light, #FAFAFA) !important;
                    background-color: #F44336;
                    background-color: var(--danger, #F44336);
                  }

                  .c-button.is-info {
                    color: #FAFAFA !important;
                    color: var(--light, #FAFAFA) !important;
                    background-color: #2196F3;
                    background-color: var(--info, #2196F3);
                  }

Card


                  <div class="c-card">
                    <div class="c-card-content">
                      <!-- Content here -->
                    </div>
                  </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 

                  .c-card {
                    height: auto;
                    color: #212121 !important;
                    color: var(--dark, #212121) !important;
                    background-color: #FAFAFA;
                    background-color: var(--light, #FAFAFA);
                    border-radius: 2px;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
                  }

                  .c-card--dark {
                    color: #FAFAFA !important;
                    color: var(--light, #FAFAFA) !important;
                    background-color: #212121;
                    background-color: var(--dark, #212121);
                  }

                  .c-card-content { padding: 20px; }

Hidden


                  <div class="u-hidden">
                    <!-- Hidden content here (all screen) -->
                  </div>

                  <div class="u-hidden-sm-min">
                    <!-- Hidden content here (576px and up) -->
                  </div>

                  <div class="u-hidden-md-min">
                    <!-- Hidden content here (768px and up) -->
                  </div>

                  <div class="u-hidden-lg-min">
                    <!-- Hidden content here (992px and up) -->
                  </div>

                  <div class="u-hidden-xl-min">
                    <!-- Hidden content here (1200px and up) -->
                  </div>

                  <div class="u-hidden-sm-max">
                    <!-- Hidden content here (575px and down) -->
                  </div>

                  <div class="u-hidden-md-max">
                    <!-- Hidden content here (767px and down) -->
                  </div>

                  <div class="u-hidden-lg-max">
                    <!-- Hidden content here (991px and down) -->
                  </div>

                  <div class="u-hidden-xl-max">
                    <!-- Hidden content here (1199px and down) -->
                  </div>
                  
                  

                  .u-hidden {
                    display: none;
                    visibility: hidden;
                  }

Float


                  <div class="clearfix">
                    <div class="u-float-left">
                      <!-- Floating content here -->
                    </div>
                  </div>

                  <div class="clearfix">
                    <div class="u-float-left u-float-right-sm u-float-none-md">
                      <!-- Floating content here (float left on 575px below, float right on 576px and above, no float on 768px and above) -->
                    </div>
                  </div>
                  
                  

                  .u-float-left { float: left; }
                  .u-float-right { float: right; }
                  .u-float-none { float: none; }

                  .u-float-left-sm { float: left; }
                  .u-float-left-md { float: left; }
                  .u-float-left-lg { float: left; }
                  .u-float-left-xl { float: left; }

Width and Height


                  .u-width-25 { width: 25%; }
                  .u-width-50 { width: 50%; }
                  .u-width-75 { width: 75%; }
                  .u-width-100 { width: 100%; }
                  .u-max-width-100 { max-width: 100%; }
                  .u-viewport-width-100 { width: 100vw; }

                  .u-height-25 { height: 25%; }
                  .u-height-50 { height: 50%; }
                  .u-height-75 { height: 75%; }
                  .u-height-100 { height: 100%; }
                  .u-max-height-100 { max-height: 100%; }
                  .u-viewport-height-100 { height: 100vh; }

Padding


                  <div class="u-pad-bottom-10 u-pad-bottom-sm-20">
                    <!-- Add padding (10px padding on 575px below, 20px padding on 576 and above) -->
                  </div>
                  
                  

                  .u-pad-5 { padding: 5px; }
                  .u-pad-100 { padding: 100px; }

                  .u-pad-top-5 { padding-top: 5px; }
                  .u-pad-top-100 { padding-top: 100px; }

                  .u-pad-right-5 { padding-right: 5px; }
                  .u-pad-right-100 { padding-right: 100px; }

                  .u-pad-bottom-5 { padding-bottom: 5px; }
                  .u-pad-bottom-100 { padding-bottom: 100px; }

                  .u-pad-left-5 { padding-left: 5px; }
                  .u-pad-left-100 { padding-left: 100px; }

                  .u-pad-ver-5 { padding-top: 5px; padding-bottom: 5px; }
                  .u-pad-ver-100 { padding-top: 100px; padding-bottom: 100px; }

                  .u-pad-hor-5 { padding-right: 5px; padding-left: 5px; }
                  .u-pad-hor-10 { padding-right: 10px; padding-left: 10px; }

                  .u-pad-sm-0 { padding: 0; }
                  .u-pad-md-0 { padding: 0; }
                  .u-pad-lg-0 { padding: 0; }
                  .u-pad-xl-0 { padding: 0; }

Margin


                  <div class="u-mar-bottom-10 u-mar-bottom-sm-20">
                    <!-- Add margin (10px margin on 575px below, 20px margin on 576 and above) -->
                  </div>
                  
                  

                  .u-mar { margin: auto; }
                  .u-mar-5 { margin: 5px; }
                  .u-mar-100 { margin: 100px; }

                  .u-mar-top { margin-top: auto; }
                  .u-mar-top-5 { margin-top: 5px; }
                  .u-mar-top-100 { margin-top: 100px; }

                  .u-mar-right { margin-right: auto; }
                  .u-mar-right-5 { margin-right: 5px; }
                  .u-mar-right-10 { margin-right: 10px; }

                  .u-mar-bot { margin-bottom: auto; }
                  .u-mar-bottom-5 { margin-bottom: 5px; }
                  .u-mar-bottom-100 { margin-bottom: 100px; }

                  .u-mar-left { margin-left: auto; }
                  .u-mar-left-5 { margin-left: 5px; }
                  .u-mar-left-10 { margin-left: 10px; }

                  .u-mar-ver-5 { margin-top: 5px; margin-bottom: 5px; }
                  .u-mar-ver-100 { margin-top: 100px; margin-bottom: 100px; }

                  .u-mar-hor-5 { margin-right: 5px; margin-left: 5px; }
                  .u-mar-hor-100 { margin-right: 100px; margin-left: 100px; }

                  .u-mar-sm-0 { margin: 0; }
                  .u-mar-md-0 { margin: 0; }
                  .u-mar-lg-0 { margin: 0; }
                  .u-mar-xl-0 { margin: 0; }

Typography


                  <div class="u-text-center u-text-left-md">
                    <!-- Align text (align center on 575px below, align left on 576 and above) -->
                  </div>
                  
                  

                  .u-text-center { text-align: center; }
                  .u-text-justify { text-align: justify; }
                  .u-text-right { text-align: right; }
                  .u-text-left { text-align: left; }

                  .u-text-overline { text-decoration: overline; }
                  .u-text-underline { text-decoration: underline; }
                  .u-text-linethrough { text-decoration: line-through; }

                  .u-font-normal { font-weight: normal; }
                  .u-font-bold { font-weight: bold; }
                  .u-font-bolder { font-weight: bolder; }
                  .u-font-lighter { font-weight: lighter; }

                  .u-font-default { font-size: 1.6rem; }
                  .u-font-small { font-size: 1.2rem; }
                  .u-font-medium { font-size: 1.4rem; }
                  .u-font-large { font-size: 2rem; }
                  .u-font-extra-large { font-size: 2.4rem; }
                  .u-font-super-large { font-size: 2.8rem; }
                  .u-font-mega-large { font-size: 3.4rem; }

                  .u-line-height-small { line-height: 1.2; }
                  .u-line-height-normal { line-height: 1.5; }
                  .u-line-height-large { line-height: 2; }

                  .u-white-space-normal { white-space: normal; }
                  .u-white-space-nowrap { white-space: nowrap; }

                  .u-text-center-sm { text-align: center; }
                  .u-text-center-md { text-align: center; }
                  .u-text-center-lg { text-align: center; }
                  .u-text-center-xl { text-align: center; }

Object Fit


                  <img class="u-object-fit u-object-fit--cover" src="/assets/images/xxx.jpg" alt="Image">
                  
                  

                  .u-object-fit {
                    object-fit: inherit;
                    width: 100%;
                    height: 100%;
                  }

                  .u-object-fit--contain {
                    object-fit: contain;
                    object-position: center;
                    font-family: "object-fit: contain; object-position: center;";
                  }

                  .u-object-fit--cover {
                    object-fit: cover;
                    object-position: center;
                    font-family: "object-fit: cover; object-position: center;";
                  }

                  .u-object-fit--fill {
                    object-fit: fill;
                    object-position: center;
                    font-family: "object-fit: fill; object-position: center;";
                  }

                  .u-object-fit--scale_down {
                    object-fit: scale-down;
                    object-position: center;
                    font-family: "object-fit: scale-down; object-position: center;";
                  }

Bordered


                  <div class="u-border is-bottom is-top-sm">
                    <!-- Add border (bottom border on 575px below, top border on 576 and above) -->
                  </div>
                  
                  

                  .u-border {
                    position: relative;
                    border-width: 1px;
                    border-style: solid;
                    border-color: #E0E0E0;
                  }

                  .u-border.is-top { border-width: 1px 0 0 0; }
                  .u-border.is-right { border-width: 0 1px 0 0; }
                  .u-border.is-bottomtom { border-width: 0 0 1px 0; }
                  .u-border.is-left { border-width: 0 0 0 1px; }

                  .u-border.is-hidden { border-style: hidden; }
                  .u-border.is-dashed { border-style: dashed; }
                  .u-border.is-dotted { border-style: dotted; }
                  .u-border.is-double { border-style: double; }
                  .u-border.is-groove { border-style: groove; }
                  .u-border.is-outset { border-style: outset; }
                  .u-border.is-inset { border-style: inset; }
                  .u-border.is-ridge { border-style: ridge; }
                  .u-border.is-solid { border-style: solid; }

                  .u-border.is-seq:last-of-type { border: none !important; }

List


                  <ul class="u-list">
                    <li><!-- List (Without style) --></li>
                  </ul>
                  
                  

                  .u-list { list-style-type: none; }

                  .u-list.has-column-1 { column-count: 1; }
                  .u-list.has-column-2 { column-count: 2; }
                  .u-list.has-column-3 { column-count: 3; }
                  .u-list.has-column-4 { column-count: 4; }
                  .u-list.has-column-5 { column-count: 5; }
                  .u-list.has-column-6 { column-count: 6; }
                  .u-list.has-column-7 { column-count: 7; }
                  .u-list.has-column-8 { column-count: 8; }
                  .u-list.has-column-9 { column-count: 9; }
                  .u-list.has-column-10 { column-count: 10; }

                  .u-list.has-gap-10 { column-gap: 10px; }
                  .u-list.has-gap-20 { column-gap: 20px; }
                  .u-list.has-gap-30 { column-gap: 30px; }
                  .u-list.has-gap-40 { column-gap: 40px; }
                  .u-list.has-gap-50 { column-gap: 50px; }
                  .u-list.has-gap-60 { column-gap: 60px; }
                  .u-list.has-gap-70 { column-gap: 70px; }
                  .u-list.has-gap-80 { column-gap: 80px; }
                  .u-list.has-gap-90 { column-gap: 90px; }
                  .u-list.has-gap-100 { column-gap: 100px; }

Color


                  <div class="u-background-color-dark">
                    <p class="u-color-light">Text color is light, container color is dark.</p>
                  </div>

Text color is light, container color is dark.


                    .u-xxx-primary {
                      color: #263238;
                      color: var(--primary, #263238);
                    }

                    .u-xxx-secondary {
                      color: #37474F;
                      color: var(--secondary, #37474F);
                    }

                    .u-xxx-success {
                      color: #4CAF50;
                      color: var(--success, #4CAF50);
                    }

                    .u-xxx-warning {
                      color: #FF9800;
                      color: var(--warning, #FF9800);
                    }

                    .u-xxx-danger {
                      color: #E53935;
                      color: var(--danger, #E53935);
                    }

                    .u-xxx-info {
                      color: #03A9F4;
                      color: var(--info, #03A9F4);
                    }

                    .u-xxx-light {
                      color: #FAFAFA;
                      color: var(--light, #FAFAFA);
                    }

                    .u-xxx-dark {
                      color: #424242;
                      color: var(--dark, #424242);
                    }

                    .u-xxx-grey-50 {
                      color: #FAFAFA;
                      color: var(--grey-50, #FAFAFA);
                    }

                    .u-xxx-grey-100 {
                      color: #F5F5F5;
                      color: var(--grey-100, #F5F5F5);
                    }

                    .u-xxx-grey-200 {
                      color: #EEEEEE;
                      color: var(--grey-200, #EEEEEE);
                    }

                    .u-xxx-grey-300 {
                      color: #E0E0E0;
                      color: var(--grey-300, #E0E0E0);
                    }

                    .u-xxx-grey-400 {
                      color: #BDBDBD;
                      color: var(--grey-400, #BDBDBD);
                    }

                    .u-xxx-grey-500 {
                      color: #9E9E9E;
                      color: var(--grey-500, #9E9E9E);
                    }

                    .u-xxx-grey-600 {
                      color: #757575;
                      color: var(--grey-600, #757575);
                    }

                    .u-xxx-grey-700 {
                      color: #616161;
                      color: var(--grey-700, #616161);
                    }

                    .u-xxx-grey-800 {
                      color: #424242;
                      color: var(--grey-800, #212121);
                    }

                    .u-xxx-grey-900 {
                      color: #212121;
                      color: var(--grey-900, #212121);
                    }

                    .u-xxx-white { color: #FFF; }
                    .u-xxx-black { color: #000; }

Image


                  <img class="u-image-fluid u-block u-mar" src="/assets/images/xxx.jpg" alt="Center Block Fluid Image">
                  
                  

                  .u-image-fluid { max-width: 100%; }

                  .u-object-fit {
                    object-fit: inherit;
                    width: 100%;
                    height: 100%;
                  }

パッケージ

Twilightbloomに含まれているいくつかの素晴らしい作品。

新機能

Twilightbloom v1.5

  • Removed BEM naming Convention.
  • Minor changes and fixes.

Twilightbloom v1.0

  • Twilightbloom released!