[mt] Minithematiq

A minimalist, themable CSS framework

Just the essentials — for when "less is more"

Modular
Include only what you need

Themable
Quick to customize via Sass variables

Responsive Grid
Fluid across desktop & mobile

Prefixed
Won't clash with other styling

Helpers
Lots of helper classes for fast "hacking"

Forms
Handy MtForms.js companion library

Getting Started

Ver 0.9.2

Welcome to "Minithematiq" (MT). This framework came together over the course of a few side-projects, e.g. MattMade.me. It should play nice on all modern browsers. As an example, this entire page is pure MT — no extra CSS. While the docs here may be a little sparse, you can always do the ol' Inspect Element for more detail. If you find MT useful, even as a learning exercise, awesome!

A: Grab & Run

Download your .css theme of choice from the css/ folder and include it in your page. Two sample themes are provided (in addition to the default mt.css. Of course, this method will not allow you to mod the theme easily.

B: Compile Your Own

Grab the contents of _dev/sass/ and compile your own, either using the Ruby Sass command line tool, CodeKit, Grunt, Gulp, etc.

Alternatively, assuming you have NPM and Gulp already installed, you can clone this entire repo — it comes with a Gulp build setup and a LiveReload-enabled local server:

git clone https://github.com/pmdesgn/minithematiq.git
cd minithematiq
npm install
gulp

To compile a minified version for prod, do gulp --type prod.

JavaScript

JS Enhanced JS Required

Certain MT components require, or benefit from, the use of JS, where indicated by the above labels. For these features to work, also include jQuery 2.0+ along with the indicated .js module into your project. Include them as-is, or concat and/or minify as you see fit. CoffeeScript source files are in _dev/coffee/.

The inclusion of mt.js will also net you some additional jQuery functions:


$.getMtMedia() var mediaObj = $.getMtMedia()

Returns an object representing the current state of MT's responsive media thresholds (bool).


$.mtHide() $.mtShow() $( '#my-button' ).mtHide()

Removes or adds the mt-hide class to the selected elements.


Event 'mt-init' $( document ).trigger( 'mt-init' )

If your app is a SPA rendering page sections dynamically, fire this event to re-initialize mt.js at any point.

Customize

The .scss theme files in the _dev/sass/ folder are the the entry-point files for each theme. You can modify one of them, or add your own. A theme file includes all theme-specific variables, followed by MT module imports at the end. The minimum import requirement is the _mt-base.scss partial.

You can customize the look-and-feel of MT quite extensively just by changing the vars. While 100+ vars are exposed, only a dozen or so are "base-level" values (from which other variables inherit). So, it doesn't take a lot of time to create a new theme.

Typography

The required _mt-base.scss partial applies MT's core styling rules -- foreground & background colors, typography, etc. Typography is responsive, meaning, font sizes will be scaled at specific thresholds (per scale vars). When not using typographic tags, those same rules can be achieved by applying the following classes:

mt-h1 mt-h2 mt-h3 mt-h4 mt-p mt-code mt-small

Wrappers

mt-wrapper mt-row

Use mt-wrapper to keep your inner content within a centered, width-limited container, as defined in the var file.

Use mt-row to wrap your grid columns, or anytime you want a block container with a bit of vertical margin.

Fluid Grid

Columns

When specifying column widths, MT references percentages (rather than columns). The following column classes are supported, with the narrowest being 10%, thus allowing up to 10 columns per row:

mt-10 mt-20 mt-25 mt-30 mt-33 mt-40 mt-50 mt-60 mt-66 mt-70 mt-75 mt-80 mt-90

Columns are floated left. The class mt-100 also applies the block property.

Remember to wrap any row of columns inside a div class of mt-row for the grid to "behave" (floats cleared).

mt-10
mt-10
mt-10
mt-10
mt-10
mt-10
mt-10
mt-10
mt-10
mt-10
mt-10
mt-90
mt-20
mt-80
mt-25
mt-75
mt-30
mt-70
mt-33
mt-66
mt-40
mt-60
mt-50
mt-50
mt-100

When working with responsive grids, the "inner gutter" padding sometimes gets in the way. Wrap your columns in mt-row-flush (instead of mt-row) to compensate for the leftmost and rightmost column padding. Alternatively, you can reset padding per column div, via mt-flush, mt-flush-left, or mt-flush-right.

Conversely, you can use mt-gutters to apply standard left/right padding to any non-grid element.

Offsets

You can use mt-tab to apply left margin to your column, which "offsets" it to the right:
mt-tab-33   mt-33
mt-tab-25   mt-50
mt-20
mt-tab-60   mt-20

Responsive Thresholds

MT ships with three basic resolution thresholds, cascading down in this order:
mt-max*Above 960px>
mt-med481 - 959px>
mt-minUp to 480px

Of course, you can adjust these values using the theme's vars.

By controlling your column widths, offsets, and visibility at each resolution, you can achieve most common fluid layouts. The grid classes apply to mt-max by default, so if you want responive behaviors, you only need to define what happens at mt-med and/or mt-min.

For example, you can start your column div at 50% width, then switch to 100% at the mt-med threshold. Resize your browser window to see it in action:

mt-50  mt-med-100
mt-50  mt-med-100
You can specify more than one threshold action. Say, starting at 1/3 wide, switching to 1/2 at mt-med, and finishing at 100% at mt-min:
mt-33  mt-med-50  mt-min-100
Column offsets can be controlled in the same fashion. How about an initial tab of 33%, reduced to 20% at mt-med, then zero via mt-min-100:
mt-tab-33  mt-33  mt-med-tab-20  mt-med-60  mt-min-100

Responsive Visibility

Treat element as initially visible, then hide it at a lower threshold. Resize your browser window to see it in action:
mt-med-hide Ola!
mt-min-hide Ola!
Treat element as initially hidden, then show it at a lower threshold, as a inline, inline-block, or block:
mt-med-show-inline Ola!
mt-min-show-inline Ola!
The hide/show rules carry down to the next threshold. If you want to hide an element at mt-med only, then follow-up with a show rule at mt-min:
mt-med-hide  mt-min-show-inline Ola!
Conversely, for an element to be visible at mt-med only:
mt-med-show-inline  mt-min-hide Ola!

Decorators

Border, Frame, Well, Pill

To apply a border to any element, add class:

mt-border

The following text decorators add extra padding and display properties:

mt-frame mt-well mt-pill

Whithin text paragraphs, you can use them inlined via mt-frame-p, mt-well-p, and mt-pill-p.

You can nest pills and wells inside frames. These do not line-break nicely, so for multi-line cases, I'd use divs or tables:

mt-frame > mt-well-leftframe + well combo
frame + well combomt-frame > mt-well-right
mt-frame > mt-pill-leftframe + pill combo
frame + pill combomt-frame > mt-pill-right

Status Colors

 mt-alert   mt-alert-subtle   mt-success   mt-success-subtle   mt-error   mt-error-subtle 

The non-subtle classes can be combined with frames, wells and pills, like so:

 mt-frame mt-alert   mt-frame mt-success   mt-frame mt-error 
 mt-well mt-alert   mt-well mt-success   mt-well mt-error 
 mt-pill mt-alert   mt-pill mt-success   mt-pill mt-error 

Similarly, the nested combo structures are supported, for example:

frame + wellmt-frame mt-alert > mt-well-right
frame + pillmt-frame mt-alert > mt-pill-right
frame + wellmt-frame mt-success > mt-well-right
frame + pillmt-frame mt-success > mt-pill-right
frame + wellmt-frame mt-error > mt-well-right
frame + pillmt-frame mt-error > mt-pill-right

Bars & Dialogs

Pre-styled color, font, and padding combos, suitable for quick title and footer bars:

mt-bar mt-bar-subtle

Combine with status color classes, for example:

mt-bar mt-sucess mt-bar-subtle mt-success

To create traditional "dialog" layouts, place these inside mt-dialog, combining with any status color class:

<div class="mt-dialog">
    <div class="mt-bar">Dialog Header</div>
    <div class="mt-gutters">Inner content..</div>
    <div class="mt-bar-subtle">Dialog Footer</div>
</div>
mt-dialog
mt-bar

Pad inner content with mt-gutters...

mt-bar-subtle
mt-dialog mt-error
mt-bar

Pad inner content with mt-gutters...

mt-bar-subtle

Tables

mt-table

Type Volume Response Range
Sealed low high
Ported medium medium
Bandpass high low

Horizontal Rules

mt-hr and mt-hr-subtle

Shadows

mt-shadow

Forms

Buttons

MT offers two button styles — a standard button (strong call-to-action), and a "subtle" outlined button. A class of mt-active is provided to manually set/unset :active states.
mt-button mt-button mt-active mt-button mt-disabled
mt-button-subtle mt-button-subtle mt-active mt-button-subtle mt-disabled

Small button variants:

mt-button-sm mt-button-subtle-sm

Fields

The styling kicks in as long as class mt-form is applied to an ascendant element above. By default, text inputs and select fields will take up the full width of their container:

To control the width, contain your fields using MT's grid. If you need to eliminate the default column gutters, you can apply any of the mt-flush... helpers. Inspect this:

Below is an example of a more complex form layout, including other input types. For radios and checkboxes to match the font style of text inputs, add class mt-unlabel to each label. To create an extra label for a collection of "checkables", just add a div with a class of mt-label. Inspect away:

Interests
Skill Level
Subscribe?

You can also create table-based input layouts by placing inputs within table cells. Apply mt-table and mt-form together:

Description Price Qty

If you find yourself doing lots of form-related JavaScript, check out the MtForms.js library.

Custom Inputs

mt.js Required

The following classes will "restyle" standard radios and checkboxes when applied to their parent container. The group must reside under mt-form. Two size variants are provided:

mt-radios mt-checkboxes mt-radios-sm mt-checkboxes-sm
mt-radios
mt-checkboxes-sm

Add the mt-connect modifier to "snap" the inputs into a single shape:

mt-radios mt-connect

Finally, to ensure equal widths, add mt-equal to match widest input in the group, or mt-expand to "stretch" the group to the full width of its parent:

mt-checkboxes mt-equal
mt-radios mt-connect mt-expand

However, if you just want traditional radios and single checks for checkboxes, append class mt-iconic. To stack them, wrap each in mt-input-row:

mt-radios mt-iconic
Yes
No
mt-checkboxes-sm mt-iconic
Option 1
Option 2

Navbars

Nav

mt-nav

Basic nav, supporting one-level of sub-menus. For a somewhat "decorated" example, inspect the nav on this page. The minimal structure looks like this:

<nav class="mt-nav">
    <ul>
        <li class="mt-nav-toggle"><a>Hamburger Icon</a></li>
        <li><a href="#">Root Menu 1</a></li>
        <li><a href="#">Root Menu 2</a></li>
        <li>
            <a>Root Menu 3 with Submenu</a>
            <ul>
                <li><a href="#">Sub-Menu 1</a></li>
                <li><a href="#">Sub-Menu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>
mt.js Enhanced

Include mt.js for rudimentary touch support. Whenever your root menu item contains a sub-menu, do NOT define an href on the root menu to ensure that your nav is mobile-friendly. Also, you can add a mt-nav-toggle list item (with no href), to act as a collapsible "hamburger menu" on mobile -- shrink your browser window to see it in action.

Anchors

mt-anchor-top mt-anchor-bottom
mt.js Required

Apply one of these classes to achieve an "anchored" effect when the element scrolls off-screen. The above nav is a good example.

Popups

Tooltips

mtTips.js Required

A jQuery "tooltip" popup plugin.

Hover Tip 1   Hover Tip 2   Seq Tip 1   Seq Tip 2   Seq Tip 3   « Launch Tip Sequence Demo

mtTips supports tooltips triggered on hover events or programatically, as one tip or a sequence of tips. The plugin will work outside of Minithematiq -- just grab the mtTips.js file from the /js folder and apply your own CSS styling (you can follow _mt-popups.scss).

Elements which are to receive mtTips are expected to contain the mt-tip attribute. An mt-tip-offset attribute is optional, to define an X/Y position offset for a given tooltip:

mt-tip="<numId>; <loc>; <text>; <title>" mt-tip-offset="<x>, <y>"
<span class="dino-tips" mt-tip="1; above; Genus of coelurosaurian theropod dinosaur" mt-tip-offset="0,-20">T. rex</span>

The numId is required within the attribute's value. The remaining data can be supplied via the attribute, or inside the opts.data object being passed into the plugin, along with other possible config properties (see the source).

numId: A unique tip "key", also used to determine display order in sequence mode.

loc: Determines positioning of the popup relative to the element: above, below, left, right. Append :auto for automatic adjustment when the popup finds itself off screen.

text: The main popup content.

title: Optional popup title.

Once one or more such elements exist on the page, you can select them with jQuery and invoke the plugin:

$.mtTips( opts ) $('.dino-tips').mtTips( { mode: 'hover', data: dataObj } )

Modals & Drawers

TODO..

Helpers

A collection of additional "shortcut" classes. Perhaps not "by the book" but pretty invaluable when trying to "hack" some HTML quickly. For the full list, see the actual _mt-helpers.scss partial. Some examples below:
mt-block mt-left mt-clear mt-no-padding mt-margin-top
mt-text-center mt-font-body mt-color-fg mt-bg-color-accent more...

To inverse the default color palette, or to apply a palette variant where the accent color is the background color, try these classes (applicable for foreground and background only):

mt-palette-flip mt-palette-accent