https://csscollege.hackpad.com/

http://www.slideshare.net/stubbornella/object-oriented-css/26-Build_HTML_from_the_component_library

.btn{display:inline-block;padding:.375rem1rem;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border:1pxsolidtransparent;border-radius:.25rem;}

.btn-primary{color:#fff;background-color:#0275d8;border-color:#0275d8;}

1. 2. (btn or button)3. (

)4. ( outline )5. (bolder)

http://codepen.io/Wcc723/pen/JXrMvZ

http://codepen.io/Wcc723/pen/EKwQEJ

card + list-group + heading

card + grid + button

.card{…}

.card.btn{…}

X

.text-primary{color:blue;}

.text-accent{color:red;}

.text-blue{color:blue;}

.text-red{color:red;}

>

1. ....

.menu{//4 }.article{//8 }

.side{//4 }.content{//8 }

.side{//4 }.content{//8 }.ad{//4 }

.col-4{//4 }

.col-8{//8 }

http://codepen.io/Wcc723/pen/oxGEMX

1. 2. sass Framework 3. Framwork 4. @mixin 5.

6. uitilities

CSS

1. 2. 3. mixin4. ...

sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…

sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…

sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…

sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…

sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…

sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…

sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…

sass/||–all.scss||–base/||–components/||–helpers/||–layout/||–pages/||–themes/||–vendors/

Bootstrap

_variable

_utilities

_header

_index

_admin

_jqueryUi