Source: css/5-objects/_objects.scss, line 1
5 Objects
Object oriented CSS. Begin using classes exclusively for agnostically named noncosmetic design patterns. This layer is mostly layout-driven.
Source: css/5-objects/objects.flag.scss, line 1
5.1 Flag
Examples
Default styling
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, ipsam.
.o-flag--top
text aligned top.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, ipsam.
.o-flag--bottom
text aligned bottom.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, ipsam.
<div class="o-flag [modifier]">
<div class="o-flag__img">
<img src="http://www.placehold.it/400x200">
</div>
<div class="o-flag__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, ipsam.</p>
</div>
</div>Source: css/5-objects/objects.grid.scss, line 1
5.2 Grid system
The grid system Splinter is used to simplify responsive design. It's completely customizable at the beginning of a project. Note: changing the grid settings during a project can break the layout. The 12 column grid has 3 breakpoints and is designed mobile first:
- sm: 568px
- md: 768px
- lg: 1024px
Example
Content
Content
<div class="g-row12">
<div class="g-col12--xs g-col8--md">
Content
</div>
<div class="g-col12--xs g-col4--md">
Content
</div>
</div>Source: css/5-objects/objects.list.scss, line 1
5.3 List
List items without bullets and no padding on the left side.
Example
- item 1
- item 2
- item 3
- item 4
<ul class="o-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>Source: css/5-objects/objects.list-inline.scss, line 1
5.4 List inline
Inlines the list items.
Example
- item 1
- item 2
- item 3
- item 4
<ul class="o-list-inline">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>Source: css/5-objects/objects.media.scss, line 1
5.5 Media
The media object can save you hundreds of line of code. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ An alternative css object is the flag object.
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, ratione.
<div class="o-media">
<div class="o-media__img">
<img src="http://www.placehold.it/400x200">
</div>
<div class="o-media__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, ratione.</p>
</div>
</div>Source: css/5-objects/objects.table.scss, line 1
5.6 Table
Mimics the table layout for more flexibility in responsive design.
Example
Cell 1-1
Cell 1-2
Cell 1-3
Cell 2-1
Cell 2-2
Cell 2-3
Cell 3-1
Cell 3-2
Cell 3-3
<div class="o-table">
<div class="o-table__row">
<div class="o-table__cell">Cell 1-1</div>
<div class="o-table__cell">Cell 1-2</div>
<div class="o-table__cell">Cell 1-3</div>
</div>
<div class="o-table__row">
<div class="o-table__cell">Cell 2-1</div>
<div class="o-table__cell">Cell 2-2</div>
<div class="o-table__cell">Cell 2-3</div>
</div>
<div class="o-table__row">
<div class="o-table__cell">Cell 3-1</div>
<div class="o-table__cell">Cell 3-2</div>
<div class="o-table__cell">Cell 3-3</div>
</div>
</div>