Custom classes

System colors

Set the color value using several custom classes. They can also be applied to the links and darken by default when you move the cursor on them.

Change the text color

From fairest creatures we desire increase

That thereby beauty's rose might never die

But as the riper should by time decease

His tender heir might bear his memory:

But thou contracted to thine own bright eyes

From fairest creatures we desire increase

That thereby beauty's rose might never die

But as the riper should by time decease

His tender heir might bear his memory:

But thou contracted to thine own bright eyes

<p class="primary">From fairest creatures we desire increase</p>
<p class="warning">That thereby beauty's rose might never die</p>
<p class="error">But as the riper should by time decease</p>
<p class="info">His tender heir might bear his memory:</p>
<p class="success">But thou contracted to thine own bright eyes</p>

<p class="gray-darker">From fairest creatures we desire increase</p>
<p class="gray-dark">That thereby beauty's rose might never die</p>
<p class="gray">But as the riper should by time decease</p>
<p class="gray-light">His tender heir might bear his memory:</p>
<p class="gray-lighter">But thou contracted to thine own bright eyes</p>

Change the text background

From fairest creatures we desire increase

That thereby beauty's rose might never die

But as the riper should by time decease

His tender heir might bear his memory:

But thou contracted to thine own bright eyes

From fairest creatures we desire increase

That thereby beauty's rose might never die

But as the riper should by time decease

His tender heir might bear his memory:

But thou contracted to thine own bright eyes

<p class="primary-bg">From fairest creatures we desire increase</p>
<p class="warning-bg">That thereby beauty's rose might never die</p>
<p class="error-bg">But as the riper should by time decease</p>
<p class="info-bg">His tender heir might bear his memory:</p>
<p class="success-bg">But thou contracted to thine own bright eyes</p>

<p class="gray-darker-bg">From fairest creatures we desire increase</p>
<p class="gray-dark-bg">That thereby beauty's rose might never die</p>
<p class="gray-bg">But as the riper should by time decease</p>
<p class="gray-light-bg">His tender heir might bear his memory:</p>
<p class="gray-lighter-bg">But thou contracted to thine own bright eyes</p>

Additional sizes

Set the size with the help of several custom classes. They also can be applied to other elements of <FlexKit/>.

Classes for the text size

From fairest creatures we desire increase

That thereby beauty's rose might never die

But as the riper should by time decease

His tender heir might bear his memory:

But thou contracted to thine own bright eyes

<p class="larger">From fairest creatures we desire increase</p>
<p class="large">That thereby beauty's rose might never die</p>
<p>But as the riper should by time decease</p>
<p class="small">His tender heir might bear his memory:</p>
<p class="mini">But thou contracted to thine own bright eyes</p>

Fixed text sizes

12px

14px

16px

18px

24px

32px

48px

64px

<p class="fs12">12px</p>
<p class="fs14">14px</p>
<p class="fs16">16px</p>
<p class="fs18">18px</p>
<p class="fs24">24px</p>
<p class="fs32">32px</p>
<p class="fs48">48px</p>
<p class="fs64">64px</p>

Fast alignment

Align the elements to the left and to the right with the help of the appropriate classes. !important is included to avoid some problems with element styles.

Block alignment

Alignment by the left side
Alignment by the right side
<div class="fl-left">...</div>
<div class="fl-right">...</div>

.fl-left {
  float: left !important;
}
.fl-right {
  float: right !important;
}
.fl-none {
  float: none !important;
}

Text alignment

Alignment by the left side
Don't underestimate the Force. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. The plans you refer to will soon be back in our hands. You mean it controls your actions?

Alignment by the right side
Don't underestimate the Force. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. The plans you refer to will soon be back in our hands. You mean it controls your actions?

Central alignment
Don't underestimate the Force. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. The plans you refer to will soon be back in our hands. You mean it controls your actions?

Full width extension
Don't underestimate the Force. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. The plans you refer to will soon be back in our hands. You mean it controls your actions?

<p class="text-left">...</p>
<p class="text-right">...</p>
<p class="text-center">...</p>
<p class="text-justify">...</p>

.text-left{
    text-align : left;
}
.text-center{
    text-align : center;
}
.text-right{
    text-align : right;
}
.text-justify{
    text-align : justify;
}

Clearfix

Cancellation of float on any element with the help of class .clearfix. Here the micro clearfix is used which is provided by Nicolas Gallagher. 

<!-- Using the class -->
<div class="clearfix">...</div>

.clearfix {
  *zoom: 1;
}
.clearfix:after, .clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

Showing and hiding some content

In order to hide or to show the element use .show and .hidden. These classes use !important to avoid problems with element styles. 

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.hide {
  display: none;
}

Share with your friends

Google+