Juiced is flexible CSS front-end framework that has many improvments over existing Grid-based CSS frameworks. It is built on the Flexible Boxes Layout spec and is supported by all modern browsers IE10+.
Juiced can be downloaded directly from the Github repository https://github.com/ovdojoey/Juiced or through Bower using bower install juiced
.
To create your own custom version of Juiced (using your own colors or breakpoints) you will need Node installed. Once Node is on your machine, open Terminal and cd
to the folder where Juiced is located. Run npm install
to install the required depenendencies. After that you can modify the variables in /sass/_variables.scss and run gulp
to compile a new build and watch for changes. Your build will be placed in the /dist/css/
folder.
You can use Juiced by including the minified /dist/css/juiced.css
file in the head section of your webpage. By default, this will use the Juiced default colors. If you wish to make changes to the default colors see the Advanced Usage below.
If you are already using Sass in your workflow, add Juiced to the top of your Sass file with @import /bower_components/sass/juiced
. Note: the location of your bower components folder may vary.
Want to customize Juiced?
You should define any Juiced variables above your @import
statement as this will save your custom variables even after updating the Juiced source (for instance when updating using bower update
). See the /sass/_variables.scss
file for a list of available variables.
More to be come here, but get started with Juiced by checking out the Docs.