Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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


Simple Usage

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.

Advanced Usage

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.

Learning Juiced

More to be come here, but get started with Juiced by checking out the Docs.