Elements
In BaseWeb, Elements refer to individual components of an HTML document. Elements are the backbone of any HTML documents and have inherit semantic meaning. BaseWeb styles these elements here and makes them easy to customize and enhance.
Base Styles
Some general styles and global resets are defined here. This is where we store any styles that effect the <body>
or <html>
elements, set HTML5 elements to display as block and any output our global modifier classes.
- Remove margins and padding from HTML and Body elements and sets our base font-size.
- Prevents automatic text resizing on mobile devices.
- Make HTML5 elements act like blocks.
- Set default box sizing model to our global variable
$global-box-sizing.
- Outputs our cleafix class if one is set in
$class-clearfix
. - Outputs our remove cleafix class if one is set in
$class-remove-clearfix
. - Outputs our float left class if one is set in
$class-float-left
. - Outputs our float right class if one is set in
$class-float-right
. - Add custom text highlight color if a color is set in
$bg-selection
.
Base Classes
Base classes are primarily element and block neutral classes that can apply to anything. They are typically utility classes for commonly used CSS techniques (such as a clearfix).
-
.clearfix
Use this class to clear an element that contains floats. Whether or not this class is output depends on the
$class-clearfix
and if set tonull
will not output the class styles.<div class="clearfix"></div>
Example Usage
<div class="wrapper clearfix"> <aside class="sidebar"> ... </aside> <div class="content"> ... </div> </div>
-
.remove-clearfix
Use this class to remove the styles that would clear an element. Whether or not this class is output depends on the
$class-remove-clearfix
and if set tonull
will not output the class styles. This class is typically used when a clearfix is inherited on an element and you'd like it removed.<div class="remove-clearfix"></div>
-
.float-left
A quick way for floating an element to the left. If set to
null
will not output the class styles.<div class="float-left"></div>
-
.float-right
A quick way for floating an element to the right. If set to
null
will not output the class styles.<div class="float-right"></div>
Typography
This is where BaseWeb defines our most basic typographic elements. This includes things like base font styles, headings, links and emphasis elements.
Headings
Heading elements are used to describe the topic of the section it introduces. BaseWeb defines styles for headings <h1>
to <h6>
.
<h1>h1. BaseWeb Heading</h1>
<h2>h2. BaseWeb Heading</h2>
<h3>h3. BaseWeb Heading</h3>
<h4>h4. BaseWeb Heading</h4>
<h5>h5. BaseWeb Heading</h5>
<h6>h6. BaseWeb Heading</h6>
h1. BaseWeb Heading
h2. BaseWeb Heading
h3. BaseWeb Heading
h4. BaseWeb Heading
h5. BaseWeb Heading
h6. BaseWeb Heading
Body Copy
The body copy is set by applying our default typographic settings to the <body>
element and applying margins to our paragraph element.
<p>...</p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Typographic Elements
HTML has a beautiful assortment of tools for adding rich semantics to a document. This is by no means a comprehensive list of HTML elements, but these are the inline text elements that BaseWeb specifically adds styles for.
-
<a>
The HTML
<a>
Element (or the HTML Anchor Element) defines a hyperlink.<p>If you don't know something, try a <a href="http://google.com">Google search</a>!</p>
If you don't know something, try a Google search!
-
<strong>
The HTML
<strong>
represents strong importance for its contents.<p>I learned a lot reading <strong>Pale Blue Dot</strong>.</p>
I learned a lot reading Pale Blue Dot.
-
<em>
The HTML
<em>
element represents stress emphasis of its contents.<p>Cats are <em>cute</em> animals.</p>
Cats are cute animals.
-
<small>
The HTML
<small>
element represents side comments such as small print.<small>Copyright 2015</small>
Copyright 2015
-
<mark>
The HTML
<mark>
element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.<p>Don't forget to pick up the <mark>hamburgers</mark> at the store.</p>
Don't forget to pick up the hamburgers at the store.
-
<ins>
The HTML
<ins>
element represents an addition to the document.<ins>This content was added to our document.</ins>
This content was added to our document.
-
<del>
The HTML
<del>
element represents a removal from the document.<del>This content was removed from our document.</del>
This content was removed from our document. -
<cite>
The HTML
<cite>
element represents a reference to a creative work.<blockquote> <p>Take the risk of thinking for yourself—much more happiness, truth, beauty and wisdom will come to you that way.</p> <footer><cite>– Christopher Hitchens</cite></footer> </blockquote>
Take the risk of thinking for yourself—much more happiness, truth, beauty and wisdom will come to you that way.
-
<abbr>
The HTML
<abbr>
represents an abbreviation or acronym. The optional title attribute may be used to provide an expansion of the abbreviation.<p>The quintessential of front-end development includes <abbr title="Hypertext Markup Language">HTML</abbr>, <abbr title="Cascading Stylessheets">CSS</abbr> and <abbr title="JavaScript">JS</abbr>.</p>
The quintessential of front-end development includes HTML, CSS and JS.
Typographic Classes
In addition to our inline elements, BaseWeb provides these stylistic typographic classes for adding flair and visual depth to your documents without adding any semantic meaning.
-
.text-lead
Lead text can be used as an introduction paragraph or even as subtitle text.
<p class="text-lead">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-small
Used to make text look less important. Can be used to reduce the size of legal text, for example.
<p class="text-small">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-soften
Softens the appearance of text for non-vital content such as meta data, dates or descriptions.
<p class="text-soften">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-harden
Makes text stand out or look more important. Could be used to attract attention to important information.
<p class="text-harden">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-left
Aligns text to the left.
<p class="text-left">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-center
Aligns text to the center.
<p class="text-center">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-right
Aligns text to the right.
<p class="text-right">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-justify
Makes text justified.
<p class="text-justify">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-nowrap
Prevents text from wrapping.
<p class="text-nowrap">...</p>
Cras ullamcorper, massa sed commodo fermentum, neque tellus pharetra est, eu volutpat nibh ante eu mauris. Quisque auctor consequat dui. Nam non ante at nibh egestas feugiat. Praesent tincidunt rhoncus justo in placerat.
-
.text-lowercase
Makes text lowercase.
<p class="text-lowercase">Lowercase text goes here.</p>
Lowercase text goes here.
-
.text-uppercase
Makes text uppercase.
<p class="text-uppercase">Uppercase text goes here.</p>
Uppercase text goes here.
-
.text-capitalize
Makes text capitalized.
<p class="text-capitalize">Capitalize text goes here.</p>
Capitalize text goes here.
Lists
Lists in HTML come in three flavors: unordered, ordered and description lists. BaseWeb has some pretty basic default styles for all three type and a variety of list mixins and classes for stylistic variation.
Unordered Lists
The <ul>
element represents a list of items, where the order of the items is not important. So if you changed the order, the meaning of the list would stay the same.
<ul>
<li>...</li>
</ul>
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- List Item
- List Item
Ordered Lists
The <ol>
element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the list.
<ol>
<li>...</li>
</ol>
- List item one
- List item two
- Nested list item one
- Nested list item two
- Nested list item three
- List item three
- List item four
- List item five
Description Lists
The <dl>
element represents an association list consisting of zero or more name-value groups (a description list).
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
- Base
- The lowest part or edge of something, especially the part on which it rests or is supported.
- Web
- An information system on the Internet that allows documents to be connected to other documents by hypertext links, enabling the user to search for information by moving from one document to another.
List Variables
List variables are encompassed within the $lists
map and are used throughout all list mixins to set default values.
-
$lists('classes')
true
Whether or not we should output modifier classes. Set tofalse
if you want to use the list modifier mixins semantically and/or reduce CSS output. $lists('nth')
odd
$lists('margin')
1rem 0
$lists('padding')
1rem
$lists('background')
none
$lists('background-stripe')
rgba($black, 0.05)
$lists('background-hover')
$yellow-pale
$lists('border')
1px solid rgba($black, 0.1)
$lists('border-radius')
$border-radius
List Mixins
Lists are used to describe a wide range of content on the web, especially in UI design. A lot of the time, you don't want a list to look like a standard list with bullets. BaseWeb provides mixins and classes for creating commonly used list styles.
-
make-list
Creates the base styles for a list modifier mixin or class. Usually applied directly through a base list class, mixin or an extend placeholder. If list modifier classes are enabled, you are provided
.list
for your base button class.@mixin make-list( $options: () ) // @param $options // @type map // @default $lists map
Example Usage
Using the base list mixin for custom tables. This example shows us using a
%base-list
placeholder for the extend method.%base-list { @include make-list(); } .list-example-1 { @extend %base-list; ... } .list-example-2 { @extend %base-list; ... }
-
add-list-rowed
Adds borders to a list that divide list items. Requires the use of base list styles through base list class, mixin or extend.
@mixin add-list-rowed( $options: () ) // @param $options // @type map // @default $lists map
Example Usage
.custom-list { @include make-list(); @include add-list-rowed(); }
<ul class="list rowed">...</ul>
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- List Item
- List Item
In the case where you don't want to create left and right padding on a list, you can pass a custom padding through the base list mixin
make-list(('padding':10px 0))
, or use the.flush
class to make the list flush to both sides..custom-list { @include make-list(('padding':10px 0)); @include add-list-rowed(); }
<ul class="list rowed flush">...</ul>
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- List Item
- List Item
-
add-list-bordered
Adds borders to a list that wraps the list and divides list items. Requires the use of base list styles through base list class, mixin or extend.
@mixin add-list-bordered( $options: () ) // @param $options // @type map // @default $lists map
Example Usage
.custom-list { @include make-list(); @include add-list-bordered(); }
<ul class="list bordered">...</ul>
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- List Item
- List Item
-
add-list-rounded
Gives a list rounded borders depending on parameters passed.
@mixin add-list-rounded( $radius, $options: () ) // @param $radius // @type unit (pixel, percent) // @default default ($lists('border-radius')) // @param $options // @type map // @default $lists map
Example Usage
.custom-list { @include make-list(); @include add-list-bordered(); @include add-list-rounded(); }
<ul class="list bordered rounded">...</ul>
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- List Item
- List Item
-
add-list-striped
Gives a list items alternating background colors.
@mixin add-list-striped( $nth, $options: () ) // @param $nth // @type nth (odd, even) // @default default ($lists('nth')) // @param $options // @type map // @default $lists map
Example Usage
.custom-list { @include make-list(); @include add-list-bordered(); @include add-list-striped(); }
<ul class="list rowed striped">...</ul>
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- List Item
- List Item
-
add-list-hover
Gives list hover styles for list items.
@mixin add-list-hover( $bg-hover, $options: () ) // @param $bg-hover // @type color // @default default ($lists('background-hover')) // @param $options // @type map // @default $lists map
Example Usage
.custom-list { @include make-list(); @include add-list-bordered(); @include add-list-hover(); }
<ul class="list rowed hover">...</ul>
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- List Item
- List Item
Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
<blockquote>
<p>...</p>
<footer><cite>...</cite></footer>
</blockquote>
"The internet could be a very positive step towards education, organization and participation in a meaningful society."
Code
The <code>
and <pre>
HTML elements are primarily used for displaying computer recognized programs or code. BaseWeb comes with some predefined styles for both inline code markup and blocks of code.
Inline Code
Inline code primarily appear in small fragments within text blocks. BaseWeb styles them so that they are easy to recognize and parse in that context.
<code>...</code>
Here is an example variable: var example = 'This is a test';
Block Code
Code blocks are larger sections of code that utilize the combination of a <pre>
element to retain preformatted text, in which structure is represented by typographic conventions rather than by elements.
<pre><code>...</code></pre>
var new = BaseWeb;
class BaseWeb() {
desc: a fresh front-end development framework
}
Tables
The HTML <table>
element is used to display tabular data. Tables have rows, cells , header cells and also can include <thead>
, <tbody>
or <tfooter>
which wrap their respective table data. Here's an example of a table markup and the default styles:
<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
...
</table>
# | Table Header | Table Header | Table Header |
---|---|---|---|
1 | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell |
You'll notice that the base styles for a table are almost untouched. That's because tables are used in a wide array of data on the web, so any sort of custom styles that BaseWeb has available are best applied using modifier classes and mixins for semantic applications.
Table Variables
Table variables are encompassed within the $tables
map and are used throughout all table mixins to set default values.
-
$tables('classes')
true
Whether or not we should output modifier classes. Set tofalse
if you want to use the table modifier mixins semantically and/or reduce CSS output. $tables('valign')
top
$tables('nth')
odd
$tables('stripe')
horizontal
$tables('margin')
1rem 0
$tables('padding-condensed')
0.25rem
$tables('padding')
0.75rem
$tables('padding-expanded')
1.25rem
$tables('background')
none
$tables('background-stripe')
rgba($black, 0.05)
$tables('background-hover')
$yellow-pale
$tables('border')
1px solid rgba($black, 0.1)
$tables('border-radius')
$border-radius
Table Mixins
Tabular data can be frustrating to parse if they are not styled properly. BaseWeb provides the mixins and classes you need to make tables and their content a breeze to analyze.
-
make-table
Creates the base styles for a table modifier mixin or class. Usually applied directly through a base table class, mixin or an extend placeholder. If table modifier classes are enabled, you are provided
.table
for your base table class.@mixin make-table( $options: () ) // @param $options // @type map // @default $tables map
Example Usage
Using the base table mixin for custom tables. This example shows us using a
%base-table
placeholder for the extend method.%base-table { @include make-table(); } .table-example-1 { @extend %base-table; ... } .table-example-2 { @extend %base-table; ... }
-
add-table-rowed
Adds borders to a table that divide table rows. Requires the use of base table styles through base table class, mixin or extend.
@mixin add-table-rowed( $options: () ) // @param $options // @type map // @default $tables map
Example Usage
.custom-table { @include make-table(); @include add-table-rowed(); }
<table class="table rowed">...</table>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell -
add-table-columned
Adds borders to a table that divide table columns. Requires the use of base table styles through base table class, mixin or extend.
@mixin add-table-columned( $options: () ) // @param $options // @type map // @default $tables map
Example Usage
.custom-table { @include make-table(); @include add-table-columned(); }
<table class="table columned">...</table>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell -
add-table-bordered
Adds borders to a table that divide table cells. Requires the use of base table styles through base table class, mixin or extend.
@mixin add-table-bordered( $options: () ) // @param $options // @type map // @default $tables map
Example Usage
.custom-table { @include make-table(); @include add-table-bordered(); }
<table class="table bordered">...</table>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell -
add-table-size
Toggles a tables padding size between condensed, expanded or a custom padding value.
@mixin add-table-size( $size, $options: () ) // @param $size // @type condensed | expanded | unit (pixel, em, percent) // @param $options // @type map // @default $tables map
Example Usage
As a mixin, this is used when overriding the inherited table size of more general table styles.
.all-tables { @include make-table(); @include add-table-bordered(); } .small-tables { @extend .all-tables; @include add-table-size(condensed); } .custom-tables { @extend .all-tables; @include add-table-size(8px 16px); }
When class modifiers are enabled, you have the two sizing utility classes (
.condensed
,.expanded
) available. This are primarily used along side the base and style modifier classes.<table class="table bordered condensed">...</table>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell <table class="table bordered expanded">...</table>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell -
add-table-rounded
Gives a table rounded borders depending on parameters passed.
@mixin add-table-rounded( $radius, $options: () ) // @param $radius // @type unit (pixel, percent) // @default default ($tables('border-radius')) // @param $options // @type map // @default $tables map
Example Usage
.custom-table { @include make-table(); @include add-table-bordered(); @include add-table-rounded(); }
<table class="table bordered rounded">...</table>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell -
add-table-stripes
Gives a table stripes either vertical or horizontal depending on parameters passed.
@mixin add-table-stripes( $nth, $dir, $options: () ) // @param $nth // @type nth (odd, even) // @default default ($tables('nth')) // @param $dir // @type orientation of stripes (vertical, horizontal) // @default default ($tables('stripe')) // @param $options // @type map // @default $tables map
Example Usage
.custom-table { @include make-table(); @include add-table-bordered(); @include add-table-stripes(); }
<table class="table bordered striped">...</table> <table class="table bordered striped-horizontal">...</table>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell <table class="table bordered striped-vertical">...</table>
# # # # # # # # 1 2 3 4 5 6 7 8 I II III IV V VI VII VIII a b c d e f g h A B C D E F G H -
add-table-hover
Gives table hover styles for rows.
@mixin add-table-hover( $bg-hover, $options: () ) // @param $bg-hover // @type color // @default default ($tables('background-hover')) // @param $options // @type map // @default $tables map
Example Usage
.custom-table { @include make-table(); @include add-table-bordered(); @include add-table-hover(); }
<table class="table bordered hover">...</table>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell -
add-table-alignment
Sets the vertical and text alignment of a table if a parameter is passed.
@mixin add-table-alignment( $options: () ) // @param $options // @type map ('vertical-align', 'text-align') // @default map (none, none)
Example Usage
If you don't have class modifiers enabled, or just want to set table alignment in your SCSS, just pass in the alignment settings you'd like set.
// SCSS .table-custom-alignment { ... @include add-table-alignment(( 'vertical-align': middle, 'text-align': center )); } // CSS Output .table-custom-alignment tr { vertical-align: middle; } .table-custom-alignment tr td, .table-custom-alignment tr th { text-align: center; }
Available Classes
.valign-baseline
Applies vertical-align: baseline;
to table rows..valign-top
Applies vertical-align: top;
to table rows..valign-middle
Applies vertical-align: middle;
to table rows..valign-bottom
Applies vertical-align: bottom;
to table rows..align-left
Aligns text to the left for all table cells. .align-center
Aligns text to the center for all table cells. .align-right
Aligns text to the right for all table cells. <table class="table bordered table-align-center">...</table>
-
make-table-responsive
When added to a wrapping element of a table, will make the table responsive for tablets and below.
@mixin make-table-responsive( $options: () ) // @param $options // @type map // @default $tables map
Example Usage
Simply wrap a div with the
.table-responsive
class or apply themake-table-responsive()
mixin to a div wrapping a table to create this effect. Keep in mind that it's triggered usingmedia-max('tablet')
.<div class="table-responsive"> <table class="table bordered"> ... </table> </div>
# Table Header Table Header Table Header 1 Table cell Table cell Table cell 2 Table cell Table cell Table cell 3 Table cell Table cell Table cell
Images
Images in BaseWeb are handles responsively be default. You're also provided a few class modifiers for commonly used image styles as well as image alignment classes.
<img src="...">

Image Classes
Alignment modifiers are classes for images that help position them within the context of a document. There are also a few stylistic modifiers for commonly used image effects.
-
img.align-left
Floats an image to the left and adds top, right and bottom margins so that text wraps around the image properly.
<img class="align-left" src="...">
-
img.align-center
Centers an image by making it block and giving it left and right margins of
auto
.<img class="align-center" src="...">
-
img.align-right
Floats an image to the right and adds top, left and bottom margins so that text wraps around the image properly.
<img class="align-right" src="...">
-
img.rounded
Adds rounded border radius based on the default border-radius setting
$border-radius
.<img class="rounded" src="...">
-
img.circle
Makes a circle effect on an image by adding
50%
border radius.<img class="circle" src="...">
-
img.polaroid
Adds a polaroid effect to an image.
<img class="polaroid" src="...">
Horizontal Rules
In HTML, the horizontal rule element (<hr>
) represents a paragraph-level thematic break. BaseWeb provides some very basic and subtle styles for this element along with a few stylistic class modifiers.
<hr>
Horizontal Rule Classes
-
hr.dotted
Uses the dotted border style property to created a dotted rule.
<hr class="dotted">
-
hr.dashed
Uses the dashed border style property to created a dashed rule.
<hr class="dashed">
-
hr.double
Uses the double border style property to created a double bordered rule.
<hr class="double">
Forms
HTML forms are probably the most daunting aspect of front-end development to markup and style. BaseWeb's goal is to give you the tools for making forms easy to build and customize regardless of how simple or complex a form may be.
In addition to this form documentation, there are a number of form examples that can either be used as starter forms or templates for creating your own Form Examples →
Form Structure
Along with all standard form elements, BaseWeb provides you with .form-group
, .form-header
, .form-action
and .input-group
classes to use for structuring a form layout. You also have the BaseWeb Grid System available for creating more complex form layouts.
<form>
<header class="form-header">
...
</header><!-- .form-header -->
<div class="form-group">
<div class="input-group">
...
</div><!-- .input-group -->
</div><!-- .form-group -->
<div class="form-group">
<div class="row">
<div class="col col-6">
<div class="input-group">
...
</div><!-- .input-group -->
</div><!-- .col -->
<div class="col col-6">
<div class="input-group">
...
</div><!-- .input-group -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .form-group -->
<footer class="form-action">
...
</footer><!-- .form-action -->
</form>
Form Variables
Form variables are encompassed within the $forms
map and are used throughout all form mixins to set default values.
-
$forms('vertical-spacing')
1.5em
-
$forms('vertical-align')
0.75em
-
$forms('font-family')
inherit
-
$forms('base-font-size')
1em
-
$forms('base-line-height')
1.5em
-
$forms('font-size')
1em
-
$forms('line-height')
1.5em
-
$forms('color')
$color
-
$forms('color-label')
$color-dark
-
$forms('color-placeholder')
#aaa
-
$forms('color-select-arrow')
$color-dark
-
$forms('border-radius')
$border-radius
-
$forms('input':'padding')
0.75em
-
$forms('input':'background')
rgba($white, 0.5)
-
$forms('input':'border')
1px solid rgba($black, 0.15)
-
$forms('input':'box-shadow')
0 1px 3px rgba($black, 0), inset 0 1px 3px rgba($black, 0.05)
-
$forms('input':'focus':'background')
rgba($white, 1)
-
$forms('input':'focus':'border')
1px solid rgba($blue, 1)
-
$forms('input':'focus':'box-shadow')
0 1px 3px rgba($black, 0.05), inset 0 1px 3px rgba($black, 0)
-
$forms('choice':'padding')
0.75em 0.75em 0.75em 2.25em
-
$forms('choice':'background')
rgba($black, 0.05)
-
$forms('choice':'border')
1px solid transparent
-
$forms('choice':'box-shadow')
none
To preserve the alignment of form elements, it's recommended that you keep the height of input, choice and button elements equal.
Form Structure Classes
These are that classes that BaseWeb provides for structuring a form. They are supplementary to a form's base structure elements and can be omitted or expanded upon (using form mixins) depending on your needs.
-
.form-group
Form groups are the first structure element used in a BaseWeb forms. It applies our vertical spacing and a hook for adding modifier classes and custom styles.
<form> <div class="form-group"> ... </div> <div class="form-group"> ... </div> ... </form>
-
.form-header
Used to define a form header. It gets the vertical spacing and custom typographic styles for headings and paragraph elements that it contains.
<form> <header class="form-header"> <h2>...</h2> <p>...</p> </header> </form>
-
.form-action
Action groups are used to wrap form submission, resets and other form actions. It's also a way to apply custom styles and modifiers as a form footer. Within the
.form-action
element, you also have the.input-align
class to align none-input elements vertically.<form> <footer class="form-action"> ... </footer> </form>
-
.input-group
Input groups are used to wrap groups of related input elements. It, like form groups, applies vertical spacing and another hook for adding modifier classes.
<form> <div class="form-group"> <div class="input-group"> ... </div> <div class="input-group"> ... </div> </div> </form>
-
.inline
You can create inline forms by adding the class
.inline
to form structure elements. If applied to a.form-group
element, it also makes children.form-group
and.input-group
elements inline as well.<form> <div class="form-group inline"> ... </div> </form>
-
Form Grids
For more complex form layouts, you have BaseWeb's default grid system to create rows and columns. This is done using the
.row
.col
and.col-#
classes where#
represents the number of columns to span.<form> <div class="form-group"> <label>Grid Example</label> <div class="row"> <div class="col col-4"> ... </div> <div class="col col-4"> ... </div> <div class="col col-4"> ... </div> </div> </div> </form>
-
Form Validation States
There are three validation states represented through the classes
.success
,.warning
and.error
. There's also a fourth state class.active
, that is used to simulate the focus styles for form inputs. It's also possible to add these states to form elements directly.<div class="form-group success">...</div> <div class="form-group warning">...</div> <div class="form-group error">...</div> <div class="form-group active">...</div>
Form Elements
BaseWeb supports a wide range of input types and form elements. By default, form inputs are set to display block at 100% width. They also receive half of the vertical spacing set in $forms
.
The .inline
class is available for all form elements to manually set them inline with spacing margins. They can also be set inline by applying .inline
to a parent element.
-
Input
The
.input
class is used to style the most common input types:text
,password
,date
,month
,week
,time
,email
,number
,search
,tel
,url
andcolor
.<input class="input" type="text" placeholder="Name"> <input class="input" type="email" placeholder="Email"> <input class="input" type="url" placeholder="http://">
-
Textarea
The
.input
class is used to style textareas. The height is then reset to auto so that it can be manually set with therows
attribute. They also have their max-width set to 100% so that they can't be resized passed the width of their container.<textarea class="input" rows="4"></textarea>
-
Select
Select elements are styled with the
.input
class and also receive custom styles with dropdown arrow. There are also custom styles applied to select elements that use thesize
andmultiple
attributes.<select class="input"> <option>Select Option 1</option> <option>Select Option 2</option> <option>Select Option 3</option> </select> <select class="input" multiple> ... </select>
-
Checkbox and Radio
BaseWeb styles checkbox and radio inputs by wrapping them with labels and applying
.checkbox
and.radio
classes to them.<label class="checkbox"> <input type="checkbox"> Checkbox Example 1 </label> <label class="radio"> <input type="radio" name="radio-1"> Radio Example 1 </label>
-
Choice
Choice elements are custom styled checkbox and radio input elements. They are represented by adding the
.choice
class to the wrapping label element of checkboxes and radios.They receive extra padding so that they match the height of
.input
elements which also makes them more user friendly.<label class="choice"> <input type="checkbox"> Choice Checkbox Example 1 </label> <label class="choice"> <input type="radio" name="radio-1"> Choice Radio Example 1 </label>
-
Label
You'll rarely have a form without labels and are styled differently depending on their context. There are a number of classes that are available to modify the appearance and behavior of labels.
<label>Default Label</label> <!-- Makes subtle styles for sub label --> <label class="sub">...</label> <!-- Hides lables but keeps them accessible for screen readers --> <label class="hide">...</label> <!-- Makes labels display block with top padding for alignment --> <label class="block">...</label> <!-- Makes labels display inline-block with top padding for alignment --> <label class="inline">...</label>
-
Notes
Notes are custom form elements in BaseWeb and are represented using the
.note
class. Notes can work as descriptive text, help text or any sort of informative text to help a user navigate a form. They are contextual and receive unique spacing based on their siblings.<p class="note">...</p> <div class="note"> <p>...</p> <p>...</p> </div>
Form Mixins
Because of the complexity of HTML forms, BaseWeb mainly favors using classes and context to style forms. But there are a small set of mixins that can be used to expand form customization.
-
placeholder
Sets the placeholder text color for input fields that use the placeholder attribute.
@mixin placeholder( $color, $options: () ) // @param $color // @type color // @param $options // @type map // @default $forms map
-
make-form-group-base
Creates the styles for a base form group by applying vertical spacing.
@mixin make-form-group-base( $options: () ) // @param $options // @type map // @default $forms map
-
make-form-group-inline
Creates the styles for making an inline form group element.
@mixin make-form-group-inline( $options: () ) // @param $options // @type map // @default $forms map
-
make-input-inline
Creates the styles for making an inline form element.
@mixin make-input-inline( $options: () ) // @param $options // @type map // @default $forms map
Videos
Videos in HTML can be embedded into a document in a few different ways. If you're using YouTube or Vimeo, they provide an <iframe>
for embedding videos. Flash based video implementations use the <object>
and <embed>
elements. And then there is the native HTML5 <video>
element.
Regardless of the method you use embedding a video, chances are you want that video to be responsive (or fluid). For those cases, you have the .video-wrapper
element:
<div class="video-wrapper">
<iframe src="..."></iframe>
</div>
You also have the .video-item
class to specifically declare a video.
<div class="video-wrapper">
<iframe class="video-item" src="..."></iframe>
</div>
Video Ratios
The default video ratio can be set using the $videos('ratio')
variable (56.25% by default). Alternatively, you can also specifically set a video's ratio by applying the ratio classes to the video wrapper element.
<!-- Sets video ratio to 16x9 (56.25% height) -->
<div class="video-wrapper ratio-16x9">...</div>
<!-- Sets video ratio to 4x3 (75% height) -->
<div class="video-wrapper ratio-4x3">...</div>
For more information on the technique BaseWeb uses to create fluid videos, checkout this tutorial over at CSS-Tricks.
Video Variables
Video variables are encompassed within the $videos
map and are used in video mixins to set default values.
-
$videos('classes')
true
Whether or not we should output video classes. Set tofalse
if you want to use the mixins semantically and/or reduce CSS output. -
$videos('margin')
2em 0
-
$videos('ratio')
56.25%
Video Function
-
aspect-ratio
Returns the aspect ratio in the form of a percentage.
@function aspect-ratio( $width, $height ) // @param $width // @type width aspect ratio (number) // @param $height // @type height aspect ratio (number) // @return height percentage of aspect ratio
Video Mixins
-
make-video-fluid
Adds styles for creating fluid videos. Should be applied to a wrapping element of a video.
@mixin make-video-fluid( $options: () ) // @param $options // @type map // @default $video map
-
build-video-ratio
Creates a ratio class using an aspect width and height. The class that's created uses the passed in ratio
.ratio-AxB
whereA
is the passed in width andB
is the passed in height.@mixin build-video-ratio( $width, $height, $class: true ) // @param $width // @type width aspect ratio (number) // @param $height // @type height aspect ratio (number)
Example Usage
// SCSS .video-wrapper { @include build-video-ratio(16, 9); @include build-video-ratio(4, 3); } // CSS Output .video-wrapper .ratio-16x9 { padding-bottom: 56.25%; } .video-wrapper .ratio-4x3 { padding-bottom: 75%; }
Icons
The Icons module is currently being developed.