APB CSS - Atomic Parts Base CSS -
Atomic Design + OOCSS + SMACSS =
Atomic Parts Base CSS (APB CSS)
Atomic Design
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
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; }
}
}
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;
}
}
}
Text + Icon
HTML
<p class="text"><span class="icon ban"></span>text</p>
CSS
.text {
.icon.ban {
margin: 0 4px -10px 0;
}
}
**Excerpts from the OOCSS,SMACSS **
Based on the atom name or module name, and grant the six types of class name.
example Class Name
example Class Name
example Class Name Skin
example Class Name Number
example Class Name State
example Class Name Other
etc..
SCSS
scss
|- base
|- pages
|- parts
_common_inc.scss
_parts.scss
style.scss
base
scss
|- base
|- _base.scss
|- _mixin.scss
|- _reset.scss
|- _setting.scss
parts
scss
|- parts
|- _button.scss
|- _icon.scss
|- _list.scss
|- _paragraph.scss
....
File group that defines the atom and modules.
pages
scss
|- pages
|- _top.scss
|- _info.scss
|- _profile.scss
|- _main_contents.scss
....
Defines page-specific layout style.
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.
It is this page.
Name : Daisuke Takayama
Country : Japan
Job : FrontEnd Engineer