RichCSS
CSS that doesn’t drive you NUTS
Working on someone's CSS can drive you NUTS
After
MessyApplication / stylesheets / main.css
.login-form{
display: block; height: 100%; vertical-align: middle; padding: 0 20px; text-align: center; padding-top: 30px;
}
.login-container{
max-width: 993px;
}
.login-btn{
border-radius:0; border:5px solid #44c0ff; max-width:350px; margin: 150px auto;
}
NewApplication / stylesheets / forms.css
.login-form{
display: block; height: 100%; vertical-align: middle; padding: 0 20px; text-align: center; padding-top: 30px;
}
NewApplication / stylesheets / blocks.css
.login-block{
max-width: 993px;
}
NewApplication / stylesheets / elements / buttons.css
.login-btn{
border-radius:0; border:5px solid #44c0ff; max-width:350px; margin: 150px auto;
}
RichCSS is an Object Oriented CSS framework providing default structures for reusable css elements. It’s built around an Architectural Style that organizes your code in a way that allows: reusability of your css, versioning, the use of css plugins and the ease of using it. RichCSS is bringing convention and organization to CSS that anyone can understand and use.
RichCSS Command Line Tool
Add this line to your application’s Gemfile
gem 'richcss'And then execute
$ bundleOr install it yourself
$ gem install richcsse.g: menu, navbar, medium-post Powered by cssparts.com
Thanks to Waterloo University Students for their
contribution to RichCSS CLI
View our full list of Acknowledgements
Did you build your website with RichCSS? We’d love to showcase your website in our Expo. Help us grow a collection of
example by sharing your website. Submit your website link to richcss [ at ] richdx.com