CSS Classes & Mixins

ignition comes with some helpful classes you can use or completely ignore. They are very useful and can save you time while creating your websites.

For the grid and layout classes see these articles.

Below are the classes added to ignition that you can use. Most are self explanatory.

Typography Classes

/*------- Text Classes. Found in Typography.scss --------*/ 
.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

.text-left {
   text-align: left;
}

.text-justify{
   text-align: justify;
}

//only center the headings found inside an element
.heading-center {
   h1, h2, h3, h4, h5, h6 {
      text-align: center;
      }
}

Display Classes

These classes can hide content. The screen-reader-text is very useful. It can hide content on a screen but a screen reader will still read the content. It can also be useful is circumstances where you want to hide something but still need it on the page.

The clear fix is included but not really needed anymore as floats are not being used to make columns. Thew clear fix fixed display issues on collapsed elements.

/*------- Display Classes --------*/ 

.hidden, .hide {
  display: none;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; 
}

.clear:before,
.clear:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear:after {
  clear: both;
}

Image classes

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;

  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    position: relative;
  }

}

.cover-image {
  width: 100%;
  display: block;

  img {
    object-fit: cover;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
  }
}

.background-image

This class will allow you to make a foreground image element fill a div like a background image set to cover. Here is the css found in media.scss

To use it just add a div.background-image inside an element. Make sure the element has a position of relative or the whole page will get covered! You may also need to add a height to the element.
Check it out below.

<div class="some-element layout-center-content" style="position: relative; height: 200px;">
  <div class="background-image">
    <img src="https://placekitten.com/g/500/300" />
 </div>
 <p style="color: white;">Hello World!</p>
</div>

Above I set the parent element to have a set height as well as positioned it relative. I added text on top set to white. I also used the class layout-center-content to center my content. You can learn more about that in the layout section.

IE has been set to automatically turn the image into a background image on the parent div so it will work in IE too!

.cover-image

Will add an image set to cover, but unlike background=image it will not be absolute and text cannot be on top.

<div class="some-element" style="position: relative;">
  <div class="cover-image">
    <img src="https://placekitten.com/g/200/300" />
 </div>
 <p>Hello World!</p>
</div>