Usage
Prid’ is based on a 12 columns layout. The gutters are handled with the columns' padding, no margin to worry about...
Basic grids
First, just add Prid' style sheet in the head section of your pages, before any other CSS styles. For example:
<link rel="stylesheet" href="css/prid.min.css" media="all"> <link rel="stylesheet" href="css/style.css" media="all">
For WordPress users, you may copy Prid's CSS file into your theme folder and enqueue it before the main stylesheet in your functions.php file.
function add_css_styles() {
wp_register_style( 'prid', get_template_directory_uri() . '/css/prid.min.css', array(), '1.0', false );
wp_enqueue_style( 'prid' );
wp_enqueue_style( 'style', get_stylesheet_uri(), array(), '1.0', false );
}
add_action('wp_enqueue_scripts', 'add_css_styles');
Don't forget to add the SVG sprite in a "img" folder (Or fix the links in the CSS sheets).
Then you can begin to construct your grid with row and col-* classes.
Here is a very basic example:
<header class="row" id="site_header"> <div class="col-12">My Logo</div> </header> <div class="row" id="site_content"> <div class="col-9">My content</div> <div class="col-3">My sidebar</div> </div> <footer class="row" id="site_footer"> <div class="col-12">My legal terms</div> </footer>
And here are some grids:
col-12
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-2
col-2
col-2
col-2
col-2
col-2
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
Nested columns
Columns can be nested, you just have to add the class colparent to the parent column, so its padding is set to 0 to preserve global margins.
<div class="row"> <div class="col-3"> col-3 </div> <div class="col-9 colparent"> <div class="col-3"> col-3 </div> <div class="col-6"> col-6 </div> <div class="col-3"> col-3 </div> </div> </div>
col-3
col-3
col-6
col-3
Spaces
You can add some left or right margins if needed. For example, add the class left-1 if you want a 1 column left margin, or right-2 if you want a 2 columns right-margin.
<div class="row"> <div class="col-2"> col-2 </div> <div class="col-3 left-1"> col-3 + 1 col. left </div> <div class="col-3 right-1"> col-3 + 1 col. right </div> <div class="col-2"> col-2 </div> </div>
col-2
col-3 + 1 col. left
col-3 + 1 col. right
col-2
Mixed widths
Columns can be set to a different width under a particular breakpoint. For example, use the class small-6 to set the width of the column to 50% for small widths. For medium widths you can use mid-6. Breakpoints can of course be customized.
<div class="row"> <div class="col-3 mid-6 small-4"> col-3 mid-6 small-4 </div> <div class="col-3 mid-6 small-8"> col-3 mid-6 small-8 </div> <div class="col-3 mid-6 small-6"> col-3 mid-6 small-6 </div> <div class="col-3 mid-6 small-6"> col-3 mid-6 small-6 </div> </div>
col-3 mid-6 small-4
col-3 mid-6 small-8
col-3 mid-6 small-6
col-3 mid-6 small-6
CSS Styles
Images and caption
Figure and figcaption management, fluid width images.
<figure> <img src="img/small-world.jpg" alt="small world photo" /> <figcaption>Small world...</figcaption> </figure>
Forms
Custom form design is also included in Prid’, including custom select, checkboxes and radio buttons. Just CSS, no JS :) But there's a special markup for the fields:
All labels and fields are wrapped in a container: formfield-text for inputs (text, date, password...) formfield-textarea for text areas.
<div class="formfield-text"> <!-- Input field --> <label>Text</label> <input type="text"> </div> <div class="formfield-textarea"> <!-- Text area --> <label>Textarea</label> <textarea></textarea> </div>
Select and input file need formfield-select or formfield-file as well as a second wrapper formfield-select--container or formfield-file--container.
<div class="formfield-file"> <!-- Input file --> <label>File</label> <div class="formfield-file--container"> <input type="file"> </div> </div> <div class="formfield-select"> <!-- Select --> <label>Select</label> <div class="formfield-select--container"> <select> <option value="your value">Your value</option> </select> </div> </div>
Same thing for checkboxes and radio buttons: formfield-checkbox or formfield-radio wrappers. The For attribute on the label is required.
<div class="formfield-checkbox"> <!-- Checkbox --> <input type="checkbox" id="checkbox1" checked="checked"> <label for="checkbox1">Orange marmelade</label> </div> <div class="formfield-radio"> <!-- Radio button --> <input type="radio" id="radiobtn2"> <label for="radiobtn2">Bacon and eggs</label> </div>
And here are the results:
Tables
Prid' provides simple support for responsive tables, wrapping them into a container with the table-container class.
<div class="table-container"> <table> ... </table> </div>
| Animal | Name | Age | Weight | Hobby | Passion |
| Cat | Prosper | 11 | 8 kg | Sleeping | Food |
| Cat | Garfield | 2 | 4 kg | Hunting | Food |
| That's all about cats now... | |||||