The easiest way for designers and front-end developers to create, edit and view project's style guides and perform element by element styling of interface.
To use ui library in your Ruby on Rails project rename index.html
to something like library.html
and put it to public
folder of application.
Additionaly you will also need to add library.css
and library.js
to your application. You can place them to public
folder as well or include them to assets pipeline by adding them to app/assets
folder.
← key opens and closes navigation on the left of library
→ key opens and closes html code preview for elements on the right of library
↑ key scrolls to previous section of library
↓ key scrolls to next section of library
To add new element to the library just insert <div class="library-section"></div>
and place element's markup inside it. Add data-label
attribute to .library-section
for specifying element's label.
To disable code preview for a specific element simply add data-code="false"
to .library-section
div.
You can easily create and add color samples just by putting <div class="library-color-sample"></div>
inside library section, and specifying background color via inline styles.
If you want to create 3 shades of initial color - put 3 <div class="library-color-shade"></div>
inside .library-color-sample
element and specify background color via inline styles.
All source files of stylesheets and javascripts are placed inside src
folder and are written in sass
and coffeescript
. So to make changes you need to edit .sass
and .coffee
files and compile them to .css
and .js
.
For compiling source files you can use tools like CodeKit or do it manualy with coffescript and sass via terminal:
Run from project's folder:
sass --watch src/library.sass:stylesheets/library.css
for css changes
coffee -o javascripts/ -cw src/
for javascript changes