Alerts make it easy to display prominate information to the user. They are styled using colors from your palette or you can use the helper classes. Alerts can have an optional exit button and come in three sizes.
Alerts can have exit buttons with minimal markup:
Note: Juiced has no JavaScript baked in. You must manually add any Javascript functionalty to hide alerts, Juiced makes this simple with CSS helper classes. See how →↓
<div class="alert">
This is a unstyled alert.
</div>
<div class="alert alert-yellow">
This is a yellow alert.
</div>
<div class="alert alert-green alert-sm">
This is a small green alert.
</div>
<div class="alert alert-plain">
This is a plain alert.
</div>
<div class="alert alert-red alert-lg">
This is a large red alert.
</div>
<div class="alert alert-blue">
This is a blue alert with an exit button.
<a class="alert-exit cursor-pointer">×</a>
</div>
Add this JavaScript before your closing </body> tag for simple exit functionality:
<script>
(function(){
var _exits = [].slice.call( document.querySelectorAll('.alert-exit') );
_exits.forEach(function(ele) {
ele.addEventListener("click", function() {
var _parent = this.parentNode;
_parent.className = _parent.className + " display-none";
});
});
})();
</script>
Markup a button using a .btn class. Add .btn-sm or .btn-lg classes for smaller or larger buttons. Juiced makes no assumptions on how you will style your buttons so by default there are no colors, transitions, or hover effects. Buttons may be styled using the .radius, .btn-pill, .btn-block, and .btn-outline classes as well as the helper classes.
Outline buttons.
Outline buttons have a transparent background and a border color that matches the font color.
Cards are in. You can create them with minimal markup using .card and child .card-content block elements. They can be styled using the helper classes.
Card containersBy default, cards fill 100% of the available width allowing them to sit nicely inside the Juiced grid. If you don't want to use the grid, you can wrap your cards with a .card-masonry block element, and they will be set to a max-width of 360px as shown in our examples below (see the masonry card below for more details).
Using the .card-img class sets the image to 100% width. This is useful for card with image based headers and footers.
A container with classes .card-content and .card-header
Using .card-header adds a thin border on the bottom of the header section. It also spaces your heading tags and paragraph tags nicely for titles and subtitles.
Create cards with a .card element and use .card-content, .card-header, .card-footer, and .card-img for aligning and spacing content inside cards.
Cards can be styled using the helper classes and also with .radius and .no-border.
Use our built in .card-masonry classes to wrap all your cards. Reponsive breakpoints are the same, so .card-masonry-1 means one column on mobile and .sm-card-masonry-2 would switch to two columns on small screens and up. Juiced supports up to 4 columns for each breakpoint.
Juiced has an opt-in class of .form-control for consistent styling across all your form elements. Radio buttons and checkboxes are minimally styled by default so you won't need to use .form-control on them.
Switches are the new way to stylize checkboxes and radio buttons. Markup a radio input with a class of .switch and a sibling label element with the same .switch class. And viola.. you have a switch! Add .radius, and .outline classes to your label for pretty styles.
<input class="switch" type="checkbox" id="ex1" name="checkbox" value="1">
<label class="switch radius outline" for="ex1">
Switch label
</label>
Switches use $color-primary, $color-white, and $color-light for border and background colors.
All .form-control elements sit nicely in the Juiced grid and fill 100% of the available width.
Most Juiced components allow for a .radius helper class to be added for easy border rounding.
If you choose not to use the grid for spacing, Juiced will automatically provide margin's to any input wrapped in a label.
As shown in our example, there is no need for form-groups. Use the grid to nicely space your form elements.
<form>
<div class="container gutters-sm-all items-center">
<div class="col-sm-4 text-left sm-text-right">
<label for="contact_name">Your Name:</label>
</div>
<div class="col-sm-8">
<input id="contact_name" placeholder="John Smith" name="name" type="text" class="form-control radius">
</div>
<div class="col-sm-4 text-left sm-text-right">
<label for="contact_email">Email Address:</label>
</div>
<div class="col-sm-8">
<input id="contact_email" placeholder="john.smith@example.com" name="email" type="email" class="form-control radius">
</div>
<div class="col-sm-4 text-left sm-text-right">
<label for="contact_tel">Phone:</label>
</div>
<div class="col-sm-8">
<input id="contact_tel" placeholder="555.555.1212" name="phone" type="text" class="form-control radius">
</div>
<div class="col-sm-4 text-left sm-text-right">
<label for="contact_pass">Password:</label>
</div>
<div class="col-sm-8">
<input id="contact_pass" type="password" name="phone" class="form-control radius">
</div>
<div class="col-sm-4 text-left sm-text-right">
<label for="selections">Selections:</label>
</div>
<div class="col-sm-8">
<select id="selections" class="form-control">
<option value="1">1</option> <option value="2">2</option> <option value="3">3</option>
</select>
</div>
<div class="col-sm-4 text-left sm-text-right">
<label for="selections_multi">Multiple Selections:</label>
</div>
<div class="col-sm-8">
<select id="selections_multi" multiple class="form-control">
<option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option>
</select>
</div>
<div class="col-sm-12">
<label for="contact_message">Message:</label>
</div>
<div class="col-sm-12">
<textarea id="contact_message" placeholder="How can we help you?" name="content" class="form-control"></textarea>
</div>
<div class="col-sm-6">
<label>
<input type="radio" name="radio" value="1">
Radio Option 1
</label>
</div>
<div class="col-sm-6">
<label>
<input type="radio" name="radio" value="2" checked>
Radio Option 2 Pre-checked
</label>
</div>
<div class="col-sm-6">
<label class="cursor-not-allowed">
<input type="radio" name="radio" value="3" disabled>
Radio Option 3 Disabled
</label>
</div>
<div class="col-sm-6">
<label>
<input type="checkbox" name="checkbox" value="3">
And checkbox
</label>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn radius color-white background-color-green hover-background-color-blue transition-fast cursor-pointer">Submit</button>
</div>
</div>
</form>
Copyright 2015 Joey Lea. All rights reserved.