Introduction

TARDIG contains 4 main features: normalize.css, a mobile-first grid system, a modular type scale, and development assistance tools.

Other features include media objects, image helper classes, and responsive embeds.

All classes with a breakpoint segment can also be written as a static class, omitting the breakpoint segment to use that styling across all screen sizes. For example, .col-xs-10 could be written as .col-10.

Throughout this documentation, within class names, -** represents the breakpoint segment of a class. -* represents the desired effect. For example, the 6 in .col-sm-6 would mean that the column spans 6 available columns.

The Grid Overview

<div class="container"><div class="row padded"><div class="col-4 col-md-2">...</div>
<div class="col-8 col-md-10">...</div>
</div>
<div class="row padded"><div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
</div>
<ul class="block-grid-xs-6 padded"><li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div class="row padded"><div class="col-0 col-xs-4">...</div>
<div class="col-12 col-xs-8">...</div>
</div>
</div>

Rows must be wrapped in a .container to preserve alignment and paddings. Only columns should be direct children of rows, and columns should contain the content of the page.

Block grids are supported, and .block-grid-**-* acts as a row. If you use the block grid as an unordered list, a classless li element acts as a column. Alternatively, you can make a div a block grid, and the direct children should all have the class .block-item. A block grid can be as many columns as your grid supports. By default, that is 12.

In both block grids and standard grids, columns that exceed the number of available columns will wrap to the next line. Columns do not have to equal the total amount either.

Pushes, pulls, offsets, padding, and display classes are also included with responsive and static versions.

Containers, rows, columns, block grids, and block items (or <li>s) are given box-sizing: border-box to maintain proper sizing. Unlike most other frameworks and boilerplates, no other element has been modified. This makes it easier to have full control of your design.

Typography Overview

Fonts are sized in TARDIG using rems and a modular scale. By default, the scale's ratio is 1.125. A p tag is sized at 1rem and each larger font (h6 through h1) is sized up by multiplying by 1.125. Fonts smaller than 1rem are divided by 1.125.

Line heights are calculated using a baseline height. By default, this is 1.5rem, but can be changed in the Sass version.

Also included are static and responsive classes for alignment, decorations, and transforms. Each of these uses the prefix .text, optionally followed by a breakpoint segment, and the effect suffix.

Decoration and transform classes can be cleared on larger screens using -nodecoration and -notransform

Development Assistance Overview

Browsers such as Chrome and Firefox have their own built-in developer tools, but sometimes they aren't the easiest way to find errors. TARDIG has a small set of tools created to work side by side with these other tools and make the developer's life easier.

Currently, there are 2 tools for developers. These are not to be used in production, and should always be added to the body tag. If you plan on keeping one running for a while, you can put it in your code, but if you're looking for a small error in positioning it is recommended that you include it in something like Chrome's DevTools. Doing that ensures that it won't be saved to your file.

First is a grid underlay, using the class .development-grid. What this does is gives the container element a background of the grid, calculated by your own custom grid or using the default 12-column grid. Gutters are highlighted in pink. Since this is a background, all of your content will be given an opacity, but will still be fully functional and on top.

The other developer tool is called codeframing using the class .development-codeframe. This outlines the container (red), the rows and block-grids (green), and the columns and block-items (blue). This is to be used in conjunction with an element inspector, and is meant to make weirdly rendered elements easier to find. You can also use this to code a basic wireframe, hence the name.

Containers

Grid sections must be wrapped in a .container. A container is fluid by default, but by adding the class .responsive to either a parent element or the container itself, it becomes responsive. To help maintain DRY markup, it is recommended to add the .responsive class to the body tag if you use multiple containers.

Containers are not nestable due to padding issues. The container is given a left and right padding equal to the gutter width.

Breakpoints exist at 480px, 768px, 992px, and 1200px. For the standard fluid grid, the width of the container is 100% - (gutter * 2). This is also true for screens smaller than 480px.

If you're using a responsive grid, the container sizes are:

<div class="container">...</div>

<body class="responsive"><div class="container">...</div>
</body>

Rows

Rows are direct children of containers. Only columns should be direct children of rows. They provide negative left and right margins equal to the gutter width to ensure that non-grid items line up with grid items.

You can nest rows thanks to fixed-pixel gutters. Nested rows should reside inside columns, as the negative margin offsets the padding for the gutters.

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

Columns

By default, the grid has 12 available columns. You can change this in the Sass version by going into the grid folder and editing the _variables.sass file.

Columns are written with the syntax .col-**-*, and are written mobile-first.

If you only define, for example, a medium screen column (.col-md-*) then smaller viewports will make that column span 100% of the container.

Columns don't need to add up to the maximum number of available per row (12). If they fall short, they will simply leave a space to the right spanning the remainder of the columns. Alternatively, if you exceed the maximum, each grouping will wrap to the next line as a whole.

To hide a column on smaller (or larger) screens, you can use the number 0 at the suffix of the class to give it a 0% width and no display.

<div class="container"><div class="row"><div class="col-0 col-sm-4">...</div>
<div class="col-sm-8">...</div>
<div class="col-sm-6">...</div>
<div class="col-sm-3">...</div>
</div>
</div>

In the above example, on screens smaller than 480px, there will be three rows with the content at 100% width, the first one in the markup being hidden. On small screens and up (480px+), there will be two rows, the second spanning 9 columns of the available 12.s

Block Grids

Block grids are shorthand grids with equal-width columns and are perfect for things like image galleries or thumbnails. They also contain static and responsive classes.

The syntax is slightly different for block grids. They start with the class .block-grid-**-* typically on an unordered list, as a row. Like regular rows, block grids can be nested within columns, or other block grids. If you use the block grid in a div, the children (or columns) should have the class .block-item.

The number at the end of the row class should be the number of items in each row, rather than how many columns it will span. For example, .block-grid-4 will have 4 items per row on all screen sizes. The number of items can be from 1 to the maximum number of columns in your grid.

<ul class="block-grid-2 block-grid-sm-4"><li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

<div class="block-grid-2 block-grid-sm-4"><div class="block-item">...</div>
<div class="block-item">...</div>
<div class="block-item">...</div>
<div class="block-item">...</div>
</div>

Block grids also support classes for extended elements. By using the class .block-grid-2, you can double the width of a block list item.

<ul class="block-grid-6"><li>...</li>
<li>...</li>
<li class="block-item-2">...</li>
<li>...</li>
<li>...</li>
</ul>

Gutters

Gutters are the spacing between column groups. By default, they are 15px on either side. This is the same size as the padding on the container and negative margins on the rows. You can alter this using Sass by going into the grid folder and editing the variable $gutter in the _variables.sass file.

Nesting

Rows and block grids can be nested within columns or block items. This is because they use the same size negative margin as the padding for the gutters to line up properly.

Alignment & Ordering

TARDIG supports pushes, pulls, and offsets using static or responsive classes.

Offsets replicate "missing" columns, allowing you to center or right-align content to the grid.

Pushes and pulls use absolute positioning to push or pull content by a set number of columns. You can use this for content ordering, keeping your markup SEO-friendly by placing more important content first while maintaining your design, or moving things based on screen dimensions.

<div class="row"><div class="col-md-9 push-md-3">...</div>
<div class="col-0 col-md-3 pull-md-9">...</div>
</div>

This is the layout this docs page is written in. The first column section is 12 columns on screens below 768px, and 9 columns pushed right by 3 columns on screens larger than 768px.

The second column section is hidden on screens smaller than 768px, and 3 columns wide on screens larger than 768px pulled to the left by 9 columns. This creates a sidebar with the content in the markup first.

Display

TARDIG has static and responsive classes for all hide and show options. As columns have their own class to hide and show them, and are block level elements by default, it is recommended to use this for rows, containers, or non-grid items.

<p class="hide show-md-inline-block">...</p>

The above will hide a paragraph on screens smaller than 768px, and display them as inline-block elements on screens 768px and larger.

Flexbox

You can use the class .flex-grid as a container element, or inside of a container to create a flexbox grid. The big difference between this and a standard grid is that you can simply use the class .col to define a column section, and flexbox will calculate the width for you. You can still use the standard grid classes to determine a specific width.

<div class="flex-grid"><div class="row"><div class="col-2">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
</div>

The above example will display a grid with the first column spanning 2 columns, and the next two will spread evenly across the remaining space (totalling five columns each).

Font Sizing

Fonts are sized using a modular scale and rems. You can set the base font size in pixels in your own custom stylesheet or in the custom partial sheet provided in the typography folder. Browsers typically default this at 16px.

By default, the scale has the ratio of 1.125, but you can change that using the _variables.sass file in the typography folder. This means that your p will be 1rem, or your base font size. Each size up is multiplied by 1.125, or whatever you change the custom ratio to.

The .lead class increases the font size to the next level in the scale, while .small or the element small decrease the size by next level down the scale.

You can also override this using your own custom sheets or the blank custom sheet provided if using a scale doesn't work for you.

Line Heights

Line heights are based on a baseline height. By default, that is 1.5.

Like font sizes, line heights can be overwritten in a custom stylesheet.

Text Alignment

There are 9 text alignment classes. The "last" classes are experimental classes and may not always work.

The class .text-push-up is used to add a negative top margin equal to the bottom margin. It should only be used preceeding other text blocks, otherwise it will hide some of the content.

Text Decoration

There are 8 different static and responsive decoration classes.

Text Transform

There are 6 transformation static and responsive classes.

Grid Underlay

The grid underlay can be used by adding the class .development-grid to either the body tag, a parent to the container(s), or a container itself. How this works is it gives all the child elements a transparency and the container gets a background image of the grid using pink as the default color for gutters. Note: if you have a background image on your container, TARDIG uses !important to override that.

Don't worry if you change your number of columns in the grid. Grid Underlay will automatically recalculate the number of columns for you.

Codeframe

Codeframing uses the class .development-codeframe and can be used for multiple things. You can set heights on specific elements and use it as a coded wireframe using the grid system. You can also use it in conjunction with DevTools to find errors more easily.

Rather than strictly using DevTools to find errors, the outlining in codeframe will help to instantly find any and all issues, which you can experiment with in DevTools to find a solution.

Responsive Embeds

To make your embeds responsive, wrap the embedded element in a container with the class .embed-container. By default, this is a 4:3 ratio. To change it to a 16:9 ratio, use the class .embed-container-16x9.

If you're using vanilla CSS for your project, to create a new ratio, you can create a class with the prefix .embed-container- and any suffix you'd like. This will take all of the styles from the default embed container code and the only line you'll have to add is a bottom margin of the height divided by the width (as a percentage).

<div class="embed-container-custom">// Bottom padding is equal to width / height * 100 * 1%</div>

Alternatively, if you're using Sass, you can call the mixin embedRatio(width, height) and it will automatically create the class of .embed-container-(width)x(height).

<div class="embed-container-12x10">// +embedRatio(12, 10)</div>

Media & Flag Objects

There are 3 ways to include media objects. Flexbox Media Objects, Media Objects, and Flag Objects.

Standard media objects are recommended for most cases, but if you need vertical alignment, you'll need to use the flexbox media object or for older browser support, flag objects.

Media Object

Media objects are wrapped in the container .media, with the children .media-left and/or .media-right and .media-body .

.media-left and .media-right MUST be placed before the .media-body element due to the floating nature of media objects.

The media left and right classes can be attatched directly to the image (or whatever media object you use), as well as to a parent container.

<div class="media"><img class="media-left" src="...">
<img class="media-right" src="...">
<div class="media-body"><p>...</p>
</div>
</div>

Standard media object

This is a standard media object. This utilizes the text-push-up class on the paragraph tag to tighten it up to the heading tag. The object is floated to the left while the body content is a block-level element to the right. This is useful for blog posts, forums, or anything your heart desires.

Reversed media object

This is a reversed media object, with the object floated right and the content in a block-level element to the left.

Double sided media object

This is a media object with objects floated on both sides. Due to the floating nature of the objects, both of them must be placed before the body content in the markup for the standard media object.

Flag Object

The flag object is a little more versatile than the media object due to it being created with CSS tables, meaning that you can vertically align the objects, body, or both. Because of this, the object should be placed inside a container rather than the class being attached to the object itself.

Because the flag object uses a table-based format, the left object should should be placed before the body content in the markup and the right object should be placed after.

<div class="flag"><div class="flag-left flag center"><img src="...">
</div>
<div class="flag-body"><p>...</p>
</div>
<div class="flag-right"><img src="...">
</div>
</div>

Standard flag body

Flag objects, like media objects can have the object on either the left or the right side. The difference is that the right-aligned object should be placed AFTER the body content in the markup. Also, the object should be placed inside a container to allow for vertical alignment.

Middle-aligned object, standard flag body

Flag objects can use the classes .flag-top, .flag-middle, or .flag-bottom on either the container or any of the elements inside to vertically align either all of the content or specific elements.

Right/bottom-aligned object, standard flag body

This is to showcase that flag objects can be placed to right and bottom-aligned. Only use flag objects if you plan on vertically aligning the objects, since table layouts are generally frowned upon.

Flex Media Object

The flexbox media object is very similar to the flag object with the class names of the media object. The two big syntax differences are the addition of the prefix flex- to the container element and the vertical alignment classes with the prefix media.

Like the flag object, you can put the vertical alignment classes on either the container element, or directly on the object or content elements. Like the media object, you can place classes directly on the object without using a container for them. Content should always be wrapped in a container.

<div class="flex-media"><img class="media-left" src="...">
<div class="media-body"><p>...</p>
</div>
<img class="media-right media-bottom" src="...">
</div>

Flexbox media object

Flexbox media objects are kind of a perfect mix of media objects and flag objects. Like flag objects, they can be vertically aligned, and the markup includes the left object above the body content, and the right object below. If you include the vertical alignment class (this time using the prefix media instead of flag) to the object.

Double sided flexbox media object

This example uses the left and right tags on the images as well as the vertical alignment tags. This example would work great for blockquotes, with quotation mark icons for your objects.

Nesting

You can nest one media/flag object inside of another. Any of them are nestable interchangably. Below is an example of a standard media object nested inside of a flexbox media object.

<div class="flex-media flex-middle"><img class="media-left" src="...">...</img>
<div class="media-body"><p>...</p>
<div class="media"><img class="media-left" src="...">...</img>
<div class="media-body"><p>...</p>
</div>
</div>
</div>
</div>

Top-level media object (flex)

As you can see, the nested media object is placed inside of the body content of the flex media object. This allows for proper alignment. This flex object is given the class media-middle to middle-align all elements within the object.

2nd tier media object (standard)

As this is a nested media object, the media-middle class styles have been overwritten for this object. Everything is top-aligned as they should be for a standard media object.

Images

Images can be made better for your responsive design. By adding the class .img-responsive it is given a max-width of 100% of it's parent, with an auto height to keep it proportional.

To center images smaller than the width of the parent, you can add the class .img-center. Alternatively, you can expand small images to 100% of the parent width by adding the class .img-expand.

Using Sass Variables

Each component folder includes a file called _variables.sass. You can easily change the values of any major part of TARDIG, like grid size or the typographic scale. Because it is written modularly, each variables partial is sent to a global variables file, which makes the variables work across all files in the boilerplate while still keeping them well-organized.

Using Sass Mixins

Like variables, each component folder has a file called _mixins.sass that creates the functionality of the boilerplate. Each one can be edited to fit your needs, but the ones that will be the most useful to your custom sheets are the breakpoint mixins.

To use these mixins in indented Sass you can write +break-**, and then write your custom styles indented below it, rather than typing out @media only screen and (min-width: *).