-
Notifications
You must be signed in to change notification settings - Fork 3
Styleguide
Modules are prefixed with .m-:
.m-module-name
(use hyphens - instead of underscores _ inside names)
e.g. .m-callout
Module components:
.m-module-name--component
e.g. .m-callout--text
Components are always defined on the main module
(don't be crazy! 2 components max.)
Submodules:
.m-module-name_submodule-name
e.g. .m-callout_with-bubble
States are prefixed with is-, but don't contain their module's name
e.g. .is-active
To define them for their modules only, they are defined using & e.g.
.m-module-name
color: white
&.is-active
color: black
Terminology:
- "module family" = modules + submodules + states
- "module group" = Similar modules/module families
Each module family has its own partial in app/views/modules
app/views/modules/_callout.html.haml
It's allowed to group module partials in folders (you may want to do that for module families or groups).
app/views/modules/navigation/_navigation.html.haml
app/views/modules/navigation/_navigation-list.html.haml
Each module family or group has its own sass file in app/assets/stylesheets/modules
app/stylesheets/modules/_navigation.css.sass
app/stylesheets/modules/_all-the-list-modules.css.sass
Each module family or group has its own javascript file in app/assets/javascripts/modules
app/javascripts/modules/_navigation.js.coffee