The Dress Code is a framework agnostic, atomic design, BEM, style library which is designed for maintainability and modularity.
Quickly create prototypes and sites or apps that work on all devices. See the Demo & Documentation for more details.
Dress Code follows BEM naming convention. Read more about BEM here.
Chrome 48+, Firefox 44+, Safari 8+, IE 10+.
- modernizer ~2.8.2 included in the
<head>
of your web page.
bower install dress-code --save
npm install dress-code --save
Include this in your <head>
:
<link href="bower_components/dress-code/dist/css/dress-code.min.css" rel="stylesheet">
You can compile the dress code by your own using a sass compiler.
@import "node_modules/breakpoint-sass/stylesheets/breakpoint" // this is a required dependency, load this before loading the dress-code
@import "node_modules/dress-code/dist/sass/dress-code" // or bower_components/dress-code/dist/sass/dress-code
@include dc-everything; // output dc-* selectors
the dress-code rely on breakpoint-sass to manage media queries more easily, please be sure that the plugin/scss module is loaded before trying to compile the dress-code stuff.
Note for those using compass. Add this to yours config.rb file:
add_import_path "bower_components"
Then you can import the dress-code like so:
@import "dress-code/dist/sass/dress-code";
Developers interested in contributing should read the following guidelines:
Requirements
- node.js. Make sure your have
v0.10
or higher installed before proceeding. - bower. Make sure you have bower installed globally with npm, if not, run this command:
npm install -g bower
- Ruby 1.9.3+. If you are using OSX it should be already installed.
- Sass 3.4.1+. to install:
sudo gem install sass
- scss-lint 0.44.0+ to install:
sudo gem install scss_lint
Install
$ git clone https://github.com/zalando/dress-code.git && cd dress-code
$ npm install
Start the local development environment:
$ npm start
To open a new browser window or to pass a value to browserSync open option:
npm start -- --open
- Sass compilation (using node-sass)
- Sass linting (using scss-lint)
- CSS Auto-prefixing / Optimization
- Image optimization
- Icon Font generator
- Demo/docs site generator
- Live preview sever (using BrowserSync)
- CHANGELOG generator
Build distribution:
$ npm run build
The distribution build artifacts output to the dist
directory.
Build demo:
$ npm run build:demo
Fabricator builds both a static documentation site and optimized CSS and JS toolkit files.
The demo build artifacts output to the .tmp/.demo
directory. This can be deployed to any static hosting environment - no language runtime or database is required.
Deploy demo:
$ npm run deploy:demo
Publish the demo as github-pages website @ https://zalando.github.io/dress-code
Copyright 2016 Zalando SE
The Dress Code is released under the MIT license. See LICENSE for details.
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.