CONSTRUCT CSS

Yet another CSS framework that follows ITCSS and BEM (BEMIT)

View on Github

Getting Started

Install

Download from Github.

$ git clone https://github.com/makotot/construct.git

Or download directly.

$ wget https://makotot.github.io/construct/css/construct.css

Then import it in your sass file.

@import "path/to/construct";

Or link it in head.

<link rel="stylesheet" href="path/to/construct.scss">

Objects

These are the object lists. All objects are named with prefix o-.

Objects listed here are not documented completely and some objects are not documented in here yet, but will be soon provided.

Grid


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space o-grid__column-3 u-background-base u-color-opposite">
    <div class="u-padding-1">1</div>
  </div>
  <div class="o-grid__column o-grid__column--space o-grid__column-3 u-background-base u-color-opposite">
    <div class="u-padding-1">1</div>
  </div>
  <div class="o-grid__column o-grid__column--space o-grid__column-3 u-background-base u-color-opposite">
    <div class="u-padding-1">1</div>
  </div>
</div>

Inline List


<ul class="o-inline-list">
  <li class="o-inline-list__item">
    <a href="" class="c-link">LINK</a>
  </li>
  <li class="o-inline-list__item">
    <a href="" class="c-link">LINK</a>
  </li>
  <li class="o-inline-list__item">
    <a href="" class="c-link">LINK</a>
  </li>
</ul>

Components

These are the component lists with source code examples. All components are named with prefix c-.

heading

<h1 class="c-heading-1">Heading</h1>
<h2 class="c-heading-2">Heading</h2>
<h3 class="c-heading-3">Heading</h3>
<h4 class="c-heading-4">Heading</h4>
<h5 class="c-heading-5">Heading</h5>
<h6 class="c-heading-6">Heading</h6>

link


<ul class="o-inline-list">
  <li class="o-inline-list__item">
    <a href="" class="c-link">Link</a>
  </li>
  <li class="o-inline-list__item">
    <a href="" class="c-link c-link--disabled">Link disabled</a>
  </li>
</ul>

quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. source


<blockquote class="c-quote">
  <span class="c-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</span>
  <cite class="c-quote__citation">source</cite>
</blockquote>

button

Button


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <a href="" class="c-button">Button</a>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <a href="" class="c-button c-button--primary">Button</a>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <a href="" class="c-button c-button--secondary">Button</a>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <a href="" class="c-button c-button--disabled">Button</a>
  </div>
</div>
<div class="o-grid o-grid--space u-padding-top-1">
  <div class="o-grid__column o-grid__column--space">
    <a href="" class="c-button c-button--full-width">Button</a>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <a href="" class="c-button c-button--primary c-button--full-width">Button</a>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <a href="" class="c-button c-button--secondary c-button--full-width">Button</a>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <a href="" class="c-button c-button--disabled c-button--full-width">Button</a>
  </div>
</div>
<div class="u-padding-top-1">
  <a href="" class="c-button c-button--full-width">Button</a>
</div>

badge

Badge


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <span class="c-badge">Badge</span>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <span class="c-badge c-badge--primary">Badge</span>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <span class="c-badge c-badge--secondary">Badge</span>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <span class="c-badge c-badge--reverse">Badge</span>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <span class="c-badge c-badge--disabled">Badge</span>
  </div>
</div>

note

Integer volutpat sagittis metus, a efficitur turpis pretium in.

Duis consequat turpis quis elit tristique, et egestas odio luctus. Aliquam auctor volutpat commodo. In lobortis mollis hendrerit. Duis id tristique augue. Nullam condimentum iaculis finibus. Donec sed dolor metus.


<div>
  <div class="c-note">
    <h1 class="c-note__head c-heading-4">Integer volutpat sagittis metus, a efficitur turpis pretium in.</h1>
    <p class="c-note__body">Duis consequat turpis quis elit tristique, et egestas odio luctus. Aliquam auctor volutpat commodo. In lobortis mollis hendrerit. Duis id tristique augue. Nullam condimentum iaculis finibus. Donec sed dolor metus.</p>
  </div>
</div>
<div class="u-margin-top-1">
  <div class="c-note">
    <p class="c-note__body">Duis consequat turpis quis elit tristique, et egestas odio luctus. Aliquam auctor volutpat commodo. In lobortis mollis hendrerit. Duis id tristique augue. Nullam condimentum iaculis finibus. Donec sed dolor metus.</p>
  </div>
</div>

table

Thead	Thead
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Mauris eu magna at diam viverra tristique vel interdum metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Mauris eu magna at diam viverra tristique vel interdum metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Mauris eu magna at diam viverra tristique vel interdum metus.


<table class="c-table">
  <thead>
    <tr>
      <th class="c-table__head">Thead</th>
      <th class="c-table__head">Thead</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="c-table__data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
      <td class="c-table__data">Mauris eu magna at diam viverra tristique vel interdum metus.</td>
    </tr>
    <tr>
      <td class="c-table__data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
      <td class="c-table__data">Mauris eu magna at diam viverra tristique vel interdum metus.</td>
    </tr>
    <tr>
      <td class="c-table__data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
      <td class="c-table__data">Mauris eu magna at diam viverra tristique vel interdum metus.</td>
    </tr>
  </tbody>
</table>

list

Suspendisse rhoncus ligula at justo rutrum, quis consectetur metus ornare.
Proin sit amet sapien sagittis orci interdum eleifend.
Nunc facilisis enim quis odio tempor, eget dignissim elit sodales.
- Ut vitae ex ullamcorper, pulvinar lorem porttitor, bibendum dolor.
- Ut euismod leo ultrices rutrum venenatis.
Aenean placerat tortor ut ante condimentum scelerisque.


<ul class="c-list">
  <li class="c-list__item">Suspendisse rhoncus ligula at justo rutrum, quis consectetur metus ornare.</li>
  <li class="c-list__item">Proin sit amet sapien sagittis orci interdum eleifend.</li>
  <li class="c-list__item">
    Nunc facilisis enim quis odio tempor, eget dignissim elit sodales.
    <ul class="c-list">
      <li class="c-list__item">Ut vitae ex ullamcorper, pulvinar lorem porttitor, bibendum dolor.</li>
      <li class="c-list__item">Ut euismod leo ultrices rutrum venenatis.</li>
    </ul>
  </li>
  <li class="c-list__item">Aenean placerat tortor ut ante condimentum scelerisque.</li>
</ul>

card

card heading

Aenean placerat tortor ut ante condimentum scelerisque.

Mauris tristique massa eu leo blandit, quis consectetur dui gravida.


<div class="c-card">
  <div class="c-card__head">
    <h1 class="c-heading-5">card heading</h1>
  </div>
  <div class="c-card__body">
    <p>Aenean placerat tortor ut ante condimentum scelerisque.</p>
    <p>Mauris tristique massa eu leo blandit, quis consectetur dui gravida.</p>
  </div>
</div>

avator


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <figure class="c-avator c-avator--x-small">
      <img src="https://dummyimage.com/200x200/000/fff" alt="dummy" class="c-avator__image">
    </figure>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <figure class="c-avator c-avator--small">
      <img src="https://dummyimage.com/200x200/000/fff" alt="dummy" class="c-avator__image">
    </figure>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <figure class="c-avator">
      <img src="https://dummyimage.com/200x200/000/fff" alt="dummy" class="c-avator__image">
    </figure>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <figure class="c-avator c-avator--large">
      <img src="https://dummyimage.com/200x200/000/fff" alt="dummy" class="c-avator__image">
    </figure>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <figure class="c-avator c-avator--x-large">
      <img src="https://dummyimage.com/200x200/000/fff" alt="dummy" class="c-avator__image">
    </figure>
  </div>
</div>

breadcrumb


<ul class="c-breadcrumb">
  <li class="c-breadcrumb__item"><a href="" class="c-breadcrumb__link">HOME</a></li>
  <li class="c-breadcrumb__item"><a href="" class="c-breadcrumb__link">BREADCRUMB 1</a></li>
  <li class="c-breadcrumb__item"><a href="" class="c-breadcrumb__link">BREADCRUMB 2</a></li>
  <li class="c-breadcrumb__item"><span class="c-breadcrumb__link c-breadcrumb__link--active">BREADCRUMB 3</span></li>
</ul>

input


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <input type="text" class="c-input" placeholder="INPUT">
  </div>
  <div class="o-grid__column o-grid__column--space">
    <input type="text" class="c-input c-input--disabled" placeholder="INPUT DISABLED">
  </div>
</div>

textarea


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <textarea class="c-textarea" placeholder="TEXTAREA"></textarea>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <textarea class="c-textarea c-textarea--disabled" placeholder="TEXTAREA DISABLED"></textarea>
  </div>
</div>

selectbox


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <label class="c-selectbox">
      <select class="c-selectbox__select">
        <option>SELECTBOX OPTION 1</option>
        <option>SELECTBOX OPTION 2</option>
        <option>SELECTBOX OPTION 3</option>
      </select>
    </label>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <label class="c-selectbox c-selectbox--disabled">
      <select class="c-selectbox__select c-selectbox__select--disabled">
        <option>SELECTBOX OPTION 1</option>
        <option>SELECTBOX OPTION 2</option>
        <option>SELECTBOX OPTION 3</option>
      </select>
    </label>
  </div>
</div>

checkbox

CHECKBOX


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <label class="c-checkbox">
      <input type="checkbox" class="c-checkbox__input">
      <span class="c-checkbox__check"></span>
      <span class="c-checkbox__label">CHECKBOX</span>
    </label>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <label class="c-checkbox c-checkbox--disabled">
      <input type="checkbox" class="c-checkbox__input" disabled checked>
      <span class="c-checkbox__check"></span>
      <span class="c-checkbox__label">CHECKBOX</span>
    </label>
  </div>
</div>

radio

RADIO


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <label class="c-radio">
      <input type="radio" class="c-radio__input">
      <span class="c-radio__check"></span>
      <span class="c-radio__label">RADIO</span>
    </label>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <label class="c-radio c-radio--disabled">
      <input type="radio" class="c-radio__input" disabled>
      <span class="c-radio__check"></span>
      <span class="c-radio__label">RADIO</span>
    </label>
  </div>
</div>


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <ul class="c-menu">
      <li class="c-menu__item">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
      <li class="c-menu__item">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
      <li class="c-menu__item">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
    </ul>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <ul class="c-menu">
      <li class="c-menu__item c-menu__item--underline">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
      <li class="c-menu__item c-menu__item--underline">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
      <li class="c-menu__item c-menu__item--underline">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
    </ul>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <ul class="c-menu c-menu--frame">
      <li class="c-menu__item c-menu__item--underline">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
      <li class="c-menu__item c-menu__item--underline">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
      <li class="c-menu__item c-menu__item--underline">
        <span class="c-menu__inner">MENU ITEM</span>
      </li>
    </ul>
  </div>
</div>

media-card

HEADING

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim justo nisi. Duis varius ex libero, quis lacinia tortor luctus eu.

HEADING

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim justo nisi. Duis varius ex libero, quis lacinia tortor luctus eu.

HEADING

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim justo nisi. Duis varius ex libero, quis lacinia tortor luctus eu.


<div>
  <div class="o-media-card c-media-card">
    <div class="o-media-card__thumb">
      <figure class="c-avator">
        <img src="https://dummyimage.com/200x200/000/fff" alt="dummy" class="c-avator__image">
      </figure>
    </div>
    <div class="o-media-card__main">
      <div class="o-media-card__head">
        <h6 class="c-heading-6">HEADING</h6>
      </div>
      <div class="o-media-card__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim justo nisi. Duis varius ex libero, quis lacinia tortor luctus eu.</p>
      </div>
    </div>
  </div>
</div>
<div class="u-margin-top-1">
  <div class="o-grid o-grid--space">
    <div class="o-grid__column o-grid__column--space">
      <div class="o-media-card o-media-card--stack c-media-card">
        <div class="o-media-card__main">
          <div class="o-media-card__head">
            <h6 class="c-heading-6">HEADING</h6>
          </div>
          <figure>
            <img src="https://dummyimage.com/300x50/000/fff" alt="dummy" class="c-image c-image--full-width">
          </figure>
          <div class="o-media-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim justo nisi. Duis varius ex libero, quis lacinia tortor luctus eu.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="o-grid__column o-grid__column--space">
      <div class="o-media-card o-media-card--stack c-media-card">
        <figure>
          <img src="https://dummyimage.com/300x50/000/fff" alt="dummy" class="c-image c-image--full-width">
        </figure>
        <div class="o-media-card__main">
          <div class="o-media-card__head">
            <h6 class="c-heading-6">HEADING</h6>
          </div>
          <div class="o-media-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim justo nisi. Duis varius ex libero, quis lacinia tortor luctus eu.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

pagination


<div class="c-pagination">
  <a href="" class="c-pagination__controller c-pagination__controller--disabled">Prev</a>
  <ol class="c-pagination__list u-display-none--small">
    <li class="c-pagination__item">
      <span class="c-pagination__link c-pagination__link--current">1</span>
    </li>
    <li class="c-pagination__item">
      <a href="" class="c-pagination__link">2</a>
    </li>
    <li class="c-pagination__item">
      <a href="" class="c-pagination__link">3</a>
    </li>
    <li class="c-pagination__item">
      <a href="" class="c-pagination__link">4</a>
    </li>
    <li class="c-pagination__item">
      <a href="" class="c-pagination__link">5</a>
    </li>
  </ol>
  <a href="" class="c-pagination__controller">Next</a>
</div>

tag

TAG


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <span class="c-tag">TAG</span>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <span class="c-tag c-tag--primary">TAG</span>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <span class="c-tag c-tag--secondary">TAG</span>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <span class="c-tag c-tag--reverse">TAG</span>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <span class="c-tag c-tag--disabled">TAG</span>
  </div>
</div>

loader


<div class="o-grid o-grid--space">
  <div class="o-grid__column o-grid__column--space">
    <div class="c-loader c-loader--small"></div>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <div class="c-loader"></div>
  </div>
  <div class="o-grid__column o-grid__column--space">
    <div class="c-loader c-loader--large"></div>
  </div>
</div>

divider


<hr class="c-divider">

Utilities

Below in are utilities. All utilities are prefixed with u-.

Class	Style
`u-align-*`	`text-align: ` `vertical-align: `
`u-background-*`	`background-color: *`
`u-clearfix`	`clearfix`
`u-color-*`	`color: *`
`u-display-*`	`display: *`
`u-flex-*`	`flex-wrap: ` `justify-content: `
`u-float-*`	`float: *`
`u-font-*`	`font-weight: *`
`u-margin-*`	`margin: ` `margin-top: ` `margin-right: ` `margin-bottom: ` `margin-left: *`
`u-padding-*`	`padding: ` `padding-top: ` `padding-right: ` `padding-bottom: ` `padding-left: *`
`u-position-*`	`position: *`