Building mobile-first layouts is the most powerful feature of Juiced. If you are familiar with a 12-column grid layout, Juiced will be a breeze to get started. There are a few awesome advantages to using Juiced over other grid systems, namely Flexible boxes. Using the Flexbox spec, Juiced lets you vertically align all columns, shift uneven or extra columns, add spacing around or between columns, auto-size and grow your columns to fit available space, and order columns for each breakpoint. Juiced is pretty awesome!
QuickstartTo start building with Juiced, create a .container parent element. Inside you will add your columns .col-[auto|1-12]. Unlike other CSS frameworks, you don't need to use .row and your columns don't have to add up to 12. Gutters are created using padding, but are not added by default. Learn about gutters in the container section below.
.col-[1-12]Width-based columns are set to stretch across the 12 column grid depending on how wide you set each block. For instance: .col-1 will only take up 1/12 of the width, whereas .col-6 would take up 6/12 (or 50%) of the width.
.col-autoAuto columns are set to have no max-width, and no initial width. By default, they will take up as much space as their child content. You can also make a column auto sized as the viewport changes by using .col-[xs|sm|md|lg]-auto. Grow the auto columns to fill the available space using .grow-[0-4] where 0 is no growth and anything above that is the growth factor.
<div class="container gutters-sm-all background-color-light">
<div class="col-1 col-order-1">
<div class="background-color-blue color-white">
<samp>.col-1</samp>
</div>
</div>
<div class="col-6 col-order-2 col-sm-order-3">
<div class="background-color-red color-white">
<samp>.col-6</samp>
</div>
</div>
<div class="col-auto col-order-2 grow-1">
<div class="background-color-white color-dark">
<samp>.col-auto .grow-1</samp>
</div>
</div>
<div class="col-auto col-order-2">
<div class="background-color-white color-dark">
<samp>.col-auto</samp>
</div>
</div>
</div>
Truly mobile-first
Juiced is built with a mobile-first mentality, so you never have to target the smallest viewport when building your grid, instead just use .col-[1-12]. From there, target larger screens using col-[xs|sm|md|lg]-[1-12]. Column targeting works from the targeted breakpoint up, so the classes .col-6 .col-lg-4 will span 6 columns on all devices up until large screens, which it will span only 4 columns.
Readable HTMLJuiced makes it easy to understand exactly what is going on inside a layout without needing to dig into the CSS. This is because of the understandable classnames like .color-blue and .background-color-dark.
This can be highly advantageous for designers and developers as they know exactly what's going on just by looking at the HTML. However, a potential drawback would be that your markup may have many classes needed to style a particular element (especially buttons). Using many classes will not have any performance impact in modern browers.
The container wraps all of your columns. Without using the .container class, your .col classes will not work. The container is 100% Flexbox, and it's display is set to flex by default. If you are familiar with Flexbox, the following information should be a refresher, if not - take a look at the container modifier classes that activate various Flexbox properties.
Container widthBy default, the container is a max-width of 1170px. This can be modified in the _variables.scss file.
Full width (fluid containers)To stretch the container to 100% of the available width, add .full-width to the container.
Container guttersBy default, gutters are not included on columns. This makes it easier for the designer to decide if they want padding added. Add standard width gutters (16px) to the left and right of each column with .gutters. Add smaller gutters (8px) on each side using .gutters-sm. Sometimes it is useful to have padding above and below each column as well (to provide spacing when the columns' collapse). You can add gutters to all sides using .gutters-all(16px on all sides) and .gutters-sm-all (8px on all sides).
Container modifiers are classes that help align your columns. Applying these classes will set the child columns to the property chosen.
Justifying the content allows you to position any columns nicely when using auto sized columns, or when you have an unknown number of columns. This means you don't need to have all your columns add up to 12. The justification classes are .justify-start, .justify-end, .justify-center, .justify-space-between, and .justify-space-around.
Item AlignmentItem alignment refers to how the columns sit inside the "row". Typically they stretch to fill 100% of the available height, but you can also sit them at the top, bottom, vertically-centered, or baseline. The item alignment classes are .items-stretch, .items-start, .items-end, .items-center, and .items-baseline.
Content AlignmentContent alignment refers to how all the columns as a group sit in the container. Typically they stretch to fill 100% of the available height, but you can manually position them. The content alignment classes are .content-stretch, .content-start, .content-end, .content-center, .content-space-around, and .content-space-between.
Flex display, wrap and directionWe don't recommend changing these settings. You can change the Flex display property to inline-flex to by adding .flex-inline to the container. You can change the flex-direction using .dir-row, .dir-row-reverse, .dir-column, and .dir-column-reverse. Finally, you can change the flex-wrap property by using .nowrap or .wrap-reverse.
Note: Juiced is built using flex-direction: row. We have also written the docs using flex-direction: row and changing this may produce different outcomes from what our docs specify. Also, changing the direction, display, or wrap style may have compatability issues with IE10 and IE11 as it does not properly handle box-sixing on Flexbox.
Columns house all of your content. They can be a fixed width by using .col-[1-12] or they can be automatically sized by using .col-auto. Columns must be children of a container, but you are free to nest as many containers inside of columns as you need.
.col-push-[half|0-12]Use .col-push-[half|0-12] and .col-[xs|sm|md|lg]-push-[half|0-12] to shift a columns position to the left by a set width. This can be useful when centering content or to move content along the 12-column grid. Juiced also has a half option which can be useful with .col-11. Reset smaller pushes by using 0, for example: .col-push-2 col-8 col-lg-push-0 col-lg-12
Column modifiers are classes that help align your columns. Applying these classes will only affect the particular column set to the property chosen.
Flexbox is the ultimate way to order content, and Juiced expands on that to allow up to 12 columns to be ordered per breakpoint. Order columns for mobile first using .col-order-[1-12] and order columns for larger screen sizes using: .col-[xs|sm|md|lg]-order-[1-12].
Column alignmentMuch like item alignment, these properties will only be applied to a particular column, not the whole set. The column alignment classes are .align-stretch, .align-auto, .align-start, .align-end, .align-center, and .align-baseline.
Column growthWhen using auto sized columns, it can be useful to grow that column to fill any available space left. Simply add .grow-1 to add do so. If you need to scale multiple columns independently, you can add .col-grow-[1-4]], which is useful if there are more than one auto-sized columns that need to scale at a consistent factor.
Copyright 2015 Joey Lea. All rights reserved.