Getting Started

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

B: Compile Your Own

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:

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

JavaScript

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:

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

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

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:

Wrappers

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:

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).

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

Responsive Thresholds

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

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:

Responsive Visibility

Decorators

Border, Frame, Well, Pill

To apply a border to any element, add class:

The following text decorators add extra padding and display properties:

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:

Status Colors

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

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

Bars & Dialogs

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

Combine with status color classes, for example:

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>

Tables

mt-table

Horizontal Rules

Shadows

Forms

Buttons

Small button variants:

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:

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

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:

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

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:

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:

Navbars

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>

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

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

A jQuery "tooltip" popup plugin.

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:

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:

Modals & Drawers

TODO..

Helpers

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):