https://github.com/webcyou/apbcss
APB CSS - Atomic Parts Base CSS -
https://github.com/webcyou/apbcss
apb-css atomic-parts button-icon css icons molecule oocss oocss-smacss skin smacss
Last synced: 7 months ago
JSON representation
APB CSS - Atomic Parts Base CSS -
- Host: GitHub
- URL: https://github.com/webcyou/apbcss
- Owner: webcyou
- Created: 2015-12-31T22:23:54.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-12-23T01:21:42.000Z (about 5 years ago)
- Last Synced: 2025-04-06T18:52:13.342Z (10 months ago)
- Topics: apb-css, atomic-parts, button-icon, css, icons, molecule, oocss, oocss-smacss, skin, smacss
- Language: JavaScript
- Size: 4.13 MB
- Stars: 41
- Watchers: 6
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# APB CSS - Atomic Parts Base CSS -
APB CSS - Atomic Parts Base CSS -
[http://apbcss.com/](http://apbcss.com/)
*****
## What is Atomic Parts Base CSS(APB CSS)
Atomic Design + OOCSS + SMACSS =
**Atomic Parts Base CSS (APB CSS)**
### Point
- Simple
- Predictable
- General versatility
- Reusable
- Maintainable
- Scalable
- Interactive
*****
## Atoms Style Sheet
**Atomic Design**
[AtomicDesign](http://bradfrost.com/blog/post/atomic-web-design/)
### Atoms
**Button**
HTML
````
````
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
````
````
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; }
}
}
````
*****
## Molecules Style Sheet
### Molecules
**Button + Icon**
HTML
````
````
CSS
````
.btn {
.icon {
&.social {
margin: 0px 6px -11px -34px;
}
}
}
````
**Text + Icon**
HTML
````
text
````
CSS
````
.text {
.icon.ban {
margin: 0 4px -10px 0;
}
}
````
*****
## Multi Class (object-oriented)
### OOCSS + SMACSS
**Excerpts from the 「OOCSS」,「SMACSS 」**
### 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 ~
example Class Name
- text
- icon
- btn
- thumbnail
- label
- input
- code
- separate
### CSS Class Type ~ Module ~
example Class Name
- header
- footer
- contents
- mainLogo
- title
- column
- thumbnailList
- textList
- detailBox
- modalWindow
### CSS Class Type ~ Skin ~
example Class Name
Skin
- red
- blue
- wide
- high
- low
- stripe
- subdued
- small
- middle
-
### CSS Class Type ~ Number ~
example Class Name
Number
- one
- two
- no[nth]
- type[nth]
- first
- last
- odd
- even
### CSS Class Type ~ State ~
example Class Name
State
- active
- disable
- tapped
- success
- error
- highlight
- checked
- note
- center
- right
### CSS Class Type ~ 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
````
````
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/](http://apbcss.com/)
### Document
[slideshare](http://www.slideshare.net/daisuketakayama75/apbcss-atomic-parts-base-css)
### Blog
[web帳](http://www.webcyou.com)
*****
## Other
### Author
**Name** :
Daisuke Takayama
**Country** :
Japan
**Job** :
FrontEnd Engineer
**twitter**
[@webcyou](https://twitter.com/webcyou)
[@panicdragon](https://twitter.com/panicdragon)