Juiced Helper Classes

colors

Juiced has 9 colors baked in for use as backgrounds and font colors. Change the font color using .color-[option] and change the background color using .background-color-[option]. Juiced also has helper classes to darken and lighten background colors. Use .background-color-[lighter|darker] in conjunction with a background-color class to lighten or darken the selected color by 8%.

.color-red

.color-blue

.color-white .background-color-dark

.color-green

.color-auto .background-color-green

.color-yellow

.color-primary

.color-alt

.color-light

.color-dark

Note: there is also a special .color-auto class that can be used in conjunction with a .background-color. When a background color class is applied, .color-auto will be set to 40%+ contrast to match (the contrast will be darker or lighter depending on the background color chosen).

          <h2 class="color-red">Color red</h2>
          <h2 class="color-blue">Color blue</h2>
          <h2 class="color-white background-color-dark">Color white</h2>
          <h2 class="color-green">Color green</h2>
          <h2 class="background-color-green color-auto">Color auto</h2>
          <h2 class="color-yellow">Color yellow</h2>
          <h2 class="color-primary">Color primary</h2>
          <h2 class="color-alt">Color alt</h2>
          <h2 class="color-light">Color light</h2>
          <h2 class="color-dark">Color dark</h2>

cursors

Juiced does not automatically apply cursor effects to links, buttons or other elements. Instead, there is a few baked in cursor classes: .cursor-pointer, .cursor-default, .cursor-auto, .cursor-none, .cursor-not-allowed.

layout

Images

Use .img-full-width and .img-responsive on your images to scale them properly inside the grid.

Margins

Use .no-margin to remove any pre-defined margins from elements. You can also use .no-margin-[top|bottom|left|right] to remove margins from a specific side.

Padding

Use .no-padding to remove any pre-defined paddings from elements. You can also use .no-padding-[top|bottom|left|right] to remove margins from a specific side.

Position

Change the position property by using .position-[relative|absolute|fixed|static].

Z-index

Change the z-index property by using .z-index-[auto|negative|0|1|2|3|4|5].

Display responsive

Visibility responsive

Use .visible and .hidden to change the visibility property. These classes are responsive so to change the visibility for larger viewports simply prefix the breakpoint, like: .[xs|sm|md|lg]-hidden or .[xs|sm|md|lg]-visible.

Note: Our .hidden visibility class varies from Bootstrap in that we only change the visibility of the element. The element remains in the document flow and will still take up space. Change the display property to remove it from the flow.

text

Text decoration

Use either .text-decoration-none, .no-text-decoration, or .no-t-d to remove the default underline on link elements.

Add an underline text decoration using .text-decoration-underline or .t-d-u. Strike through text using .text-decoration-strike or .t-d-strike.

Tidbit: Text decoration is one of the only helper classes in Juiced that gets a unrecognizable shorthand option.

Text transforms

Use .text-uppercase for uppercase text. Use .text-lowercase for lowercase text. Use .text-capitalize for capitalized text.

Font

Text alignment responsive

.text-right

.text-center

.text-left

.text-justify column-like text with even side wrapping.

transform

Apply scale or opacity changes to an element. Typically this is useful in conjunction with hover classes and transition classes to animate an effect.

opacity

Use .opacity-[0|25|50|75|100] to modify the opacity.

scale

Use .scale-[0|50|100|105] to modify the scale.

hover

Hover effects are only applied when the element is in a :hover state. Juiced's hover classes are typically used in conjunction with transition classes for animated effects.

Hover color

Use .hover-color-[option] and .hover-background-color-[option] to modify the color and background color upon hover state. You can also modify the background color by using .hover-background-color-[lighter|darker] in conjunction with a .background-color-[option] to lighten or darken the background upon hover.

Hover opacity

Use .hover-opacity-[0|25|50|75|100] to modify the opacity of the element upon hover state.

Hover scale

Use .hover-scale-[0|50|100|105] to modify the scale of the element upon hover state.

Special button classes

There are two classes that will swap your .btn stylings when hovering. Use .hover-btn-outline to switch from a regular button to an outline style button and use .hover-btn-outline-reverse to switch from an outline style button to a regular button.

transitions

Juiced gives you some very basic CSS transitions out of the box.

Note: setting the property or timing is not required when you specify a transition duration class as it will default to all. But, it is recommended to set the transition property, if you can, to speed up browser painting and compositing.

Transition property

Use .transition-[all|background|color|opacity|transform] to set the transition-property to be applied during a transition.

Transition timing

Use .transition-[linear|ease|ease-in|ease-out|ease-in-out] to set the transition-timing-function property on an element.

Transition duration

Use .transition-[normal|fast|slow|slow-2x|slow-4x] to set the transition-timing-function property to .4s, .2s, .8s, 1.2s, and 2s respectively. Note: .transition-normal can be abbreviated to just .transition.

accessibility

Screen Readers

Use .sr-only to indiciate textual content that should only be rendered when using assistance technologies. This class sets the element to be visible, but it takes up no space.

Using ARIA

Using ARIA tags is strongly recommended. Any time you set the data-attribute [aria-hidden] to true, Juiced will automatically set the element to display:none to maintain a consistency across both regular browsers and browsers with assistive technologies enabled.

Next up, Components