inline-blocks for columns.flexbox have a lot of issues on IE 10 & 11. | class | Media-query | Screen width |
|---|---|---|
| .xx-* | @media screen and (min-width: 5em) | ≥ 80px |
| .xs-* | @media screen and (min-width: 22.5em) | ≥ 360px |
| .s-* | @media screen and (min-width: 35.5em) | ≥ 568px |
| .m-* | @media screen and (min-width: 48em) | ≥ 768px |
| .l-* | @media screen and (min-width:64em) | ≥ 1024px |
| .xl-* | @media screen and (min-width: 80em) | ≥ 1280px |
.xs0 to hide 1th column on screens ≥ 360px. .s-6 to show it and make it 6x wide on screens ≤ 568px .s-gap-1 to make 4th column 1x gap, and .l-gap-0 to clear it..xs0.s-6 .m0 .l-3
.s-gap-1 .m-2 .l-2 .l-gap-0
.rtl on .grid to reverse columns.grid_l or .grid_r or .grid_c to align columns.grid .col system, and additional .form class. It can be applied to whole form or any .grid inside it. ( .form class affecting on all inner.col blocks).col class can be applied directly on inputs, selects and textareas. It works fine with simple one line forms: .grid & .col classes.
We use standart HTML select with appearance: none; rule. and .svg arrow background.
Use .v_top class on label for correct vertical-align relative to textarea.
.form_group and .form_line can contain any textual inputs, buttons and selects. .form_group can contain textareas. .clr_ok to any element in .form_group
Fill color
Outline buttons with .brdr class
We using two color modifiers: ._light and ._dark
Table wthout any classes have no borders:
| First Name | Last name | Year |
|---|---|---|
| Barton | Fink | 1991 |
| Sundance | Kid | 1969 |
| David | Aaronson | 1984 |
Adding outer border to table: ._brdr
| First Name | Last name | Year |
|---|---|---|
| Barton | Fink | 1991 |
| Sundance | Kid | 1969 |
| David | Aaronson | 1984 |
Vertical borders table: ._brdr_v
| First Name | Last name | Year |
|---|---|---|
| Barton | Fink | 1991 |
| Sundance | Kid | 1969 |
| David | Aaronson | 1984 |
Horizontal borders table: ._brdr_h
| First Name | Last name | Year |
|---|---|---|
| Barton | Fink | 1991 |
| Sundance | Kid | 1969 |
| David | Aaronson | 1984 |
Also we can use any combinations of outher .brdr , horisontal ._brdr_v and vertical ._brdr_h borders. Or use ._brdr_full for fully bordered table.
| First Name | Last name | Year |
|---|---|---|
| Barton | Fink | 1991 |
| Sundance | Kid | 1969 |
| David | Aaronson | 1984 |
Use .tr_hover for tr hovering
| First Name | Last name | Year |
|---|---|---|
| Barton | Fink | 1991 |
| Sundance | Kid | 1969 |
| David | Aaronson | 1984 |
Use .td_hover for td hovering
| First Name | Last name | Year |
|---|---|---|
| Barton | Fink | 1991 |
| Sundance | Kid | 1969 |
| David | Aaronson | 1984 |
And CSS tables: .table._brdr._brdr
Use <h1> - <h6> or .hdr.h1 - .hdr.h6 for headings.
<small> is used for secondary text.
Default font-size is 16px, with line-height of 1.4em
We use default for HTML5 inline elements: <strong>, <small>, <em>, <u>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis <strong> for bold text et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur <small> for small text mus. <u> tag for underline ullamcorper nulla non metus auctor <em> for italic text. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
._txt_r for right aligned text
._txt_l for left aligned text
._txt_c for center aligned text
._txt_j for justify aligned text
._txt_lower for right aligned text
._txt_upper for right aligned text
._txt_caps for right aligned text
li elements used in navigation (menus, crumbs etc.) and in content [class*="content"] li rule for style content elementscontent as classname or it`s part.Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.