Grid Layout

Prid’ is based on a 12 columns layout. The gutters are handled with the columns' padding, no margin to worry about...

Build your grid with class="row" and class="col-*" elements, then set the width of each column with the appropriate number. For example col-3 for a width equal to 3 columns, col-9 for 9 columns…

Basic grids

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.

Offsets

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.

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.

CSS Styles

Prid’ provides some basic CSS styles to start with.

Typography

Images and caption

Figure and figcaption management, fluid width images.

Forms

Custom form design is also included in Prid’, including custom select, checkboxes and radio buttons. Just CSS, no JS, but a few special HTML markup.

Tables

Prid' provides simple support for responsive tables, wrapping them into a container.

Usage

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/my-styles.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.3', 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>
					
					
				

Get Prid'

The ZIP archive contains Prid' CSS style sheets (for development [sass] and production), the SVG sprite and the users guide.