/antibase-css

Primary LanguageCSS

antibase-css v0.1.1

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-mgv--(0 ~ 100 step 5)
  • u-mgl--(0 ~ 100 step 5)
  • u-mgr--(0 ~ 100 step 5)
  • u-mgh--(0 ~ 100 step 5)

text

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

install

npm install --save-dev antibase-css

usage

# css/style.sass
@import "../node_modules/antibase-css/sass/antibase"

mixin

device

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

utility

  • =clrfx
  • =absorb

column

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

for IE

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

css3

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

replace images

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