default setting stylus

_base-fz-16.styl

px10 = 63%
px11 = 69%
px12 = 75%
px13 = 82%
px14 = 88%
px15 = 94%
px16 = 100%
px17 = 107%
px18 = 113%
px19 = 119%
px20 = 125%
px21 = 132%
px22 = 138%
px23 = 144%
px24 = 150%
px25 = 157%
px26 = 163%
px27 = 169%
px28 = 175%
px29 = 182%
px30 = 188%
px31 = 194%
px32 = 200%
px33 = 207%
px34 = 213%
px35 = 219%
px36 = 225%
px37 = 232%
px38 = 238%
px39 = 244%
px40 = 250%
px41 = 257%
px42 = 263%
px43 = 269%
px44 = 275%
px45 = 282%
px46 = 288%
px47 = 294%
px48 = 300%
px49 = 307%
px50 = 313%
px51 = 319%
px52 = 325%
px53 = 332%
px54 = 338%
px55 = 344%
px56 = 350%
px57 = 357%
px58 = 363%
px59 = 369%
px60 = 375%
px61 = 382%
px62 = 388%
px63 = 394%
px64 = 400%
px65 = 407%
px66 = 413%
px67 = 419%
px68 = 425%
px69 = 432%
px70 = 438%
px71 = 444%
px72 = 450%

_layout.styl

/* Base
------------------------------------------------------------------ */
body
  font-family hiraKaku
  font-size px16
  color black

/* Component
------------------------------------------------------------------ */
.c-full
  ds(100%)
  &--centering
    position relative
    overflow hidden

.c-centering ,.c-centering__in
  height auto
  float left
  position relative
  top 0

.c-centering
  left 50%

.c-centering__in
  left -50%

/* Project
------------------------------------------------------------------ */

_mixin.styl

ds(w,h = auto,f = left)
  width w
  height h
  float f

lh(n)
  line-height (n * 100)%

fs(c,fz,lh,fw = 400)
  color c
  font-size fz
  line-height (lh * 100)%
  font-weight fw

opa(o,t = 0.25)
  opacity o
  transition t

_reset.styl

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,caption,canvas,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,form,footer,header,hgroup,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,input,label,legend,li,mark,menu,nav,object,ol,output,option,p,pre,q,ruby,s,samp,section,select,small,span,strike,strong,sub,summary,tt,table,tbody,textarea,tfoot,thead,time,tr,th,td,u,ul,var,video
  margin 0
  padding 0

article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary
  display block

ol,ul
  list-style none

blockquote,q
  quotes none

:focus
  outline 0

table
  border-collapse collapse
  border-spacing 0
  padding 0

address
  font-style normal

a
  outline none
  -webkit-tap-highlight-color rgba(0,0,0,0)
  text-decoration none
  & hover
    text-decoration: none
  img
    outline none

img
  width auto
  height auto
  max-width 100%
  margin 0px
  vertical-align top
  font-size 0
  outline none

_settings.styl

//fonts family
noto = 'Noto Sans Japanese',serif,'メイリオ',Meiryo,'ヒラギノ角ゴシック Pro','Hiragino Kaku Gothic Pro',sans-serif
meiryo = 'メイリオ',Meiryo,'ヒラギノ角ゴシック Pro','Hiragino Kaku Gothic Pro',sans-serif
hiraKaku = 'ヒラギノ角ゴシック Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif
yu = "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",'メイリオ',Meiryo ,sans-serif
helvetica-neue = "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif

//Base Contents Width
bcw = 900px

// colors
yellow = #F8CA5C
blue = #00a6fc
u-black = #333
white = #FFF
gray = #605F5F
navy-blue = #1E2160

// images base path
img-path = 'images/'

_utility.styl

.u-mt5
  margin-top 5px

.u-mt10
  margin-top 10px

.u-mt15
  margin-top 15px

.u-mt20
  margin-top 20px

.u-mt30
  margin-top 30px

.u-mt40
  margin-top 40px

.u-mt70
  margin-top 70px

.u-mr20
  margin-right 20px

.u-mb1e
  margin-bottom 1em

.u-mb10
  margin-bottom 10px

.u-ml5
  margin-left 5px

.u-ml20
  margin-left 20px

.u-ml40
  margin-left 40px

.u-pt8
  padding-top 8px

.u-pb8
  padding-bottom 8px

.u-tar
  text-align right

.u-tac
  text-align center

.u-fr
  float right

.u-fl
  float left

.u-normal
  font-weight 400

.u-bold
  font-weight 700

.u-fz10
  font-size px10

.u-lh_14_10
  lh(14/10)

.u-color--gray
  color gray

ls.md

stylus
  ├── style.styl
  └── partial
        ├── _base-fz-16.styl
        ├── _layout.styl
        ├── _mixin.styl
        ├── _reset.styl
        ├── _settings.styl
        └── _utility.styl

style.styl

@import 'partial/_settings'
@import 'partial/_mixin'
@import 'partial/_reset'
@import 'partial/_base-fz-16'
@import 'partial/_utility'
@import 'partial/_layout'