1. Home
  2. Docs
  3. Simpods MVC
  4. Tutorials
  5. SCSS And CSS
  6. style-mgpd.css

style-mgpd.css

This stylesheet contains utility classes for adjustments to margin, padding, font-size, width, height, etc.

General Format

Most classes take the form of property prefix, side and value.

Margin and Padding

By default these apply to all sides in px

Prefix

mg – Margin
pd – Padding

Side

Add t, b, r or l between the prefix and value to apply the adjustment to the top, bottom, right or left side only respectively.

Units and Values

Pixels

Modifier – none, value only
Available values – integers from 0 to 100, with margin also accepting negative values down to -30

Percent

Modifier – p following value
Available values – 1% and 2% only

Viewport units

Modifier – vw or vh before the value
Available values – integers from 1 to 50

Special Values

auto – Sets value to auto
0imp – Sets value to 0!important for overrides
0auto – Sets value to 0 auto not used with sides

Font size

No defaults – unit must always be specified

Prefix

fs

Units and Values

Viewport units

Modifier – vw or vh before the value
Available values – integers from 1 to 50

em unit

Modifier – em Following value.
Available values – 1 decimal place from 0.1 to 5 with . replaced with – (do not use -0 for integer values)

Width and Height

Prefix

w – Width
h – Height

Values

-auto – Auto
100 – 100%
v 100 – 100 vw or vh (insert prefix in gap)

Non-numeric Classes

These do not follow the general pattern as they do not have numeric values.

Visibility

.hidden – Sets display to none.

Position and alignment

.relative and .absolute – Set position to the respective value.
.aligncenter – Set display to block, left and right margins to auto and text-align to center.

Colour

.white and .white-bg – Set color or background-color to #fff respectively.

Background images

These set the various background- properties

.cover-bg-img – Set -position to center top, -repeat to no-repeat and -size to cover
.center-bg-img – Set -position to center center and -repeat to no-repeat
.contain-bg-img – As .center-bg-img and set -size to contain

Examples

  • .mg10 – 10px margin on all sides
  • .mgr-5 – -5px margin on right
  • .pdvw5 – 5wv padding on all sides
  • .pdt20 – 20px padding on top
  • .pdl1p – 1% padding on left
  • .vw100 – 100vw width
  • .fs2-5em – 2.5em font size
  • .fsvh15 – 15vh font size