1 #components Components

Reusable components that can be used across the site, each components modifier is chainable per component, or at least was designed with that intention. ie: div.bs-panel.round.info

1.1 #components.alerts Alerts

Alerts including modifiers for color and other various attributes

Default styling
default alert title
alert .notice
.success
success alert color
success alert title
alert .notice
.warning
warning alert color
warning alert title
alert .notice
.notice
notice alert color
notice alert title
alert .notice
Example Code:
<div class="bs-alert default">
   <div class="alert-title">
     default alert title
   </div>
   <div class="alert-notice">
     alert .notice
   </div>
</div>

1.2 #components.buttons Buttons

BASELESS buttons components, including modifiers for color and size.

Default styling
Link Button
.primary
primary button color
Link Button
.success
success button color
Link Button
.warning
warning button color
Link Button
.notice
notice button color
Link Button
.inverted
inverted button color
Link Button
.success.hollow.large
large button style
Link Button
.success.hollow.medium
medium button style
Link Button
.success.hollow.small
small button style
Link Button
.success.hollow.mini
mini button style
Link Button
Example Code:
<a href="#" class="bs-btn default hollow">Link Button</a>
<button class="bs-btn default">Button Element</button>
<button class="bs-btn default">Button Element</button>
<input type="button" class="bs-btn default" value="input[type='button']"/>
<input type="button" class="bs-btn default" value="input[type='button']" disabled/>
<!--<a href="#" class="bs-btn default disabled">Link Button</a>-->

1.2.1 #components.buttons.btn-groups Button Groups

Helpful when you need a button button group

Submit
Submit 1
Submit 2
Example Code:
<div class="row">
	<div class="bs-btn-group col sixcol">
		<input class="bs-form-elem"type="text" placeholder="Search...">
		<div class="bs-btn primary">Submit</div>
	</div>
	<div class="bs-btn-group col sixcol">
		<select class="bs-form-elem" name="findstuff" id="stuffs">
			<option value="null">example thing</option>
			<option value="null">example thing</option>
			<option value="null">example thing</option>
			<option value="null">example thing</option>
			<option value="null">example thing</option>
		</select>
		<div class="bs-btn primary">Submit 1</div>
		<div class="bs-btn primary">Submit 2</div>
	</div>
</div>

1.3 #components.cards Cards

Cards are the successor of all of the ui elements baseless offers, as each element is basically at it's core, a card.

Default styling
.default
.rounded
.no-border
.rounded.shadow
.shadow
.no-border.shadow
.warm-grey
A warm grey card that is very versatile
.default
.rounded
.no-border
.rounded.shadow
.shadow
.no-border.shadow
.light-grey
A light grey card that is very versatile
.default
.rounded
.no-border
.rounded.shadow
.shadow
.no-border.shadow
.white
A white card that is very versatile
.default
.rounded
.no-border
.rounded.shadow
.shadow
.no-border.shadow
.yellow
A yellow card that is very versatile
.default
.rounded
.no-border
.rounded.shadow
.shadow
.no-border.shadow
.light-blue
A light blue card that is very versatile
.default
.rounded
.no-border
.rounded.shadow
.shadow
.no-border.shadow
Example Code:
<div class="row">
	<div class="col twocol">
		<div class="bs-card default text-center" style="line-height: 300px;">
			<div class="card-section">
				.default
			</div>
		</div>
	</div>
	<div class="col twocol">
		<div class="bs-card default text-center rounded" style="line-height: 300px;">
			<div class="card-section">
				.rounded
			</div>
		</div>
	</div>
	<div class="col twocol">
		<div class="bs-card default text-center no-border" style="line-height: 300px;">
			<div class="card-section">
				.no-border
			</div>
		</div>
	</div>
	<div class="col twocol">
		<div class="bs-card default text-center rounded shadow" style="line-height: 300px;">
			<div class="card-section">
				.rounded.shadow
			</div>
		</div>
	</div>
	<div class="col twocol">
		<div class="bs-card default text-center shadow" style="line-height: 300px;">
			<div class="card-section">
				.shadow
			</div>
		</div>
	</div>
	<div class="col twocol">
		<div class="bs-card default text-center no-border shadow" style="line-height: 300px;">
			<div class="card-section">
				.no-border.shadow
			</div>
		</div>
	</div>
</div>
<hr/>

1.4 #components.forms Forms

Styles to hold our base form styles

Some sample stuff here
Example Code:
<form class="bs-form">
  <div class="bs-form-group">
    <label>Text Form Example</label>
    <input type="text" class="bs-form-elem" placeholder="Placeholder text.."/>
    <button class="bs-btn warning" type="button">Submit</button>
    <div class="bs-form-descriptor">
      Some sample stuff here
    </div>
  </div>
  <div class="bs-form-group">
    <label>Textarea Form Example</label>
    <textarea class="bs-form-elem"></textarea>
  </div>
  <div class="bs-form-group">
    <label>Select Form Example</label>
    <select class="bs-form-elem">
      <option value="null">Example Option</option>
      <option value="null">Example Option</option>
      <option value="null">Example Option</option>
      <option value="null">Example Option</option>
      <option value="null">Example Option</option>
      <option value="null">Example Option</option>
      <option value="null">Example Option</option>
      <option value="null">Example Option</option>
      <option value="null">Example Option</option>
    </select>
    <button class="bs-btn warning" type="button">Submit</button>
  </div>
  <div class="bs-form-group inline">
    <div class="row">
      <div class="col threecol">
        <input type="radio" value="male" id="male" name="sex"/>
        <label class="bs-form-gap-l" for="male">Male</label>
      </div>
      <div class="col threecol">
        <input type="radio" value="female" id="female" name="sex"/>
        <label class="bs-form-gap-l" for="female">Female</label>
      </div>
      <div class="col threecol">
        <label class="bs-form-gap-r" for="male2">Male</label>
        <input type="checkbox" value="male2" id="male2" name="sex2"/>
      </div>
      <div class="col threecol">
        <label class="bs-form-gap-r" for="female2">Female</label>
        <input type="checkbox" value="female2" id="female2" name="sex2"/>
      </div>
    </div>
  </div>
</form>

1.5 #components.grid Grid

Common grid system with 12 columns, .onecol - .twelvecol. as you would expect, however this grid will automatically float the columns at our tablet breakpoints, allowing us to be completely mobile first.

onecol
onecol
onecol
onecol
onecol
onecol
onecol
onecol
onecol
onecol
onecol
onecol
twocol
twocol
twocol
twocol
twocol
twocol
threecol
threecol
threecol
threecol
fourcol
fourcol
fourcol
fivecol
fivecol
twocol
sixcol
sixcol
eightcol
fourcol
Example Code:
<div class="row" style="margin-bottom: 20px;">
   <div class="col eightcol"><div style="border: 1px solid #ccc;" class="text-center">eightcol</div></div>
   <div class="col fourcol"><div style="border: 1px solid #ccc;" class="text-center">fourcol</div></div>
</div>

1.6 #components.labels Labels

labels, idk what to say about them, they're helpful

Default styling
default
.primary
primary label color
primary
.success
success label color
success
.warning
warning label color
warning
.notice
notice label color
notice
.info
info label color
info
.inverted
inverted label color
inverted
.primary.small.box
small box label
primary small box
.primary.small
small label size
primary small
.primary.mini
mini label size
primary mini
.primary.large
large label size
primary large
Example Code:
<div class="bs-label default">
   default
</div>

1.7 #components.lists Lists

Common set of useful list styles

Default styling
  • Unordered list example
  • Unordered list example
  • Unordered list example
  1. Ordered list example
  2. Ordered list example
  3. Ordered list example
.flat
flattens list style
  • Unordered list example
  • Unordered list example
  • Unordered list example
  1. Ordered list example
  2. Ordered list example
  3. Ordered list example
.inline
inline list style
  • Unordered list example
  • Unordered list example
  • Unordered list example
  1. Ordered list example
  2. Ordered list example
  3. Ordered list example
Example Code:
<ul class="bs-list default">
   <li>Unordered list example</li>
   <li>Unordered list example</li>
   <li>Unordered list example</li>
</ul>
<ol class="bs-list default">
   <li>Ordered list example</li>
   <li>Ordered list example</li>
   <li>Ordered list example</li>
</ol>

1.7.1 #components.lists.block-list Block lists

block style, lists

  • Block List Heading
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
Example Code:
<ul class="bs-list block-list">
  <li class="list-heading">
    Block List Heading
  </li>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

1.7.2 #components.lists.nav-lists Nagivation Lists

nav bar style lists

Default styling
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
.rounded.primary
primary colored nav list
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
.rounded.light-grey
light grey colored nav list
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
.rounded.inverted
inverted colored nav list
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
.rounded
inverted colored nav list
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
Example Code:
<ul class="bs-list nav connected default">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

1.8 #components.panels Panels

BASELESS Panels components, use them as you would any panel.

Default styling
default heading
default body
default heading
default list item
default list item
default list item
default list item
default list item
.primary
primary panel color
primary heading
primary body
primary heading
primary list item
primary list item
primary list item
primary list item
primary list item
.success
success panel color
success heading
success body
success heading
success list item
success list item
success list item
success list item
success list item
.warning
warning panel color
warning heading
warning body
warning heading
warning list item
warning list item
warning list item
warning list item
warning list item
.utility
utility panel color
utility heading
utility body
utility heading
utility list item
utility list item
utility list item
utility list item
utility list item
.rounded.default
round panel
rounded default heading
rounded default body
rounded default heading
rounded default list item
rounded default list item
rounded default list item
rounded default list item
rounded default list item
Example Code:
<div class="row">
    <div class="col sixcol">
        <div class="bs-panel default">
            <div class="panel-heading">default heading</div>
            <div class="panel-body">default body</div>
        </div>
    </div>
    <div class="col sixcol">
        <div class="bs-panel default">
            <div class="panel-heading">default heading</div>
            <div class="panel-list">
                <div class="panel-list-item">
                    default list item
                </div>
                <div class="panel-list-item">
                    default list item
                </div>
                <div class="panel-list-item">
                    default list item
                </div>
                <div class="panel-list-item">
                    default list item
                </div>
                <div class="panel-list-item">
                    default list item
                </div>
            </div>
        </div>        
    </div>
</div>

1.9 #components.shapes Shapes

Basic shapes like circles, squares, triangles, ovals.

Example Code:
<div class="row">
  <div class="col onecol">
    <div class="bs-shape mini primary"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini circle primary"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini success"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini circle success"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini warning"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini circle warning"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini notice"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini circle notice"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini info"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini circle info"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini inverted"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape mini circle inverted"></div>
  </div>
</div>
<div class="row">
  <div class="col onecol">
    <div class="bs-shape small primary"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small circle primary"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small success"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small circle success"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small warning"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small circle warning"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small notice"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small circle notice"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small info"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small circle info"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small inverted"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape small circle inverted"></div>
  </div>
</div>
<div class="row">
  <div class="col onecol">
    <div class="bs-shape primary"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape circle primary"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape success"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape circle success"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape warning"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape circle warning"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape notice"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape circle notice"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape info"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape circle info"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape inverted"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape circle inverted"></div>
  </div>
</div>
<div class="row">
  <div class="col onecol">
    <div class="bs-shape large primary"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large circle primary"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large success"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large circle success"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large warning"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large circle warning"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large notice"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large circle notice"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large info"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large circle info"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large inverted"></div>
  </div>
  <div class="col onecol">
    <div class="bs-shape large circle inverted"></div>
  </div>
</div>

1.10 #components.tables Tables

Tabular data should be presented in a nice way, we'll keep this simple and use .row/.col style tables for most things ideally (i would image).

Default styling
Example table heading column Example table heading column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
.striped
primary striped table style
Example table heading column Example table heading column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
.striped.large.hover
info and striped table style
Example table heading column Example table heading column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
.warm-grey.striped.small.hover
info table style
Example table heading column Example table heading column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example table column Example table column
Example Code:
<table class="bs-table default">
   <thead>
     <tr>
       <th>Example table heading column</th>
       <th>Example table heading column</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Example table column</td>
       <td>Example table column</td>
     </tr>
     <tr>
       <td>Example table column</td>
       <td>Example table column</td>
     </tr>
     <tr>
       <td>Example table column</td>
       <td>Example table column</td>
     </tr>
     <tr>
       <td>Example table column</td>
       <td>Example table column</td>
     </tr>
     <tr>
       <td>Example table column</td>
       <td>Example table column</td>
     </tr>
     <tr>
       <td>Example table column</td>
       <td>Example table column</td>
     </tr>
   </tbody>
</table>

1.11 #components.wells Wells

Wells are a concept of a panel mashed with an alert, you can easily hold things within them.

Default styling
This is a sample well
.small
a small well
This is a sample well
.large
a large well
This is a sample well
.large.shadow
a large well with a shadow
This is a sample well
.large.inset-shadow
a large well with a shadow
This is a sample well
.rounded
a rounded well
This is a sample well
.yellow
box colored well
This is a sample well
.yellow.shadow.no-border
a dynamic well
This is a sample well
.yellow.rounded
rounded box well
This is a sample well
Example Code:
<div class="bs-well default">
   <span>This is a sample well</span>
</div>