standby.css

This module is web frontend sass library

feature

• sass modules
• utility class(margin align text mediaqueries)

setting variable

html type

• $use_html5 true(default) or false
• $reset_type "reset"(default) or "normalize"

grid system

• $content-width: 1000px
• $desktop-width: $content-width
• $gutter-width: 20px
• $sp-width: 640px

margin

• $tablet-inner-margin: 10px
• $sp-inner-margin: 10px

font

• $baseFontSizeNum: 16
• $baseFontSize: $baseFontSizeNum + px
• $baseFontFamily: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif

color

• $bodyBgColor: #fff
• $baseFontColor: #000
• $linkColor: $baseFontColor
• $linkColor-hover: $baseFontColor
• $baseColor1: #663300
• $baseColor2: lighten($baseColor1, 10%)
• $mainColor1: #1983f0
• $mainColor2: lighten($mainColor1, 10%)
• $subColor1: #1983f0
• $subColor2: lighten($subColor1, 10%)

color name

$white : #fff $black : #000

red

$lightRed: #ff6d72 $red: #ff3135 $darkRed: #AB2520

green

$lightGreen: #f0ffcf $green: #8fc31f $darkGreen: #5b8a10

blue

$lightBlue: #eef2f8 $blue: #2253b4 $darkBlue: #4e6c8c

orange

$lightOrange: #ffc400 $orange: #ffc400 $darkOrange: #ff7200

pink

$lightPink: #ffacd1 $pink: #ff4a9b $darkPink: #be5254

purple

$lightPurple: #7347b6 $purple: #7347b6 $darkPurple: #4e6c8c

yellow

$lightYellow: #f4e28e $yellow: #fad704 $darkYellow: #faca6e

gray

$lightGray: #a2a2a2 $gray: #999 $darkGray: #565656

brown

$lightBrown: #59380b $brown: #38210e $darkBrown: #2c1d06

ocher (黄土色)

$lightOcher: #dbb542 $ocher: #dbb542 $darkOcher: #9a8032

and more support browser flag($support-ie6, $support-ie7, $support-ie8, etc...)

utility classes

align

• u-align--left
• u-align--center
• u-align--right
• u-align--vertical-middle
• u-align--vertical-base

device

• u-only--pc
• u-only--sp
• u-not--pc
• u-not--sp
• u-inner--tablet
  • margin left & right $tablet-inner-margin
• u-inner--sp
  • margin left & right $sp-inner-margin

margin

• u-mgt--(0 ~ 100 step 5)
• u-mgb--(0 ~ 100 step 5)
• u-mgy--(0 ~ 100 step 5)
• u-mgl--(0 ~ 100 step 5)
• u-mgr--(0 ~ 100 step 5)
• u-mgx--(0 ~ 100 step 5)

text

• u-txt--strong
• u-txt--small

install

npm install --save-dev standby.css

usage

# css/style.sass
@import "../node_modules/standby.css/sass/standby"

mixin

device

• =break($width)
• =tablet
• =smartphone

utility

• =clrfx
• =absorb

column

• =row
• =col($num)
• =twoCol
• =twoColFixed
• =twoColFixedRight
• =twoColFluid

for IE

• =inner-block
• =table-cell($num)

css3

• =opacity($num)
• =rem($fontSize)
• =linkListArrow($size: 10px, $right: 10px, $border-size: 2px, $color: #333)

replace images

• =replaceImg($url, $width, $height, $sp: 0)
• =replaceImgHover($url, $width, $height, $sp: 0)