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
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.