Guideline : css sass scss
ver_4.0
ver 3 を飛ばして4にした。
wordpressでの利用を想定。
色指定 RGBAで指定
style.scss
@charset "UTF-8";
/*
Theme Name: NameTheme URL: noneDescription: Corporate Name
Author: designlab
Version: 0.0.0
Tags: tag ,tag
*/
@import '_01_default.scss';
/*! --------------------------------------------------
Start Customize
-------------------------------------------------- */
@import '_02_base.scss';
@import '_03_layout.scss';
@import '_04_module.scss';
@import '_05_nav.scss';
@import '_06_state.scss';
@import '_07_theme.scss';
@import '_08_contents.scss';
@import 'editor-style.scss';_01_default.scss
sanitize.cssを入れ込んだ
_02_base.scss
使い回すものを記載。
大きく分けて、変数、数式
_03_layout.scss
サイトのレイヤー
- html
- body
- header、footer
- row、container
- sideBox
_06_state_1.0.scss
- 状態が変わる際に付与されるclass
- 主に js や チェックボックスなどの変化で利用
利用したことがない
Guideline : CSSは内部的なもので、こちらは、構造的なもの
設計に関して、いろいろな考え方があるようですが、自分のやりたいようにいいとこ取りで、設計することにしてます。BEM、SMACSS、OOCSS、FLOCSS、MCSS…
- バージョン管理はgit でやりたいけど、難しいんだよね。色々と。w
- 目次に説明をつけたいから…
- 図が必要かな
- 疑似は::ダブルで
言葉の定義
大きく分けて、レイアウト ＞ モジュール ＞ パーツ
- レイアウト レイヤー的な
- モジュール グローバルに使い回す的な
- コンテンツ そのページのみで使うもの
ver 2.1.0
@import '_01_sanitize.scss';
/*! --------------------------------------------------
Start Customize
-------------------------------------------------- */
@import '_02_base.scss';
@import '_03_layout.scss';
@import '_04_module.scss';
@import '_05_nav.scss';
@import '_06_state.scss';
@import '_07_theme.scss';
@import '_08_contents.scss';
@import 'editor-style.scss';
_01_sanitize.scss
そのまま利用。
_02_base.scss
/* --------------------------------------------------
_02_base.scss
Setting
- MediaQuery : Brake point
- Color
- Font
extend
-------------------------------------------------- */使い回すものを記載している。
大きく分けて、
- 変数
- 数式
_03_layout.scss
サイトのレイヤー的な
- html
- body
- header、footer
- row、container
- sideBox
_04_module.scss
モジュールとは、
/* --------------------------------------------------
module ... parts
-------------------------------------------------- */
@import '_04-01_defaultParts.scss';
@import '_04-02_customPrats.scss';
@import '_04-03_commonClass.scss';_04-01_defaultParts.scss
/*--------------------------------------------------
module
headline
p
a
img
Parts Lib
// classは_04-02_customPrats にあります
-------------------------------------------------- */_04-02_customParts.scss
/*--------------------------------------------------
Parts Lib
.m_h1-01
.m_p-01
::before ::after
-------------------------------------------------- */_04-03_commonClass.scss
これ、他の場所にもあった気が…
/* --------------------------------------------------
Component
Cler fix
clear float
text-align
display
mab 8,16,24,32
Column
- .column3
- .column4
Hr
Common
.- .att
Button
button01
// -------------------------------------------------- */_05_nav.scss
/* --------------------------------------------------
Navigation
_05-01_gNav.scss
global navigation
_05-02_lNav.scss
local navigation
side navigation
page navigation
pankuzu list
-------------------------------------------------- */
@import '_05-01_gNav.scss';
@import '_05-02_lNav.scss';_05-01_gNav.scss
グローバルナビ
_05-02_lNav.scss
ローカルナビ
_06_state.scss
利用したことがない
_07_theme.scss
- version: color,font etc…
利用したことがない
_08_contents.scss
/* --------------------------------------------------
module ... parts
-------------------------------------------------- */
@import '_08-01_commonLayouts.scss';
@import '_08-02_index.scss';
@import '_08-02_404.scss';
@import '_08-02_archive.scss';
@import '_08-02_single.scss'_08-01_commonLayouts.scss
色々なページで使う、共通のレイアウト
- NewBox
- Access
- Map
_08-02_index.scss
/* --------------------------------------------------
Main Promotion
index design
-------------------------------------------------- */_08-02_404.scss
_08-02_archive.scss
_08-02_single.scss
editor-style.scss
sideBoxなど、必要ないものは、削除する。
ver 1
_01_default.scss -> _01_sanitaize.scss