Examples

Pintsize is super flexable! Here are some basic examples of how the grid works. All examples are based on the default config.

Basic grid

Column size is dictated by the class structure .col__*viewport*--*number*. The viewport value is taken from the variables $md and $lg defined in the config. The number value is how many columns you would the column to span - Use this if you'd like complete control over the layout

  • Edge and Internet Explorer 8+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex">

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--8">
            <div class="demo--content-block"></div>
        </div>

        <div class="col col--4">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--3">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--3">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--3">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--9">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Auto flex grid

Adding .flex--auto to the parent .flex element will dictate that the layout is depended on content. Elements that don't fit on the .flex row collapse onto their own row and resize to fit the .flex width - resize your browser to see the disired effect

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--auto">

        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex flex--auto">

        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex flex--auto">

        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Using media queries

An example of using breakpoints in the grid config section. Classes with the viewport variable $lg will overide $md and $md overide $sm - resize your browser to see the disired effect

  • Edge and Internet Explorer 9+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex">

        <div class="col col--12 col__md--6 col__lg--3">
            <div class="demo--content-block demo--class-display"></div>
        </div>
        <div class="col col--12 col__md--6 col__lg--3">
            <div class="demo--content-block demo--class-display"></div>
        </div>
        <div class="col col--12 col__md--6 col__lg--3">
            <div class="demo--content-block demo--class-display"></div>
        </div>
        <div class="col col--12 col__md--6 col__lg--3">
            <div class="demo--content-block demo--class-display"></div>
        </div>

    </div>
                    
                    

Nesting

Columns can be nested with using strict classes and flex auto as long as the markup is as below.

  • Edge and Internet Explorer 8+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
<div class="flex">

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

        <div class="demo--content-block">

            <div class="flex">

                    <div class="col col col--6"><div class="demo--content-block"></div></div>
                    <div class="col col col--6"><div class="demo--content-block"></div></div>

            </div>

        </div>


    </div>

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

        <div class="demo--content-block">

            <div class="flex">

                    <div class="col col col--6"><div class="demo--content-block"></div></div>
                    <div class="col col col--6"><div class="demo--content-block"></div></div>

            </div>

        </div>


    </div>

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

        <div class="demo--content-block">

            <div class="flex">

                    <div class="col col col--6"><div class="demo--content-block"></div></div>
                    <div class="col col col--6"><div class="demo--content-block"></div></div>

            </div>

        </div>


    </div>

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

        <div class="demo--content-block">

            <div class="flex">

                    <div class="col col col--6"><div class="demo--content-block"></div></div>
                    <div class="col col col--6"><div class="demo--content-block"></div></div>

            </div>

        </div>


    </div>

</div>
                    
                    

Offsetting

  • Edge and Internet Explorer 8+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex">

        <div class="col col--2 col__offset--10">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--3 col__offset--9">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--4 col__offset--8">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--5 col__offset--7">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--6 col__offset--6">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Reordering columns

Columns can be reordered from their natural flow buy using specific classes

Flex first

Adding .col--first will dictate that column to be first child of the parent element.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
1
2
3
4
5
6
                    
    <div class="flex">

        <div class="col col--2">
            <div class="demo--content-block">1</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">2</div>
        </div>
        <div class="col col--2 col--first">
            <div class="demo--content-block">3</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">4</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">5</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">6</div>
        </div>

    </div>
                    
                    

Flex last

Adding .col--last will dictate that column to be last child of the parent .flex element.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
1
2
3
4
5
6
                    
    <div class="flex">

        <div class="col col--2">
            <div class="demo--content-block">1</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">2</div>
        </div>
        <div class="col col--2 col--last">
            <div class="demo--content-block">3</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">4</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">5</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">6</div>
        </div>

    </div>
                    
                    

Flex reverse

Adding .flex--reverse to the parent .flex element will dictate that the column order in the DOM be reversed.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
1
2
3
4
5
6
                    
    <div class="flex flex--reverse">

        <div class="col col--2">
            <div class="demo--content-block">1</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">2</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">3</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">4</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">5</div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block">6</div>
        </div>

    </div>
                    
                    

Aligning columns

Columns can be reordered from their natural flow buy using specific classes

Around

Adding .flex--around to the parent .flex element will dictate that the columns are evenly distributed inside the parent .flex element with equal space around them.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--around">

        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Between

Adding .flex--between to the parent .flex element will dictate that the columns are evenly distributed inside the parent .flex element; first item is on the start line, last item on the end line.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--between">

        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Center

Adding .flex--center to the parent .flex element will dictate that the columns are packed towards the center of the parent .flex element.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--center">

        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Start

Adding .flex--start to the parent .flex element will dictate that the columns are packed towards the start of the parent .flex element.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--start">

        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

End

Adding .flex--end to the parent .flex element will dictate that the columns are packed towards the end of the parent .flex element.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--end">

        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--2">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Justifying columns

Columns can be reordered from their natural flow buy using specific classes

Justfy top

Adding .flex--top to the parent .flex element will dictate that the columns are vertically aligned to the top of the parent .flex element.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--top">

        <div class="col col--6">
            <div class="demo--content-block demo__justify">

            </div>
        </div>

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Justify middle

Adding .flex--middle to the parent .flex element will dictate that the columns are vertically aligned to the middle of the parent .flex element.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--middle">

        <div class="col col--6">
            <div class="demo--content-block demo__justify">

            </div>
        </div>

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>

    </div>
                    
                    

Justify bottom

Adding .flex--bottom to the parent .flex element will dictate that the columns are vertically aligned to the bottom of the parent .flex element.

  • Edge and Internet Explorer 10+
  • Google Chrome 23+
  • Mozilla Firefox 34+
  • Apple Safari 26+
  • Opera 24+
                    
    <div class="flex flex--bottom">

        <div class="col col--6">
            <div class="demo--content-block demo__justify">

            </div>
        </div>

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>

    </div>