Macian

The basic border classes are b* with the second character determining all (border-style), top (border-top-style etc.), right, bottom, and left: ba, bt, br, bb, and bl in order.

Border style for dotted, dashed, solid, and none are bso, bsd, bss, and bn in order.

Border radius can be set with .br* where * is a number from 0-6, or brf for 100% border radius.

Border width can be set with .bw* where * is a number from 0-5.

Border width can be set to 0 for individual sides via b*-0 where * is one of t, r, b, or l;

Most of these classes have responsive versions by appending -s, -m, or -l to them, though not all.

 <p class="ba br4 bw3">This paragraph has a relatively thick border with rounded corners.</p>
 <p class="bso bw1">This paragraph is bordered with a thin, dotted line.</p>
 <p class="br-s bl-s bt-m bb-m ba-l bw1-s bw2-m bw3-l">This paragraph is bordered differently at different sizes.</p>

Margins can be set with the m* class, where * is a number between 0-7.

You can also set the margin for a specific side with the m[side][size] classes, where [side] is either t (top), b (bottom), r (right), or l (left), and [size] is a number between 0-7.

Convenience classes are also available to set the horizontal margins, and the vertical margins with mh* (margin horizontal) class, and the mv* class, again, where * is a number between 0-7.

Responsive versions for all the margin classes are available by appending -s, -m, or -l to the classes.

 <div class="m5">This div has margin all the way around.</div>
 <div class="mt1 mr2 mb3 ml4">This div has different sized margins on each side.</div>
 <div class="mv2-m mv3-l mh4-m mh5-l">This div has different horizontal and vertical margins depending on the screen-size.</div>

Padding can be set with the p* class, where * is a number between 0-7.

You can also set the padding for a specific side with the p[side][size] classes, where [side] is either t (top), b (bottom), r (right), or l (left), and [size] is a number between 0-7.

Convenience classes are also available to set the horizontal padding, and the vertical padding with ph* (padding horizontal) class, and the pv* class, again, where * is a number between 0-7.

Responsive versions for all the padding classes are available by appending -s, -m, or -l to the classes.

 <div class="p5">This div has padding all the way around.</div>
 <div class="pt1 pr2 pb3 pl4">This div has different sized padding on each side.</div>
 <div class="pv2-m pv3-l ph4-p ph5-l">This div has different horizontal and vertical padding depending on the screen-size.</div>

Box shadow styles can be set with the bs* classes.

Box shadows can be set for indivisual sides by setting * to t, b, r, or l. They can be set on all sides via bsa, or set to none via bsn.

Inset shadows can be set with the bsi* classes, where * is one of the side-letters specified above.

Both the bs and bsi classes can be appended with lr or tb to put the shadows on the horizontal or vertical sides.

Responsive versions of all the classes can be set by appending -s, -m or -l.

 <p class="bsa">This paragraph has a box shadow applied on all sides.</p>
 <p class="bsia">This paragraph has an inset box shadow on all sides.</p>
 <p class="bslr bsitb">This paragraph has a box shadow on the horizontal, and inset shadow on the vertical.</p>
 <p class="bst-s bsib-s bsr-m bsil-m bsb-l bsit-l">This paragraph has different shadows depending on the size of the screen.</p>

Foreground color classes (text colors), are prefixed by cl-*. For named colors (red, ylw, grn, blu, noir, and blanc), the cl- prefix may be ommited. Background color classes, are prefixed by bg-*. Border color classes, are prefixed by b-*.

What follows the prefix can be either a number (0-f) for greyscale colors, or one of red, grn, ylw, blu, noir, or blanc. For text/foreground colors, the cl- may be ommited.

The named colors may also be specifically applied to the <progress /> element.

 @color: #f8f8f8 @name: Blanc
 @color: #202020 @name: Noir
 @color: #2E76C3 @name: Blu
 @color: #FFD954 @name: Ylw
 @color: #EB4E32 @name: Red
 @color: #83BD75 @name: Grn

 <p class="cl-2 bg-d ba b-blu">This is an example paragraph</p>
 <p class="grn bg-red ba b-1">Another example paragraph</p>
 <progress max="100" value="40" class="m1 ylw bg-blu b-red">40%</progress>

Cursor styles can be set with the below styles.

 .c-a      {cursor: alias}
 .c-a-s    {cursor: all-scroll}
 .c-c      {cursor: copy}
 .c-c-m    {cursor: context-menu}
 .c-c-r    {cursor: col-resize}
 .c-cl     {cursor: cell}
 .c-d      {cursor: default}
 .c-e-r    {cursor: e-resize}
 .c-ew-r   {cursor: ew-resize}
 .c-g      {cursor: grab}
 .c-ging   {cursor: grabbing}
 .c-h      {cursor: help}
 .c-m      {cursor: move}
 .c-n      {cursor: none}
 .c-n-d    {cursor: no-drop}
 .c-n-r    {cursor: n-resize}
 .c-na     {cursor: not-allowed}
 .c-ne-r   {cursor: ne-resize}
 .c-nesw-r {cursor: nesw-resize}
 .c-nw-r   {cursor: nw-resize}
 .c-nwse-r {cursor: nwse-resize}
 .c-pg     {cursor: progress}
 .c-pt     {cursor: pointer}
 .c-r-r    {cursor: row-resize}
 .c-s-r    {cursor: ns-resize}
 .c-s-r    {cursor: s-resize}
 .c-se-r   {cursor: se-resize}
 .c-sw-r   {cursor: sw-resize}
 .c-v-t    {cursor: vertical-text}
 .c-w      {cursor: wait}
 .c-w-r    {cursor: w-resize}
 .c-x      {cursor: crosshair}
 .c-z-i    {cursor: zoom-in}
 .c-z-o    {cursor: zoom-out}

It's possible to set the display style with the following styles, generally following a d* format, where * is the display value.

Responsive versions of these classes are available.

 .dn  {display: none}
 .db  {display: block}
 .dt  {display: table}
 .di  {display: inline}
 .dtr {display: table-row}
 .dtl {display: table-cell}
 .dib {display: inline-block}
 .dit {display: inline-table}
 .dtc {display: table-column}
 .drg {display: table-row-group}
 .dcg {display: table-column-group}

The opacity for an element can be set with the o* classes, where * is a number from 0-9, or f.

 <div class="o5">This is slightly transparent.</div>
 <div class="o7">This is slightly less transparent.</div>
 <div class="o9">This is almost opaque.</div>

Macian provides utility classes for creating CSS Grids.

First, give the parent element the g class, to set the display to grid. The grid row gap can be set with grg*, the column gap with gcg*, or the grid gap with gg*, with the * in all cases being a number between 0-7. Note, currently the template rows and columns need to be specified seperately.

To justify items, use the gji*, to justify self, use gjs*, to align items use gai*, to align self use gas*, and to align content, use gac*, the * in all cases being either s for start, e for end, or c for center. The gac* classes can additionally have a * equal to t for stretch, sa for space-around,sbforspace-between, orseforspace-evenly`.

Responsive versions of all the grid classes are available.

<div class="g gg2 gaie" style="grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);">
    <div class="ba" style="grid-column-start: 1; grid-row-start: 1;">This is a grid item.</div>
    <div class="ba" style="grid-column-start: 2; grid-row-start: 2;">This is a grid item.</div>
    <div class="ba" style="grid-column-start: 3; grid-row-start: 3;">This is a grid item.</div>
</div>

Outline, resize, and appearance for inputs can be set to none via the on, rn, and an classes.

 <input type="text" placeholder="This text input has the default appearance." />
 <input type="text" placeholder="This text input has had outline, resize, and appearance set to none." class="on rn an" />

To set the position of an element, use the ps* class, where * is one of s, a, r, or f, for static, absolute, relative, and fixed, respectively.

To set top, bottom, left, and right, you can use the t*, b*, l*, and r* classes, where * is a number between -2 and 2.

To set all four sides to 0, use the a0 class.

Responsive versions are available for these classes.

 <div class="sw5 sh5 bg-blu psa t1 r1"></div>
 <div class="sw5 sh5 bg-grn psa b1 l1"></div>

To set the z-index for an element, use the z* class, where * is a number between 1-9.

Responsive versions are available for these classes.

 <div class="sw5 sh5 rf bg-blu z3-m z2-s"></div>
 <div class="sw6 sh5 rf bg-grn z2-m z1-s"></div>
 <div class="sw7 sh5 rf bg-red z1-m z3-s"></div>

To float an element to the right, use rf, and to float to the left, use lf.

There are responsive versions of these classes.

 <div class="rf">To the right</div>
 <div class="lf">To the left</div>

To set the background-size of an element, you can use either the cover or contain classes.

To set the background position of an element, you can use the bgp-* classes, where * is either c, t, r, b, l, for center center, top center, center right, bottom center, and center left, respectively.

To designate how overflow is to be handled, you can use the o*, ox*, and oy* classes, where * is either a, v, h, or s, for auto, visible, hidden, or scroll, respectively.

There are responsive versions of these classes available.

 <div class="sh7 oys-m oyh-s">
     <div class="sh7">This div is just as tall as it's parent</div>
     <div class="sh7">This div is also, so you had to scroll to get here, but couldn't when the viewport is small.</div>
 </div>

Use vl, vm, vt, and vb to set the vertical-align property of an element to either baseline, middle, top, or bottom, respectively.

There are responsive versions of these classes.

 <table>
    <tr class="sh6">
        <td class="vl">a baseline aligned item</td>
        <td class="vm">a middle aligned item</td>
        <td class="vt">a top aligned item</td>
        <td class="vb">and a bottom aligned item</td>
    </tr>
</table>

You can style a table to only have borders at the row lines with the rl class. Currently, you also have to specify that the table have no borders too.

 <table class="bn rl">
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
    </tbody>

By default, ul and ol lists have the list-style-position set to inside, but you can explicitely set this via the lspi class.

You can designate the list style type with the ls* classes, where * is one of

• z for decimal-leading-zero
• ur for upper-roman
• lr for lower-roman
• ua for 'upper-alpha'
• la for lower-alpha
• c for circle
• s for square
• n for none

 <ul class="lsz">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
 </ul>
 <ul class="lsur">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
 </ul>
 <ul class="lslr">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
 </ul>
 <ul class="lsua">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
 </ul>
 <ul class="lsla">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
 </ul>
 <ul class="lsc">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
 </ul>
 <ul class="lss">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
 </ul>
 <ul class="lsn">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
 </ul>

To make an element the height of the screen, you can use vh. Similarly, you can set height to auto with ha, and to 100% with hf.

To set height in percentages, you use h* where * is 1-9.

To set height in vh units, use vh* where * is 1-9.

To set height in em units, use sh* where * is 1-7.

To set min- or max-height in percentages, use nh* or xh* where * is 1-9.

All of these classes have responsive options, and can be appended with -s, -m, or -l.

 <div class="vh">This div is the same height as the viewport.</div>
 <div class="nh5-s nh6-m nh7-l">This div has different min-heights at different screen sizes</div>
 <p class="sh4">This paragraph should be twice as tall as the normal text (2em)</p>

To make an element the width of the screen, you can use vw. Similarly, you can set width to auto with wa, and to 100% with wf.

To set width in percentages, you use w* where * is 1-9.

To set width in vw units, use vw* where * is 1-9.

To set width in em units, use sw* where * is 1-7.

To set min- or max-width in percentages, use mw* or xw* where * is 1-9.

All of these classes have responsive options, and can be appended with -s, -m, or -l.

 <div class="vw">This div is the same width as the viewport.</div>
 <div class="mw5-s mw6-m mw7-l">This div has different min-widths at different screen sizes</div>
 <p class="sw4">This paragraph should be twice as wide as the normal text (2em)</p>

Macian provides a system for laying out your HTML, that will feel very familiar to anyone who has used Bootstrap.

Rows are designated with the r class. Only use rows if you are planning to have multiple columns.

Columns are designated by the c* class, where * is a number between 1-c.

Responsive versions of these classes are available to set different column width depending on screen size.

<div class="r">
    <div class="c4 c4-m c6-s ba">Col 1</div>
    <div class="c4 c4-m c6-s ba">Col 2</div>
    <div class="c4 c4-m cc-s ba">Col 3</div>
</div>

To center divs (or any element that is set to display: block), you can apply the cn class.

There are responsive versions of this class.

 <div class="sh5 sw5 pt3 bg-blu">
    <div class="sh3 sw3 bg-ylw cn p2"></div>
 </div>

You can designate serif, sans-serif, or mono fonts with the srf, sns, and mon classes respectively.

 <p class="srf">Serif font family</p>
 <p class="sns">Sans Serif font family</p>
 <p class="mon">Mono font family</p>

Specify the sixe of your font with the f* class where * is a number 1-6. These sizes naturally correspond to the inherant sizes of their respective heading tags (<h1> === .f1 etc.).

There are responsive versions of these classes.

 <p class="f1">The Brown Fox Jumped Lazily Over the Log</p>
 <p class="f2">The Brown Fox Jumped Lazily Over the Log</p>
 <p class="f3">The Brown Fox Jumped Lazily Over the Log</p>
 <p class="f4">The Brown Fox Jumped Lazily Over the Log</p>
 <p class="f5">The Brown Fox Jumped Lazily Over the Log</p>
 <p class="f6">The Brown Fox Jumped Lazily Over the Log</p>

Specify the line height for your text with (in increasing height) lhs, lht, lhc, and lhd.

There are responsive versions of these classes.

    <p class="lhs">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat culpa, expedita quibusdam esse, sunt et eius, nesciunt beatae asperiores laudantium tempore iusto fugit reprehenderit nihil, eligendi commodi unde. Cum, similique.</p>
    <hr>
    <p class="lht">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat culpa, expedita quibusdam esse, sunt et eius, nesciunt beatae asperiores laudantium tempore iusto fugit reprehenderit nihil, eligendi commodi unde. Cum, similique.</p>
    <hr>
    <p class="lhc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat culpa, expedita quibusdam esse, sunt et eius, nesciunt beatae asperiores laudantium tempore iusto fugit reprehenderit nihil, eligendi commodi unde. Cum, similique.</p>
    <hr>
    <p class="lhd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat culpa, expedita quibusdam esse, sunt et eius, nesciunt beatae asperiores laudantium tempore iusto fugit reprehenderit nihil, eligendi commodi unde. Cum, similique.</p>

Specify normal font-weight with fwn and bold with fwb.

You can also specify numeric font weights with the fw* classes, where * is a number from 1-9.

There are responsive versions of these classes.

 <span class="fwb-m fwn-s">Bold on medium screens, normal on small screens</span>
 <span class="fw9-m fw1-s">Bold on medium screens, normal on small screens</span>

Set the font-style to normal with fn, italic with fi, and to oblique with fo.

 <span class="fi">Italic</span>
 <span class="fo">Oblique</span>

Set the font-variant to small-caps with sc.

 <span class="sc">small caps</span>

Designate the text-align property with aj for justify, al for left, ar for right, and ac for center.

There are responsive versions of these classes.

 <p class="aj">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <hr>
 <p class="ar">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <hr>
 <p class="ac">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

You can apply text-transform properties with cap for captialize, upc for uppercase, and lwc for lowercase.

 <span class="cap">captialize</span>
 <span class="upc">uppercase</span>
 <span class="lwc">LOWERCASE</span>

Letter spacing can be set with the tk, tkt, and tkm classes.

There are responsive versions of these classes.

 <span class="tk">Lorem Ipsum</span>
 <span class="tkt">Lorem Ipsum</span>
 <span class="tkm">Lorem Ipsum</span>

Apply strikethrough, underline or overline text-decoration properties with ts, tu, or to.

Apply an underline on hover with the hvl class, or remove text decoration on hover via hvn;

 <span class="ts">Lorem Ipsum</span>
 <span class="tu">Lorem Ipsum</span>
 <span class="to">Lorem Ipsum</span>
 <span class="hvl">Lorem Ipsum</span>
 <span class="ts hvn">Lorem Ipsum</span>

You can set the optimum width for a paragraph via the m class. A slightly wider variant is the mw class, and a slightly thinner variant of this is the mn class.

There are responsive versions of these classes.

 <p class="m">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <hr>
 <p class="mw">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <hr>
 <p class="mn">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>