Cecilia CSS

A set of tools for quick development of web interfaces.


Download

View on GitHub



Headings

  • h1
  • .h1

Heading 1

  • h2
  • .h2
Heading 2
  • h3
  • .h3
Heading 3
  • h4
  • .h4
Heading 4
  • h5
  • .h5
Heading 5
  • h6
  • .h6
Heading 6
 
<h1>...</h1>


Font size

  • .textXs
Text XS
  • .textSm
Text SM
  • No class needed - assumes base font size
Text MD
  • .textLg
Text LG
  • .textXl
Text XL
  • .text2Xl
Text 2XL
  • .text3Xl
Text 3XL
  • .text4Xl
Text 4XL
  • .text5Xl
Text 5XL
 
<h1 class="d1">...</h1>


Small text

  • small
  • .small

Display heading with small text

Display paragraph with small text

 
<p><small>...</small></p>


Marked text

  • mark
  • .mark
This is a marked text and indicates a highlight.
 
<p>...<mark>...</mark>...</p>


Horizontal rules

  • hr
 
<hr>


Lists

  • .listUnstyled
  • Unstyled list item 1
  • Unstyled list item 2
    • Nested list item 1
    • Nested list item 2
  • .list-inline and .list-inline-item
  • List inline item 1
  • List inline item 2
  • List inline item 3
 
<ul class="listUnstyled">...</ul>


Blockquotes

  • blockquote and cite
Those who pass by us, do not go alone, and do not leave us alone; they leave a bit of themselves, and take a little of us. Antoine de Saint-Exupéry
 
<blockquote>...<cite>...</cite></blockquote>


Images

  • .imgFull
imgFull
 
<img src="..." class="imgFull" alt="...">


Code

  • code

For inline code, you can wrap a fragment of computer code in a <code> tag.

  • pre and code
For multiple lines of code, you can use the <code> tag inside a <pre> tag: 
<p>I'm a sample paragraph...</p>
<p>I'm another sample paragraph...</p>
 
<p>...<code>...</code>...</p>


Keyboard

  • kbd
Press Ctrl C to copy text.
 
<p>...<kbd>...</kbd>...</p>


Sample

  • samp
I'm a sample output from a computer program.
 
<samp>...</samp>


Containers

Detected:
Breakpoint:
Maximum container width:

(resize your browser to see the difference)

  • .container
Image container
  • .containerFull
image full container
 
<div class="container">...</div>


Equal width

  • .col
DIV 1 of 2
.col
DIV 2 of 2
.col

DIV 1 of 3
.col
DIV 2 of 3
.col
DIV 3 of 3
.col
 
<div class="col">...</div>


Responsive columns

  • .col{breakpoint}{columns}
DIV 1 of 2
.col9 .colLg2
DIV 2 of 2
.col3 .colLg10
 
<div class="colLg2">...</div>

Auto wrap

DIV 1 of 5
.colSm6 .colMd4
DIV 2 of 5
.colSm6 .colMd4
DIV 3 of 5
.colSm6 .colMd4
DIV 4 of 5
.colSm6 .colMd4
DIV 5 of 5
.colSm6 .colMd4
 
<div class="colSm6 colMd4">...</div>


Auto width content

  • .colAuto
  • .col{breakpoint}-auto
DIV 1 of 3
.col
DIV 2 of 3 (auto width content)
.colAuto
DIV 3 of 3
.col .colLg2

DIV 1 of 3
.col .colLg2
DIV 2 of 3 (auto width content)
.colMdAuto
DIV 3 of 3
.col .colLg2
 
<div class="colAuto">...</div>


Order

  • .order*
DIV 1 of 3 (unordered)
DIV 2 of 3
.orderLast
DIV 3 of 3
.orderFirst

DIV 1 of 3 (unordered)
DIV 2 of 3
.order-12
DIV 3 of 3
.order-1
 
<div class="order-1">...</div>


Gutters

No gutters

  • .gutter0
DIV 1 of 3
DIV 2 of 3
DIV 3 of 3
 
<div class="row gutter0">...</div>

Change default gutter

  • .gutter5
DIV 1 of 3
DIV 2 of 3
DIV 3 of 3
 
<div class="row gutter5">...</div>


Tables

  • .table
# Quantity Ingredient
1 3 Carrots
2 8 Strawberries
3 1 Lime
 
<table class="table">...</table>


Forms

  • .formGroup
  • .formControl
 
<input class="formControl" id="..." type="text" placeholder="...">


Animations

  • .blur
blur
 
<img src="..." class="blur" alt="...">
  • .fadeIn
blur
 
<img src="..." class="fadeIn" alt="...">
  • .fadeInDown
blur
 
<img src="..." class="fadeInDown" alt="...">
  • .zoomIn
blur
 
<img src="..." class="zoomIn" alt="...">
  • .spinner
 
<div class="spinner"></div>