A sassy, opinionated CSS Framework for WOM. Now Bootstrap ~3.0.0 compatible!
- Vertical Rhythm
- Consistent pattern for form fields
- 8kb minified
- Smart defaults for all default elements (Conventional)
- CSS specificity is very low in the class hierarchy (Configurable)
- Solid foundation for a living styleguide using KSS
To use the CSS as is, you can install using npm or bower:
npm install womstrap
bower install womstrap
If you want to create your own styleguide, fork the repository and modify the src and kss-html folders.
After cloning, you'll first need to install dependencies by running npm run setup.
After that just run npm start.
KSS will generate the docs from the kss-html folder. The dist folder is created from the src folder.
Contributors are welcome, just follow these few guidelines:
- Avoid checking in compiled files (dist and docs folders) as this will reduce merge conflicts with master
- BEM for naming conventions
- Alphabetical properties
- Only nest for pseudo-elements
Compile templates using nunjucks
Folder structure:
womstrap
└── mockups
├── index.html
├── all.html
├── js
│ └── all-scripts.js
└── templates
└── partials
/templates define HTMLs DOM structure while /partials define HTML code snipets to use as modules.
Algunos requisitos básicos para ordenar el entorno de trabajo:
- Servidor web localhost
- NodeJS
En Mac, se recomienda utilizar homebrew para instalar todos los paquetes necesarios.
- Utilizar nombres en inglés para todas las clases utilizando convensiones:
- Parent-child relationships (ie:
.post > .post-title) - Plural Parent Pattern (ie.
.tabspara contenedores de muchos hijos en vez de.tabcomo clase hija-genérica) - Uso de modificadores en combinación con las clases definidas. Los modificadores van en
/utilities.scss