MiniTypro

Minimalistický CSS framework.

Pozor! Repozitář byl přesunut z Gistu na Github a MiniTypro bylo přepsáno do LESS. Pokud máte raději čisté CSS, nemějte strach, CSS verze existuje i nadále.

Použití

MiniTypro je umístěno v jednom jediném CSS souboru a pokryvá základní normalizaci, typografii, grid, úpravu formulářových prvků a také zkrášluje tabulky.

Přilinkujte soubor css/minitypro.css do vašeho dokumentu.

<link rel="stylesheet" type="text/css" href="css/minitypro.css">

V případě LESS verze použijte soubor less/minitypro.less.

Grid

Vytvoříte element s třídou .row a v něm další elementy označené třídou .column, které budou reprezentovat jednotlivé sloupce. Pro nastavení šírky sloupců můžete použít předpřipravé třídy, nebo si definovat vlastní ve svém stylopisu. Následující kód vytvoří 2 sloupce, jeden široký 1/4 stránky (25%) a druhý 3/4 (75%) stránky.

<div class="row">
    <div class="column column-1p4">
        <!-- menu -->
    </div>

    <div class="column column-3p4">
        <!-- content -->
    </div>
</div>

V LESS je místo třídy .row připraven mixin .grid-row().

Dostupné jsou tyto třídy pro nastavení šířky sloupce:

CSS třída	LESS mixin	Šířka
`.column-1p4`	`.grid-column-1p4()`	1/4 (25%)
`.column-1p3`	`.grid-column-1p3()`	1/3 (33.33%)
`.column-1p2`	`.grid-column-1p2()`	1/2 (50%)
`.column-2p3`	`.grid-column-2p3()`	2/3 (66.66%)
`.column-3p4`	`.grid-column-3p4()`	3/4 (75%)

Boxy

Přidáním třídy .box můžete vytvořit tzv. boxy. Ty slouží především ke zvýraznění zvolených informací na stránce. Použít je lze např. pro vypsání důležitých informací, nápovědy, oznámení o chybě, apod.

Výchozí .box je zvýrazněn (podbarven) šedou barvou. Pro další typy zvýraznění lze použít některou z následujícíh tříd:

.info (podbarví box modře),
.success (podbarví box zeleně),
.warning (podbarví box žlutě),
.error a .danger (podbarví box červeně)

V LESS lze použít mixin .box(), pro nastavení barvy boxu lze použít mixiny:

.box-info() (podbarví box modře),
.box-success() (podbarví box zeleně),
.box-warning() (podbarví box žlutě),
.box-error() (podbarví box červeně)

Tabulky a formuláře

MiniTypro poskytuje základní styl pro tabulky a formulářové prvky. Stačí k elementu formuláře přiřadit CSS třídu .form, obdobně pro tabulky třídu .table:

<form class="form">
<!-- ... -->
</form>

<table class="table">
    <!-- content -->
</table>

V LESS jsou k dispozici mixiny .form() a .table().

Přizpůsobení

Základní přizpůsobení lze provést přenastavením výchozích proměnných. Výchozí proměnné jsou definovány v souboru less/variables.less. Přizpůsobenou stránku můžete vidět v našem příkladu (HTML příkladu, stylopis).

Příklady použití

MiniTypro se hodí především na jednodušší (jednostránkové) weby. Příkladem takového webu může být např. Transliterace azbuky. Jako další zdroj můžete prozkoumat náš příklad pro CSS, LESS a LESS s přizpůsobením.

Na MiniTypro také staví následující webové stránky: