HTML elements

Set default styles and format css elements to act the same accross browsers.

# Base

The Base is highly recommended as it sets global styling and renders html elements more consistently. It includes:

• Normalize.css (render all elements in line with modern standards)
• box-sizing: border-box; (remove uneeded mathematics when setting sizes).
• Font smoothing (render to antialiasing for better readibilty)
• Global properties (set the body of your application)

Loop config includes base by default. In manual mode add the mixin Base()

body Config

• props CSS properties
• smoothing Enable font smoothing

body: (
  props: (
    font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif),
    font-size: 1em, // 16px
    line-height: 1.375,
    color: #444,
  ),
  smoothing: true,
),

Update values

Change the props value or add new ones at your own will.

$ooLoop: ooSet('body.props.color', #333); // update value
$ooLoop: ooSet('body.props.backgroundColor', #f8f8f8); // add new one

// or
$ooLoop: ooAdd('body.props', (
  background-color: #f8f8f8, //add new one
  color: #333, // will overwride current value
));

//or
$ooLoop: ooPipe(
  _set('body.props.color', #333),
  _add('body.props', (
    background-color: #f8f8f8,
  ))
);

// or
@include ooCreate((
  body: (
    props: (
      background-color: #f8f8f8,
      color: #333,
    )
  )
));

// or in Manual mode
@include Base((
  props: (
    background-color: #f8f8f8,
    color: #333,
  )
));

/* generating */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1em;
  line-height: 1.375;
  color: #333;
  background-color: #f8f8f8;
}

Add only the properties you want to the body

$ooLoop: ooSet('body.props', (
  font-family: Robotto,
  color: #333,
  background-color: #f8f8f8,
));

/* generating */
body {
  font-family: Robotto;
  color: #333;
  background-color: #f8f8f8;
}

# Content

Sets global content elements such as paragraph, anchor and list as well as the hr tag

Loop config includes content by default. In manual mode add the mixin Content()

paragraph Config

• props CSS properties

paragraph: (
  props: (
    margin-top: .5em,
    margin-bottom: 1.125em,
  )
)

anchor Config

• props CSS properties
• states State element properties

anchor: (
  props: (
    color: this('palette.primary'),
    text-decoration: none,
  ),
  states: (
    hover: (
      color: ooDarken(this('anchor.props.color'), 12%),
    ),
    focus: this('anchor.states.hover'),
  )
)

list Config

• props CSS properties

list: (
  props: (
    margin-top: .5em,
    margin-bottom: 1.125em,
    padding-left: 1.1em,
  )
)

hr Config

• props CSS properties

hr: (
  props:(
    margin: 1rem auto,
    border-bottom: 1px solid #cdcdcd,
  )
)

# Headings

Sets HTML headings from <h1> through <h6>. Unlike Loop v0.4, the font-size is relative to the default 100% and the rem() function is used to facilitate the conversion from pixel to rem unit.

Loop config includes headings by default. In manual mode add the mixin Headings()

headings Config

• props CSS properties
• sizes H1 to H6 sizes
• classesList of heading that will be used as a class (optional)

headings: (
  props: (
    margin-top: .67em,
    margin-bottom: .45em,
    line-height: 1.125,
  ),
  sizes: (
    h1: 2rem,    // equivalent to 32px
    h2: rem(26), // 26px will generate 1.625rem
    h3: rem(22), // 22px will generate 1.375rem
    h4: rem(18), // 18px will generate 1.125rem
    h5: 1rem,    // equivalent to 16px
    h6: rem(14), // 14px will generate 0.875rem
  ),
)

Responsive headings

The value of each size can contain a responsive map based on the name of the breakpoints from the Loop config. rt means the root value. Remember that Loop is using the mobile first approach (from root to small, medium, large screens)

$ooLoop: ooSet('headings.sizes', (
  h1: (
    rt: 2rem,   // root value
    md: 2.5rem, // md screen value
    lg: 3rem,   // lg screen value
  ),
  h2: (
    rt: rem(26), // root value
    sm: rem(28), // sm value
  ),
  h3: rem(22),
  h4: rem(18),
  h5: 1rem,
  h6: rem(14),
));

/* will generate */
h1 {
  font-size: 2rem;
}
@media (min-width: 60em) {
  h1 { font-size: 2.5rem; }
}
@media (min-width: 80em) {
  h1 { font-size: 3rem; }
}

h2 {
  font-size: 1.625rem;
}
@media (min-width: 37.5em) {
  h2 { font-size: 1.75rem; }
}

h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

Headings classes

List each heading you would like to use as an utility class by adding the property classes to the headings map.

$ooLoop: ooAdd('headings', (
  classes: ('h2', 'h3'), // creating .h2 & .h3
));

<h2 class="h3">A h2 heading with the look of an h3</h2>
<span class="h2">A text with the style of an h2</span>

Use what you need << >> Set Components