thebaine

Give your front-end development toolkit a bump with Thebaine.

Thebaine (paramorphine), also known as codeine methyl enol ether, is an opiate alkaloid, its name coming from the Greek Θῆβαι, Thēbai (Thebes), an ancient city in Upper Egypt. A minor constituent of opium, thebaine is chemically similar to both morphine and codeine, but has stimulatory rather than depressant effects.

Thebaine, unlike its namesake, is a lightweight, mobile-first grid system written in Sass.

While ready to use out-of-the-box, Thebaine is fully customizable; define your own breakpoint sizes and column amounts with ease. Combine the flexibility of Thebaine with either Normalize.css or the YUI3 reset (both are optional and built-in) and build on top of a solid foundation without the bulk of fully-featured frameworks. We've even included a Gruntfile that takes care of building Thebaine once you've configured it to meet your needs.

Thebaine is released under the MIT license.

Written in Sass Thebaine We heart Grunt

Is Thebaine a good fit for your front-end development needs? We hope so. If not, drop us a line and let us know what you think would make it better.

Download

Thebaine is hosted in our Gitlab repository, so please feel free to either download the latest version as a zip file or clone the project locally using Git. You may also download Thebaine via Bower using the bower install thebaine-gs command.

Download Thebaine
thebaine¦gs v1.1.2
matt@op-mba ~🍔 git clone http://gitlab.opiatenumedia.net/thebaine/thebaine-gs.git

Getting Started

Once you've downloaded Thebaine, you'll find the compiled and compressed version, thebaine.min.css, in the src directory. There is also a compiled, uncompressed, version in the css subdirectory.

If Thebaine's default configuration meets your needs, simply copy either the compressed or uncompressed version in to your project, reference it via LINK tag or the @import CSS at-rule, and be sure to adhere to the following guidelines:

HTML5 Doctype

As with any other modern CSS grid system, Thebaine makes use of elements that require the HTML5 Doctype. Please ensure that it is at the top of all pages in your project.


<!DOCTYPE html>
<html lang="en">
...
</html>
				

Viewport Meta Tag

Tp ensure proper rendering of your pages across devices of various viewport widths, please add the following meta tag to the HEAD of all pages in your project.


<meta name="viewport" content="width=device-width, initial-scale=1">
				

A basic page, demonstrating the above and a basic grid, is included with thebaine.

Documentation

By default, Thebaine is a 12 column grid with breakpoints at 568, 768, 1024 and 1280 pixels.

If you prefer to use a fluid grid, which remains at 100% page width at all times, use .tb-container-fluid class instead. A fluid container comes in particularly handy when used with Thebaine's cells with constrained aspect-ratios.

Are you looking to replace a larger, fully-featured, framework with Thebaine? Adjusting the available breakpoints, columns and other settings will allow you to emulate the behavior of grid systems found in existing frameworks. All adjustable settings are detailed in the Sass & customizing Thebaine section of the documentation.


<div class="tb-container">
  <div class="tb-strut">
    <div class="tb-c-md-8-12">
      Left Column
    </div>
    <div class="tb-c-md-4-12">
      Right Column
    </div>
  </div>
</div>
				Basic Thebaine grid structure
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-1-12
.tb-c-sm-11-12
.tb-c-sm-2-12
.tb-c-sm-10-12
.tb-c-sm-4-12
.tb-c-sm-8-12
.tb-c-sm-6-12
.tb-c-sm-6-12

Nesting Grids

Grids may be nested by adding a new .tb-strut to an existing column. Like its parent grid, a nested grid should occupy no more than the maximum number of columns available, or wrapping will occur.


<div class="tb-strut">
  <div class="tb-c-sm-4-12">
    Left, 4col
  </div>
  <div class="tb-c-sm-8-12">
    Left, 8col
    <div class="tb-strut">
      <div class="tb-c-sm-6-12" style="min-height: 50px; background: #999999; border: 1px solid #c0c0c0;">
        Nested grid, 6col
      </div>
      <div class="tb-c-sm-6-12" style="min-height: 50px; background: #999999; border: 1px solid #c0c0c0;">
        Nested grid, 6col
      </div>
    </div>
  </div>
</div>
				Nested grid example.
Left, 4col
Left, 8col
Nested grid, 6col
Nested grid, 6col

Push/Pull Column Ordering

Push and pull classes are available for use, and allow you to reorder your cells, enabling you to ensure search engines spider site content, and not design elements first.

Syntax:

.tb-c-<breakpoint>-push-<cols>-<total_cols>
.tb-c-<breakpoint>-pull-<cols>-<total_cols>


<div class="tb-strut">
  <div class="tb-c-sm-8-12 tb-c-sm-push-4-12">
    Right, 8col Push-4<br>
  </div>
  <div class="tb-c-sm-4-12 tb-c-sm-pull-8-12">
    Left, 4col Pull-8<br>
  </div>
</div>
				Basic push/pull example.
Right, 8col Push-4
Left, 4col Pull-8

Column Offsets

Adding offsets allows you to increase the gutter placed between columns in a strut. Each offset unit in equal to 1 column, so be sure that the number of columns and any offsets you use are equal or less than the total number of columns or wrapping will occur.

Syntax:

.tb-c-<breakpoint>-off-<cols>-<total_cols>


<div class="tb-strut">
  <div class="tb-c-sm-9-12 tb-c-sm-off-1-12">Left, 9col +1 offset</div>
  <div class="tb-c-sm-2-12">Right, 2col</div>
</div>
				Column offset example.
Left, 9col +1 offset
Right, 2col

Utility Classes & Clearing

Thebaine includes utility classes that allow you to control the visibility of columns, or just about any anything else that will accept a class, based on breakpoints.

Syntax:

.tb-v-<breakpoint>-<block|inline>
.tb-iv-<breakpoint>

There will be times when grids are unable to properly align due to the amount of content held within them. In a case like this, use the included responsive utility classes, in conjunction with the .clear class to maintain grid structure.


<div class="tb-strut">
  <div class="tb-c-sm-4-12">Left, 12col +1 offset</div>
  <div class="tb-v-sm-block" style="padding: 0 15px; background: #ffff00;">add .clear class here and it only applies to the "sm" breakpoint.</div>
  <div class="tb-c-sm-8-12">Right, 3col</div>
</div>
				Show column only on mobile devices.
Left, 4col
Hello, I'm only visible on devices with a viewport of no more than 586px
Right, 8col

Constrained Aspect Ratio

Combining a fluid container with the included ratio classes allow you to build grids that take up 100% of the browser's viewport and maintain a specific aspect ratio among all of your columns.

Aspect ratios of 1:1, 4:3 and 16:9 are available for use out-of-the-box.

(resize your browser to watch the columns scale and maintain their aspect-ratio.)


<div class="tb-container-fluid">
  <div class="tb-strut">
    <div class="tb-c-sm-3-12 tb-ratio block-1">
      <div class="tb-ratio-container"></div>
      <div class="tb-ratio-1-1"></div>
    </div>
    <div class="tb-c-sm-3-12 tb-ratio block-2">
      <div class="tb-ratio-container"></div>
      <div class="tb-ratio-1-1"></div>
    </div>
    <div class="tb-c-sm-3-12 tb-ratio block-3">
      <div class="tb-ratio-container"></div>
      <div class="tb-ratio-1-1"></div>
    </div>
    <div class="tb-c-sm-3-12 tb-ratio block-4">
      <div class="tb-ratio-container"></div>
      <div class="tb-ratio-1-1"></div>
    </div>
  </div>
</div>Basic constrained aspect ratio example.

Sass & Customizing Thebaine

All of Thebaine's customizable settings are located in sass/thebaine/_vars.scss:


// thebaine general settings
$tb-vars: (
   "namespace"  : "tb"            // (string)               prefix added to most class names
  ,"foundation" : ""              // (normalize|yui|<null>) css reset to include with grid system
) !default;

// grid-specific settings
$tb-grid: (
   "grid-gutter"  : 15px          // (string)     left/right margin applied to grid cells
  ,"grid-sizes"   : (12)          // (int)        number of grid cols, separate multiple grids with commas
  ,"grid-extend"  : false         // (true|false) extend cell styling to mobile
  ,"grid-pos"     : true          // (true|false) include grid positioning classes
  ,"grid-off"     : true          // (true|false) include grid offsets
) !default;

// responsive breakpoints
$tb-breakpoints: (
   ""   : ""                      // default (mobile)
  ,"sm" : 568px
  ,"md" : 768px
  ,"lg" : 1024px
  ,"xl" : 1280px
);
					

$tb-vars

namespace

Defines a prefix that is used with most class names to avoid conflicts with frameworks you may be already using in a project.

foundation

Include either Normalize.css or YUI3 Reset as a foundation. Thebaine does not include a foundation by default.

$tb-grid

grid-gutter

Defines the right/left margin applied to columns

grid-sizes

Number of grid columns to use. You may define multiple grid sizes here, if desired.

grid-extend

Generates column widths for mobile devices. Use this option if you do not want columns to stack on mobile devices.

grid-pos

Generates column push/pull classes. Defaults to true.

grid-off

Generates column offsets. Defaults to true.

$tb-breakpoints

This Sass map is used to define the name and width of each breakpoint used by thebaine.

While you have the ability to create an unlimited number of breakpoints, we suggest using 3-4. Keep in mind that quite a bit of CSS in generated for each breakpoint, so you are increasing the size of Thebaine with each one defined.

Compiling Thebaine with Grunt

Thanks to Grunt, The Javascript Task Runner, compiling a custom version of Thebaine is simple. If you haven't used Grunt before, take a look at the getting started guide.

Once Grunt is installed on your system, make any necessary modifications to Thebaine's source files, navigate to the directory containing thebaine and run the default task in the included Gruntfile:

matt@op-mba ~🍔 cd ~/projects/www/thebaine-gs
matt@op-mba ~🍔 grunt

Get in touch

We appreciate all feedback! If you have a question, comment, bug report, or just want to say hello; please feel free to drop us a line.

Please use the contact form to reach us. Every message received is read, and we try to respond to each as soon as possible.

*All fields are required.