Cute Grids

Why Cute Grids?

Cute grids was made from the frustration of today's world full of large overbuilt frameworks that can be overkill for most projects and restrict the creativity of the designer with too many inbuilt design features that can make even the most creative person lazy. With too many underused features and over bloated code in many frameworks the idea of cute grids is to clean out all the dirty stuff and leave you with a clean base to let you get on with designing your responsive site the way you like. But don't make the mistake of thinking this is a minimum grid system. It has been built with most features that are seen fit to make your grid work the way you need it to. By the way this is just clean css. No sass, No Less. But who knows maybe a sass version added in the future. Let me know how you get on or if you have any questions.

Getting Started

First check out the index.html file that is included. This is just a basic example to get started. normalize.css is also included with cute grids for css reset but if you like please feel free to use your own reset or none if that is the way you hang. Take your pick. At the bare minimum make sure you include cutegrids.css file in your head of your page as shown below.

    <link href="css/cutegrids.min.css" rel="stylesheet">
    

Lets get warmed up with cute grids by first explaining how it all works. Cute grids is based on a 12 column grid which contains rows and columns with each column represented as a cute container to hold your content. First off you need to create a div with a class of row.

<div class="row"></div>

    <div class="row">
      <div class="cute-6-tablet">
        content here....
      </div>
      <div class="cute-6-tablet">
        content here....
      </div>
    </div>
  

Below is an example of all the column widths and class prefixed names without the device name to keep things simple.

Device names as shown below represent the point from which the cute column will be active. For example if you choose the .cute-3-laptop class, the div will span the width of 3 cute columns from laptop width up. All other device widths above laptop size will inherit this class unless you add another class to your div to represent another device width such as .cute-3-desktop. It is important to note that when the device width goes below the class set device width, the div will then be set to 100 percent.

Grid columns Device width classes

All cute columns classes have a padding of 0.65em(10 px) each side.

To explain in a little more detail the example below has a row containing 4 columns with the class .cute-3-tablet which spans 3 cute columns each which will apply to device width 48em (768px) and up. The other wider device widths will inherit this class unless you assign another class with a higher device width setting as in the example below where .cute-6-tablet class is together with .cute-3-laptop class.

If you reduce the width of your browser you will notice the columns change from 3 cute column state to 6 cute columns which changes the width of the columns. This was done by adding the .cute-6-tablet class with the .cute-3-laptop class as shown below. Each class setting takes affect when the device width is within range. Widths above the .cute-3-laptop class settings device width will inherit the cute column class setting. When the device width is under 48em(768px) the columns will each span out 100 percent.

    <div class="row">
      <div class="cute-3-laptop cute-6-tablet">
          <p>cute-3<br>changes to cute-6-tablet<br>when under 800px</p>
      </div>
      <div class="cute-3-laptop cute-6-tablet">
          <p>cute-3<br>changes to cute-6-tablet<br>when under 800px</p>
      </div>
      <div class="cute-3-laptop cute-6-tablet">
          <p>cute-3<br>changes to cute-6-tablet<br>when under 800px</p>
      </div>
      <div class="cute-3-laptop cute-6-tablet">
          <p>cute-3<br>changes to cute-6-tablet<br>when under 800px</p>
      </div>
    </div>
    

Behaviour of columns under class device width.

All div columns stretch to 100% width and stack when the device has a width lower than the designated class device width except when using the -phone class. If the -phone class is set for example to .cute-3-phone, it will not stretch to 100 percent but keep the designated 3 cute columns intact all down the lower device widths.

    <div class="row">
      <div class="cute-3-phone">
          <p>cute-3-phone</p>
      </div>
      <div class="cute-3-phone">
          <p>cute-3-phone</p>
      </div>
      <div class="cute-3-phone">
          <p>cute-3-phone</p>
      </div>
      <div class="cute-3-phone">
          <p>cute-3-phone</p>
      </div>
    </div>
    

Setting 100 percent width to columns 480px and under

Setting the div column with the .cute-6-tablet class would stretch the cute column to 100 percent when below 48em(768px). This is ideal in most cases but there might be times when you want to make the column stretch instead to 100 percent and stack when reaching the small phone size of 480px. The way to do this is to give the column the .cute-6-phone class and also add a class of .cute-100 which will make the column stretch to 100 percent when the device width is 480px or less.

    <div class="row">
      <div class="cute-6-tablet cute-100">
          <p>cute-6-tablet cute-100</p>
      </div>
      <div class="cute-6-tablet cute-100">
          <p>cute-6-tablet cute-100</p>
      </div>
    </div>
    

Different column height clearing issues

If you have a row of columns and for example one has a larger height than the others then you may come across clearing issues as shown in the example below when the columns are at tablet width. Reduce the browser width to see what happens.

    <div class="row other-example">
      <div class="cute-3-laptop cute-6-tablet">
          <p>cute-3-laptop<br>changes to cute-6-tablet<br>when under 800px</p>
      </div>
      <div class="cute-3-laptop cute-6-tablet">
          <p>cute-3-laptop</p>
      </div>
      <div class="clearfix show-tablet"></div>
      <div class="cute-3-laptop cute-6-tablet">
          <p>cute-3-laptop</p>
      </div>
      <div class="cute-3-laptop cute-6-tablet">
          <p>cute-3-laptop</p>
      </div>
    </div>
    

Offsets

Offset your columns by adding -offset to your device column classes such as below by adding -offset to .cute-3-tablet to be cute-3-tablet-tablet. Note that the last column of each row is always set to float right so the affect is not always obvious.

    <div class="row">
      <div class="cute-3-tablet">
          <p>cute-6-tablet<br>stays here</p>
      </div>
      <div class="cute-7-tablet cute-1-tablet-offset left">
          <p>cute-6-tablet<br>offset by cute-3-tablet-offset & .left class added </p>
      </div>
    </div>
    

Changing cute column order

Sometimes you may need to reorder your cute grid columns such as the first column switching places with the second column at certain device width. This can be achieved below by using .cute-4-tablet-pull and .cute-8-tablet-push which pulls and pushes each column in the other direction.

The code below shows the layout for the 2 examples above

    <div class="row">
      <div class="cute-4-tablet cute-8-tablet-push"> 
        <p>cute-4-tablet cute-8-tablet-push</p>
      </div>
      <div class="cute-8-tablet cute-4-tablet-pull">
        <p>cute-8-tablet cute-4-tablet-pull</p>
      </div>
    </div>
    <div class="row">
      <div class="cute-8-tablet cute-4-tablet-push">
        <p>cute-8-tablet cute-4-tablet-push</p>
      </div>
        <div class="cute-4-tablet cute-8-tablet-pull">
          <p>cute-4-tablet cute-8-tablet-pull</p>
        </div>
    </div>
    

Resetting columns

If you wish to reset columns, you can use the .phone-reset, .tablet-reset, .laptop-reset and .desktop-reset classes

The rows above are the same as previous example except .desktop-reset has been added which makes the columns reset at desktop device width.

Nesting Cute Columns

It is possible to nest content inside your grid. Just add a new row and cute columns inside. as shown below.

    <div class="row">
      <div class="cute-12-tablet">
        <p>cute-12-tablet</p>
        <div class="row">
          <div class="cute-6-tablet">
          <p>cute-6-tablet nested inside cute-12-tablet</p>
          </div>
          <div class="cute-6-tablet">
            <p>cute-6-tablet nested inside cute-12-tablet</p>
          </div>
        </div>
      </div>
    </div>
    

Center Cute Columns

The first column below is centered using .center-tablet. You can also use .center-phone, .center-laptop and .center-desktop

The second column below is centered from tablet size and uncenters on desktop width when using .unceter-desktop which floats left.

If you want the column to uncenter and float right then add the class .right

Column top & bottom Padding

This was a difficult one. To give padding or not to give padding. It was decided to give each column a top and bottom padding of 0.65rem(10px) which adds to 20px between columns. This descision was made in the end as it seems in most cases to help with the design flow of the page without having to think about giving spacing between each column especially when columns are stacked on mobile devices.

Of course the desicion is up to you and there are occasions where this would not be suitable. If you don't want the automatic top and bottom padding on each column then just overide or even change the cutegrids.css if you are comfortable as shown below.

    [class*='cute-'] {
    float: left;
    position: relative;
    padding: 0.65rem; /*  To remove top and bottom padding change to padding: 0 0.65rem */
    width:100%;
    }
    

Or add to your custom css the following to remove top and bottom padding to the columns.

    [class*='cute-'] {
    padding: 0 0.65rem;
    }
    

You can of course set your own amount of padding as you wish.

Row Width

The row max width has been set to 75rem(1200px) but of course this can be changed to what you like. The following code shows what needs to be changed in the cutegrids.css to change the max width of the row.

    /* Set the width of the row to what you like */
    .row {
    width: 100%;
    max-width:75rem; /* max Width of row, Change to what you like */
    margin:0 auto;
    }
    

Show or Hide columns and content

Sometimes there will be occasions when you wish to show or hide content. This is often the case for mobile devices where some content you might want to hide on small screens. This can be done using the following classes. .show-phone .hide-phone, .show-tablet .hide-tablet, .show-laptop .hide-laptop, .show-desktop .hide-desktop

These classes work within the exact device widths as shown in the second lot of media queries below.

Media Queries Used

          
    /* Media Queries used for mobile first device size classes */
    
    /* For phone classes */
    @media only screen { } /* For mobile styles */

    /* For Tablet Classes */
    @media only screen and (min-width: 48em) { } /* min-width 768px for Tablet styles */

    /* For Laptop Classes */
    @media only screen and (min-width: 62em) { } /* min-width 992px for laptop to small desktop styles /*
    
    /* For Desktop Classes */
    @media only screen and (min-width: 75em) { } /* min-width 1200px medium to large Desktop styles /*

    /* Others Media Queries used for devices with min and max used with show and hide classes*/

    @media only screen and (max-width: 47.938em) { } /* Up to 767px */

    @media only screen and (min-width: 48em) and (max-width: 61.938em) { } /* 768px to 991px */

    @media only screen and (min-width: 62em) and (max-width: 74.938em) { } /*  992px to 1199px */

    @media only screen and (min-width: 75em) { } /* 1200px and up */

    /* Used to stack columns 30em and under with cute-100 */
    @media only screen and (max-width: 30em){ } /* max-width 30em 480px */
          
        

Responsive Images

Add the class .responsive-img to your image to make it responsive.

Compatibility

Works on Chrome, Safari, Firefox, Opera, IE9+

If you need Cute grids to work in IE8 then this is possible with using respond.js polyfill for media css3 Media queries and REM-unit-polyfill for rem untis .

Licence

Released under the MIT License. Use it for Personal or Commercial projects. Enjoy!

Support

If you have any questions or suggestions regarding cute grids or anything else please don't hesitate to get in touch with me here or connect with me on twitter @dazzy_web.

Documenation

• Getting Started
• Grid Columns Device width settings
• Behaviour of columns
• 100% width for small mobile devices
• Column height clearing issues
• Offsets
• Changing cute column order
• Resetting Columns
• Nesting Cute Columns
• Center Cute Columns
• Column top & bottom Padding
• Row width
• Media Queries Used
• Responsive Images
• Compatibility
• licence
• Support