C-Labo. モジュール基本セット

再利用性が高いもの、いつものセット、忘れがちなものをカバーする目的

モジュール一覧

カテゴリ名 モジュール名称 モディファイア/子孫要素 class値 担当 ファイル
レイアウト
基本のコンテンツ幅 ly_cont assets/scss/layout/content
少し狭いコンテンツ幅 ly_cont__thin assets/scss/layout/content
少し広いコンテンツ幅 ly_cont__wide assets/scss/layout/content
エレメント
ページの先頭に戻るボタン el_toPageTop assets/scss/element/to-page-top
メニューボタン（ハンバーガー） bl_btnMenu assets/scss/element/menu-button
クリップメディア el_clipMedia assets/scss/element/clip-media
子要素を4：3に el_clipMedia__4to3 assets/scss/element/clip-media
子要素を16：9に el_clipMedia__16to9 assets/scss/element/clip-media
丸く切り抜く el_clipMedia__circle assets/scss/element/clip-media
ボタン el_btn assets/scss/element/button
色違いボタン el_btn__subcolor, el_btn__accent assets/scss/element/button
サイズ違いボタン el_btn__sm, el_btn__lg assets/scss/element/button
スクリーンリーダ el_readerOnly assets/scss/element/a11y
スキップリンク el_skipLink assets/scss/element/a11y
ブロック
ページヘッダー bl_pageHeader assets/scss/block/page-header
カラムレイアウト bl_column assets/scss/block/column
フレックスカラム bl_flexCol assets/scss/block/flex-column
ページネーション（CSS描画アイコン） bl_pagenation assets/scss/block/pagenation
カード bl_card assets/scss/block/card
カードで使うNewバッジ bl_card_badge assets/scss/block/card
カードで使うブクマじるし bl_card_bookMark assets/scss/block/card
ヘルパー
フォントサイズ hp_fzXX assets/scss/helper/font-size
クリアフィクス clear, hp_clearFix assets/scss/helper/clear-fix
上下マージン (rem) hp_mtXrem, hp_mbXrem assets/scss/helper/margin-rem
JSイベント絡み
アイデア

開発状況

SCSSインポート用


/**
 * 00: Vars
 * 01: BASE
 * 02: Layout
 * 03: Module: Element
 * 04: Module: Block
 * 07: Unique
 * 08: Helper
 * 09: Print
 * 
 */


//
// 00: Vars
// SCSSおよび変数の定義
// 

@use "vars";
@use "global";
@use "mixin/breakpoints";


//
// 01: BASE
// normalize.css 採用
// ソフトリセット
// PRECSS ベースCSS
// 

@use "base/normalize";
@use "base/base";


//ここまでは常に読み込む




//
// 02: Layout
// PRECSS レイアウトCSS (ly_)
// 

@use "assets/scss/layout/content";


//
// 03: Module: Element
// PRECSS エレメントモジュールCSS (el_)
// 

@use "assets/scss/element/to-page-top";
@use "assets/scss/element/menu-button";
@use "assets/scss/element/clip-media";
@use "assets/scss/element/button";
@use "assets/scss/element/a11y";
@use "assets/scss/element/a11y";


//
// 04: Module: Block
// PRECSS ブロックモジュールCSS (bl_)
// 

@use "assets/scss/block/page-header";
@use "assets/scss/block/column";
@use "assets/scss/block/flex-column";
@use "assets/scss/block/pagenation";
@use "assets/scss/block/card";
//@use "assets/scss/block/card-unit";


//
// 08: Helper
// PRECSS ヘルパーモジュールCSS (hp_)
// 

@use "assets/scss/helper/font-size";
@use "assets/scss/helper/clear-fix";
@use "assets/scss/helper/margin-rem";