KSS Style Guide

<insert-markup>atoms.blockquotes-</insert-markup>

Nullam id orci consequat, luctus ligula lobortis, maximus neque. Vestibulum nulla ante, mollis vitae porta molestie, commodo in felis.

Markup: ..\..\styleguide\templates\atoms\content\blockquotes.html
<blockquote class="smartlb-a-blockquote">
	<p>Nullam id orci consequat, luctus ligula lobortis, maximus neque.     Vestibulum nulla ante, mollis vitae porta molestie, commodo in felis.</p>
	<footer>
		Someone famous in <cite title="Source Title"><a href="#">Source Title</a></cite>
	</footer>
</blockquote>

Source: ../source/scss/components/atoms/content/_blockquotes.scss, line 1
<insert-markup>atoms.buttons-</insert-markup>
.-primary
default button
<insert-markup>atoms.buttons-0</insert-markup>
.-secondary
secondary button
<insert-markup>atoms.buttons-1</insert-markup>
.-success
Success button
<insert-markup>atoms.buttons-2</insert-markup>
.-warning
Warning button
<insert-markup>atoms.buttons-3</insert-markup>
.-ghost
Ghost version button
<insert-markup>atoms.buttons-4</insert-markup>
Markup: ..\..\styleguide\templates\atoms\buttons.html
<a href="#" class="rocksite-a-button [modifier class]">
	Click me
</a>


Source: ../source/scss/components/atoms/_buttons.scss, line 1
<insert-markup>atoms.buttons.icon-</insert-markup>
.-primary
default button
<insert-markup>atoms.buttons.icon-0</insert-markup>
.-secondary
secondary version
<insert-markup>atoms.buttons.icon-1</insert-markup>
.-warning
Success button
<insert-markup>atoms.buttons.icon-2</insert-markup>
.-danger
Danger button
<insert-markup>atoms.buttons.icon-3</insert-markup>
.-transparent
transparent version
<insert-markup>atoms.buttons.icon-4</insert-markup>
.-invert
inverted version
<insert-markup>atoms.buttons.icon-5</insert-markup>
.-primary.-small
small primary
<insert-markup>atoms.buttons.icon-6</insert-markup>
Markup: ..\..\styleguide\templates\atoms\buttons-icon.html
<a href="#" class="rocksite-a-button-icon [modifier class]"><i class="la la-angle-right"></i>

	<span>214 K</span>
</a>


Source: ../source/scss/components/atoms/_buttons.scss, line 127
<insert-markup>atoms.buttons.social-</insert-markup>
.-invert
inverted version
<insert-markup>atoms.buttons.social-0</insert-markup>
.-email
e-mail icon
<insert-markup>atoms.buttons.social-1</insert-markup>
.-twitter
Twitter
<insert-markup>atoms.buttons.social-2</insert-markup>
.-facebook
Facebook
<insert-markup>atoms.buttons.social-3</insert-markup>
.-gplus
Google plus
<insert-markup>atoms.buttons.social-4</insert-markup>
.-linkedin
linked IN
<insert-markup>atoms.buttons.social-5</insert-markup>
.-default
default version
<insert-markup>atoms.buttons.social-6</insert-markup>
Markup: ..\..\styleguide\templates\atoms\buttons-social.html
<a href="#" class="rocksite-a-button-social [modifier class]">
</a>


Source: ../source/scss/components/atoms/_buttons.scss, line 271
<insert-markup>atoms.buttons.social.meta-</insert-markup>
Markup: ..\..\styleguide\templates\atoms\buttons-social-meta.html
<a href="#" class="rocksite-a-button-social-meta ">
    <i class="fab fa-facebook-f"></i>
    <span>219K</span>
</a>


Source: ../source/scss/components/atoms/_buttons.scss, line 343
<insert-markup>atoms.chips.labels-</insert-markup>
Category Name
.-primary
e-mail icon
<insert-markup>atoms.chips.labels-0</insert-markup>
Category Name
.-success
Twitter
<insert-markup>atoms.chips.labels-1</insert-markup>
Category Name
.-warning
Google plus
<insert-markup>atoms.chips.labels-2</insert-markup>
Category Name
.-danger
linked IN
<insert-markup>atoms.chips.labels-3</insert-markup>
Category Name
.-meta-label
plain label displaying in meta area
<insert-markup>atoms.chips.labels-4</insert-markup>
Category Name
Markup: ..\..\styleguide\templates\atoms\chips-labels.html
<span class="rocksite-a-chips-label [modifier class]">Category Name</span>


Source: ../source/scss/components/atoms/_chips-labels.scss, line 1
<insert-markup>atoms.forms.button-</insert-markup>
:hover
Highlight the text box when hovering
<insert-markup>atoms.forms.button-0</insert-markup>
Markup: ..\..\styleguide\templates\atoms\inputs\button.html
<button class="rocksite-a-input-button [modifier class]" type="submit">Send Message</button>
Source: ../source/scss/components/atoms/_inputs.scss, line 61
<insert-markup>atoms.forms.input-</insert-markup>
:hover
Highlight the text box when hovering
<insert-markup>atoms.forms.input-0</insert-markup>
:focus
Similar to :hover, however it should demand more attention than when an input is simply hovered.
<insert-markup>atoms.forms.input-1</insert-markup>
:disabled
When disabled, the input's appearance should reflect as such.
<insert-markup>atoms.forms.input-2</insert-markup>
Markup: ..\..\styleguide\templates\atoms\inputs\input.html
<input type="text" value="" id="input_text" name="search" placeholder="Search" class="rocksite-a-input [modifier class]">
Source: ../source/scss/components/atoms/_inputs.scss, line 2
<insert-markup>atoms.forms.select-</insert-markup>
Markup: ..\..\styleguide\templates\atoms\inputs\select.html
<select name="select_option" class="rocksite-a-select " aria-label="Shop order">

    <option value="first-option">
        First option
    </option>


    <option value="second-option" selected="selected">
        Second option
    </option>



    <option value="third-option">
        Third option
    </option>


    <option value="fourth-option">
        Fourth option
    </option>


</select>
Source: ../source/scss/components/atoms/_inputs.scss, line 104
<insert-markup>atoms.forms.textarea-</insert-markup>
:hover
Highlight the text box when hovering
<insert-markup>atoms.forms.textarea-0</insert-markup>
:focus
Similar to :hover, however it should demand more attention than when an input is simply hovered.
<insert-markup>atoms.forms.textarea-1</insert-markup>
:disabled
When disabled, the input's appearance should reflect as such.
<insert-markup>atoms.forms.textarea-2</insert-markup>
Markup: ..\..\styleguide\templates\atoms\inputs\textarea.html
<textarea class="rocksite-a-textarea [modifier class]" id="input_text" name="message" rows="4" placeholder="Your Message" aria-invalid="false"></textarea>
Source: ../source/scss/components/atoms/_inputs.scss, line 32
<insert-markup>atoms.headings-</insert-markup>

Heading text second line

.-hero
Hero Heading
<insert-markup>atoms.headings-0</insert-markup>

Heading text second line

.-h1
Heading
<insert-markup>atoms.headings-1</insert-markup>

Heading text second line

.-h2
Heading
<insert-markup>atoms.headings-2</insert-markup>

Heading text second line

.-h3
Heading
<insert-markup>atoms.headings-3</insert-markup>

Heading text second line

.-h4
Heading
<insert-markup>atoms.headings-4</insert-markup>

Heading text second line

.-h5
Heading
<insert-markup>atoms.headings-5</insert-markup>

Heading text second line

.-h6
Heading
<insert-markup>atoms.headings-6</insert-markup>

Heading text second line

.-h7
Heading
<insert-markup>atoms.headings-7</insert-markup>

Heading text second line

Markup: ..\..\styleguide\templates\atoms\content\headings.html
<h1 class="rocksite-a-heading [modifier class]">Heading text second line</h1>
Source: ../source/scss/components/atoms/content/_headings.scss, line 1
<insert-markup>atoms.icons-</insert-markup>
.-large
e-mail icon
<insert-markup>atoms.icons-0</insert-markup>
Markup: ..\..\styleguide\templates\atoms\icon.html
<span class="rocksite-a-icon [modifier class]"><i class="la la-user-plus"></i></span>


Source: ../source/scss/components/atoms/_icons.scss, line 1
<insert-markup>atoms.labels-</insert-markup>
.-primary
e-mail icon
<insert-markup>atoms.labels-0</insert-markup>
.-success
Twitter
<insert-markup>atoms.labels-1</insert-markup>
.-small
Twitter
<insert-markup>atoms.labels-2</insert-markup>
.-tiny
tiny version
<insert-markup>atoms.labels-3</insert-markup>
.-warning
Google plus
<insert-markup>atoms.labels-4</insert-markup>
.-danger
linked IN
<insert-markup>atoms.labels-5</insert-markup>
.-meta-label
plain label displaying in meta area
<insert-markup>atoms.labels-6</insert-markup>
Markup: ..\..\styleguide\templates\atoms\labels.html
<span class="rocksite-a-label [modifier class]"><i class="las la-camera-retro"></i></span>


Source: ../source/scss/components/atoms/_labels.scss, line 1
<insert-markup>atoms.list-</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-horizontal
1 column
<insert-markup>atoms.list-0</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-invert
invert version
<insert-markup>atoms.list-1</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-icon-pointer
2 columns
<insert-markup>atoms.list-2</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-underlined
underlined list
<insert-markup>atoms.list-3</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-primary
primary version
<insert-markup>atoms.list-4</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-table
tabled version
<insert-markup>atoms.list-5</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
Markup: ..\..\styleguide\templates\atoms\content\list.html
<ul class="rocksite-a-list [modifier class]">
	<li class="rocksite-a-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
	<li class="rocksite-a-list__item">Sed vel odio venenatis, mattis risus quis, facilisis nibh</li>
	<li class="rocksite-a-list__item">Phasellus eget consectetur nisi</li>
	<li class="rocksite-a-list__item">Donec tellus magna, varius vitae consectetur ac, mollis eget ligula</li>
	<li class="rocksite-a-list__item">Nam finibus a dolor ut pellentesque</li>
	<li class="rocksite-a-list__item">Vivamus gravida rhoncus quam, in congue dolor porta vitae</li>
	<li class="rocksite-a-list__item">Aliquam bibendum tempor ipsum nec fermentum</li>
	<li class="rocksite-a-list__item">Aenean ultricies libero quam, quis condimentum velit viverra a</li>
</ul>
Source: ../source/scss/components/atoms/content/_list.scss, line 1
<insert-markup>atoms.progress-</insert-markup>
Markup: ..\..\styleguide\templates\atoms\progress-bar.html
<div class="rocksite-a-progress-bar">
	<div class="rocksite-a-progress-bar__chart" style="width: 88%"></div>
</div>
Source: ../source/scss/components/atoms/_progress-bar.scss, line 1
<insert-markup>atoms.tables-</insert-markup>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
.-striped
striped table
<insert-markup>atoms.tables-0</insert-markup>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
.-bordered
borderd
<insert-markup>atoms.tables-1</insert-markup>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Markup: ..\..\styleguide\templates\atoms\content\tables.html
<table class="rocksite-a-table [modifier class]">
	<thead>
	<tr>
		<th>#</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Username</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">1</th>
		<td>Mark</td>
		<td>Otto</td>
		<td>@mdo</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Jacob</td>
		<td>Thornton</td>
		<td>@fat</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Larry</td>
		<td>the Bird</td>
		<td>@twitter</td>
	</tr>
	</tbody>
</table>
Source: ../source/scss/components/atoms/content/_tables.scss, line 5
<insert-markup>atoms.text-</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
.-xx-large
Hero Heading
<insert-markup>atoms.text-0</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
.-x-large
Heading
<insert-markup>atoms.text-1</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
.-large
Heading
<insert-markup>atoms.text-2</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
.-medium
Heading
<insert-markup>atoms.text-3</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
.-small
Heading
<insert-markup>atoms.text-4</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
.-x-small
Heading
<insert-markup>atoms.text-5</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
.-xx-small
Heading
<insert-markup>atoms.text-6</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
.-bold
Heading
<insert-markup>atoms.text-7</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.
Markup: ..\..\styleguide\templates\atoms\content\text.html
<span class="rocksite-a-text [modifier class]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus justo mauris, vehicula in lacinia vitae, suscipit ut metus.</span>
Source: ../source/scss/components/atoms/content/_text.scss, line 2