CSS details

CSS architecture

We don't strictly decide CSS architecture, OOCSS, SMACSS, BEM, FLOCSS, FLOU, ECSS, AtomicCSS, CCSS, MCSS, ………………… ~~WTFSS~~.

Sass

DEKOMORI adopt Sass(not .scss).
But .scss can be compiled, so you can replace with your SCSS files and use it.

directories

sass
├── libs
│   ├── commons
│   │   └── _example_common.sass
│   ├── layouts
│   │   ├── _footer.sass
│   │   ├── _header.sass
│   │   └── _l-hyphens.sass
│   ├── mixins
│   │   ├── _mediaquery.sass
│   │   └── _utility.sass
│   ├── modules
│   │   └── _m-btn.sass
│   ├── pages #each pages style
│   │   └── _index.sass 
│   ├── plugins # like appendix css to ｊQuery library
│   │   └── _example-plugins.sass
│   ├── presets
│   │   └── _preset.sass
│   └── variables
│       ├── _breakpoint.sass #set breakpoints!
│       ├── _colors.sass
│       ├── _fonts.sass
│       ├── _grid.sass
│       └── _utility.sass
└── style.sass

Break points & Media query

Break points

Use the value converted from px to em

(px/16) = em

variable name = $res-[device]-[value]

$res mean resolution.

// resolution of smartphone
$res-sp-max: 30.000em // 480px

// resolution of Tablets
$res-smallTab-min: 30.001em // 481px
$res-smallTab-max: 47.9375em // 767px
$res-largeTab-min: 48.000em // 768px
$res-largeTab-max: 64.000em // 1024px

// resolution of pc
$res-pc-min: 64.001em // 1025px
$res-pc-mid: 80em // 1280px
$res-pc-max: 97.5em // 1560px

Media Query

Preparing media query in mixin format.

min-width type

+mq-min($break-point)

max-width type

+mq-max($break-point)

min-width and max-width type

+mq-scope($break-point, $break-point)

Example usage

input .sass

+mq-min($res-pc-min)

+mq-max($res-pc-max)

+mq-scope($res-smallTab-min, $res-largeTab-max)

output .css

@media screen and (min-width: 1025px) { ... }

@media screen and (max-width: 1560px) { ... }

@media screen and (min-width: 481px) and (max-width: 1024px) { ... }

CSS