Skip to content

Latest commit

 

History

History
226 lines (128 loc) · 5.02 KB

README.md

File metadata and controls

226 lines (128 loc) · 5.02 KB
Raw

Flexr Grid - Version 2.1.0

Flexr is a responsive grid for those who just want a grid. Created by Daniel Blake, a front end web designer, with a focus on the digital grid layout and its response to different screens. It features three ways columns react: expanding, shrinking and stretching.

Column/Gutter Widths and Break Points

Breakpoint Name Breakpoint Value Column Width Gutter Width
Desktop 1180px + ~68px 28px
Tablet Landscape 1180px ~60px 28px
Tablet Portrait 940px ~44px 24px
Phone Landscape 740px ~31px 16px
Phone Portrait 470px auto 16px

First Thing's First

You gotta link the Flexr CSS before your own CSS:

<head>

   ...

   <link rel="stylesheet" href=".../flexr.css">

   <link rel="stylesheet" href=".../your.css">

   ...

</head>

Setting Up

Here's the basic structure:

<container>

   <row>

      <column(s)>

         your stuff!

      </column(s)>

   </row>

</container>

A container can be practically anything: a div, section, header, nav, etc., even the body; just something to contain your rows and columns. It doesn't even need any special class.

Rows and columns can also be practically anything: you can have a ul as a row, and its li elements as columns.

One Class Will Do

Creating a column requires only one class col- defined by its size [1&ndash;12] with no need for any offset columns.

<div class="row">

   <div class="col-6">...</div>

   <div class="col-6">...</div>

</div>

Flexr is a 12 column grid.

If you'd like to use a column with a width that you define (i.e. a logo), simply give the column the class col-x and define the width in your css.

Defining Columns

Shrinking Columns is the default type of collapsing.

To create Expanding Columns, all you need to do is add the expanding class expand in the parent row:

<div class="row expand">

   <div class="col-3">...</div>

   <div class="col-3">...</div>

   <div class="col-3">...</div>

   <div class="col-3">...</div>

</div>

The only canidates for Expanding Columns are the one, two, and three columns. When the screen reduces to the size of tablet portrait, these columns will expand automatically for smaller screens. This will only work if the row is evenly populated with these columns.

To create Stretching Columns, just add the stretching class stretch in the parent row. Stretching Columns make their parent row full width to its parent, and divide the space between themselves equally with no gutters.

Switching Column Sizes

Sometimes at certain screen sizes you'd like the column to be specifically bigger or smaller. Flexr has four special prefixes for switching that you can use. All you need to do is attach the prefix that correlates with the break point you want to the column size you want it to change to.

tl-[col]
Tablet Landscape
tp-[col]
Tablet Portrait
pl-[col]
Phone Landscape
pp-[col]
Phone Portrait

Where [col] follows the same column class name structure:

<div class="row">

   <div class="col-5 tp-col-6">...</div>

   <div class="col-7 tp-col-6">...</div>

</div>

Justifying Columns

The default justification of how the columns populate is centered. To change the justifaction, just add the class left for left justification or right for right justification to the parent row. For example, left-justification:

<div class="row left">

   <div class="col-4">...</div>

</div>

Basic Site Example

<body>

   <header>

      <nav class="row">

         <div class="col-x">...</div>

         <ul class="col-5">...</ul>

      </nav>

   </header>

    <section>

      <div class="row">

         <div class="col-6">...</div>

         <div class="col-6">...</div>

      </div>

   </section>

   <section>

      <div class="row expand">

         <div class="col-3">...</div>

         <div class="col-3">...</div>

         <div class="col-3">...</div>

         <div class="col-3">...</div>

      </div>

   </section>

   <footer>

      <div class="row">

         <div class="col-8">...</div>

         <div class="col-3">...</div>

      </div>

   </footer>

</body>

Flexr Badges

If you'd like to indicate on your site that you're using Flexr, here are some badges you can link to:

http://flexrgrid.com/host/flexr-logo-use.svg

http://flexrgrid.com/host/flexr-logo-use-black.svg

http://flexrgrid.com/host/flexr-logo-use-white.svg

Current Release Info

Version: 2.1.0

Date: December 3, 2017

Notes: Adds classes 'left' and 'right'.

File Size: 3.1KB

Future Release Updates: Sass mixins and functions will be available soon.

Deprecation Warning: Class names 'exp', 'fill', 'jus-l', and 'jus-r' will become deprecated by Version 3.0.0; please use 'expand', 'stretch', 'left', and 'right', respectively, instead.

*Be sure to check back to see if you're using the current version!