/scss/main/_variables.scss
/scss/main/_dimentions.scss
/scss/main/_helpers.scss
/scss/components/_media.scss
Special classes for adaptive markup
| .hide-md-under | {display: none; } | for window width <= md |
| .hide-md-over | {display: none; } | for window width > md |
| .show-md-under | {display: block; } | for window width <= md |
| .show-md-over | {display: block; } | for window width > md |
| .right-md | {float: right; } | for window width > md |
| .center-md | {display: table; margin-left: auto; margin-right: auto; } | for window width<= md |
| .text-md-right | {text-align: right; } | for window width > md |
| .text-md-center | {text-align: center; } | for window width <= md |
General classes
| Size and space | |
|---|---|
| .full | Set up with=100% |
| .nm | No margin |
| .np | No padding |
| .m{...8} | Margin {number} * 16px |
|
.ml{...8}
.mr{...8} .mt{...8} .mb{...8} |
Margin left, right, top, bottom
additionally: .ml => margin-left: 8px; etc. |
| .p{...8} | Padding {number} * 16px |
|
.pl{...8}
.pr{...8} .pt{...8} .pb{...8} |
Padding left, right, top, bottom
additionally: .pr => padding-right: 8px; etc. |
| .box0 | Box0 (padding: 8px) |
| .box | Box (padding: 16px) |
| .box2 | Box2 (padding: 32px) |
| .square > .inner | Square responsive block |
| .flex-middle | Align content to center using flex |
| .flex-valign | Vertical and left align using flex |
| .flex-valign-end | Vertical and right align using flex |
| .flex-bottom | Align content to bottom and left using flex |
| .flex-bottom-right | Align content to bottom and right using flex |
| Position | |
|---|---|
| .fixed | Fixed |
| .absolute | Absolute |
| .relative | Relative |
| .fill .top-left .top-right .bottom-left .bottom-right | Positions for .fixed and .absolute |
| .z0 .z1 .z100 .z1000 .z9999 | Z-index for .fixed and .absolute |
| Edges | |
|---|---|
| .rounded-{1...10} | Border radius, PX |
| .shadow-{1...5} | Shadow |
| .border .border-right .border-left .border-top .border-bottom | Border (default -> width: 1px, color: light) |
|
.nb
.nb-l .nb-r .nb-t .nb-b |
No border on all, left, right, top, bottom |
| .circle | Circle (always is an inline-block) |
| Images / Video | |
|---|---|
| .background | Background (center, no-repeat) |
| .background.bg-left | Background (left, no-repeat) |
| .background.bg-right | Background (right, no-repeat) |
| .cover | Background (cover) |
| .image | Wrapper for img tag |
| .hover-scale | Scale effect fot img (wrapper) |
| .video.ratio-16-9 .video.ratio-4-3 | Responsive wrapper for iframe tag |