APB CSS - Atomic Parts Base CSS -
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
data
ja
public
.gitignore
README.md
gulpfile.js
package.json

README.md

APB CSS - Atomic Parts Base CSS -

screen_shot_ogp.png

APB CSS - Atomic Parts Base CSS -

http://apbcss.com/


What is Atomic Parts Base CSS(APB CSS)

Atomic Design + OOCSS + SMACSS =

Atomic Parts Base CSS (APB CSS)

Atomic Parts Base CSS

Point

  • Simple
  • Predictable
  • General versatility
  • Reusable
  • Maintainable
  • Scalable
  • Interactive

Atoms Style Sheet

Atomic Design

Atomic Design

AtomicDesign

Atoms

Button

Atoms

button

HTML

<p class="btn primary"><a href="#">Button</a></p>

CSS

.btn {
  position: relative;
  width: 200px;
  height: 40px;
  border-radius: 6px;
  a {
    display: block;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
  }
  &.primary {
    background: #404040;
    @include background(linear-gradient(top, #404040, #282828));
    &:hover { background: #303030; }
  }
}

Icon

Atoms

Icon

HTML

<p class="icon social github"></p>

CSS

.icon {
  display: inline-block;
  &.social {
    width: 34px;
    height: 34px;
    background: url(SpriteImagePath) no-repeat;
    @include background-size(205px auto);
    &.github { background-position: -171px top; }
  }
}

Properties of the layout style is not included.


Molecules Style Sheet

Molecules

Molecules

Button + Icon

Button + Icon

HTML

<p class="btn primary"><a href="#"><span class="icon social github"></span>Button</a></p>

CSS

.btn {
    .icon {
        &.social {
            margin: 0px 6px -11px -34px;
        }
    }
}

Molecules

Text + Icon

Text + Icon

HTML

<p class="text"><span class="icon ban"></span>text</p>

CSS

.text {
  .icon.ban {
    margin: 0 4px -10px 0;
  }
}

Layout property is generated when you became a molecule.


Multi Class (object-oriented)

OOCSS + SMACSS

OOCSS + SMACSS

Excerpts from the 「OOCSS」,「SMACSS 」

CSS Class Type

CSS Class Type

  • Atomic:Class name of atom
  • Module:UI package name
  • Skin:Class name of decoration
  • Number:Numbering of the class name
  • State:Class name that represents the state
  • Other:Other class name

Based on the atom name or module name, and grant the six types of class name.

CSS Class Type ~ Atomic ~

Atomic example Class Name

  • text
  • icon
  • btn
  • thumbnail
  • label
  • input
  • code
  • separate

CSS Class Type ~ Module ~

Module example Class Name

  • header
  • footer
  • contents
  • mainLogo
  • title
  • column
  • thumbnailList
  • textList
  • detailBox
  • modalWindow

CSS Class Type ~ Skin ~

Skin example Class Name Skin

  • red
  • blue
  • wide
  • high
  • low
  • stripe
  • subdued
  • small
  • middle

CSS Class Type ~ Number ~

Number example Class Name Number

  • one
  • two
  • no[nth]
  • type[nth]
  • first
  • last
  • odd
  • even

CSS Class Type ~ State ~

State example Class Name State

  • active
  • disable
  • tapped
  • success
  • error
  • highlight
  • checked
  • note
  • center
  • right

CSS Class Type ~ Other ~

Other example Class Name Other

  • Semantic name
  • wrap
  • Service name
  • Page name
  • Controller name
  • Namespace

etc..


Directory structure

SCSS Directory

SCSS

scss
  |- base
  |- pages
  |- parts
  _common_inc.scss
  _parts.scss
  style.scss
  • _common_inc.scss: import base and pages
  • _parts.scss: import parts files

base Directory

base

scss
  |- base
    |- _base.scss
    |- _mixin.scss
    |- _reset.scss
    |- _setting.scss
  • _base.scss: Define -based style of application
  • _mixin.scss: Define mixin style
  • _reset.scss: Initialize the style
  • _setting.scss: Define such as variables and prefix

parts Directory

parts

scss
  |- parts
    |- _button.scss
    |- _icon.scss
    |- _list.scss
    |- _paragraph.scss
    ....

File group that defines the atom and modules.

pages Directory

pages

scss
  |- pages
    |- _top.scss
    |- _info.scss
    |- _profile.scss
    |- _main_contents.scss
    ....

Defines page-specific layout style.

name space

HTML

<section id="top" class="top">

ID is the controller name(pages Directory name) The class name is the action name, provide a name space.


Sample

It is this page.

OfficalPage

http://apbcss.com/

Document

slideshare

Blog

web帳


Other

Author

Name : Daisuke Takayama

Country : Japan

Job : FrontEnd Engineer

twitter

@webcyou @panicdragon