Currently v1.2.0 Download BaseWeb

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 to null 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 to null 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&mdash;much more happiness, truth, beauty and wisdom will come to you that way.</p>
      <footer><cite>&ndash; 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.

    – Christopher Hitchens
  • <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>
  1. List item one
  2. List item two
    1. Nested list item one
    2. Nested list item two
    3. Nested list item three
  3. List item three
  4. List item four
  5. 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 to false 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."

— Noam Chomsky

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 to false 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 the make-table-responsive() mixin to a div wrapping a table to create this effect. Keep in mind that it's triggered using media-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="...">
Placeholder image

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="...">
    Placeholder image
  • img.align-center

    Centers an image by making it block and giving it left and right margins of auto.

    <img class="align-center" src="...">
    Placeholder image
  • 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="...">
    Placeholder image
  • img.rounded

    Adds rounded border radius based on the default border-radius setting $border-radius.

    <img class="rounded" src="...">
    Placeholder image
  • img.circle

    Makes a circle effect on an image by adding 50% border radius.

    <img class="circle" src="...">
    Placeholder image
  • img.polaroid

    Adds a polaroid effect to an image.

    <img class="polaroid" src="...">
    Placeholder image

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 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in ultricies nunc. Maecenas egestas tellus eget ipsum fermentum commodo. Nam rhoncus magna quam, quis commodo lorem fermentum quis.

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 Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in ultricies nunc. Maecenas egestas tellus eget ipsum fermentum commodo. Nam rhoncus magna quam, quis commodo lorem fermentum quis.

  • .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 and color.

    
    <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 the rows 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 the size and multiple 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>
    

    This is an example note.

    This is an example note.

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

Buttons

There are four ways you can markup a button. An anchor, button or input element that has a type set to button or submit. BaseWeb styles buttons the same, regardless of the method you use to mark them up.

<a class="button" href="#" role="button">Anchor Button</a>
<button class="button" type="submit">Button</button>
<input class="button" type="button" value="Input Button">
<input class="button" type="submit" value="Input Submit">
Anchor Button

Button Variables

Button variables are encompassed within the $buttons map and are used throughout all button mixins to set default values.

  • $buttons('classes') true Whether or not we should output button classes. Set to false if you want to use the button modifier mixins semantically and/or reduce CSS output.
  • $buttons('padding') 0.75em 1.5em
  • $buttons('padding-small') 0.5em 1.25em
  • $buttons('padding-large') null
  • $buttons('font-family') inherit
  • $buttons('font-size') 1em
  • $buttons('font-size-small') 0.9em
  • $buttons('font-size-large') 1.4em
  • $buttons('line-height') 1.5em
  • $buttons('color') $color-dark
  • $buttons('font-weight') inherit
  • $buttons('text-shadow') none
  • $buttons('background') $white
  • $buttons('background-gradient') false Whether or not to use a gradient for button background. If true, the $buttons('background') will be used as the start color and darkened for the end color using the $buttons('background-deg') as a modifier.
  • $buttons('background-deg') 5% The degree that the hover background color or gradient end color is modified.
  • $buttons('background-clip') border-box
  • $buttons('box-shadow') inset 0 0 0 rgba($black, 0)
  • $buttons('border-width') 1px
  • $buttons('border-style') solid
  • $buttons('border-color') rgba($black, 0.15)
  • $buttons('border-radius') $border-radius
  • $buttons('transition-property') (color, background-color, box-shadow, border-color)
  • $buttons('transition-duration') 1s
  • $buttons('transition-timing-function') linear
  • $buttons('hover', 'color') default When set to default, the hover color will be set to the base button color.
  • $buttons('hover', 'background') darken The color to use on :hover. If set to lighten or darken it will take the $buttons('background') color and lighten or darken it respectively using $buttons('background-deg') as the modifier. You can also pass a color to use for :hover.
  • $buttons('hover', 'box-shadow') inset 0 1px 2px rgba($black, 0.1)
  • $buttons('hover', 'border-color') rgba($black, 0.25)
  • $buttons('hover', 'transition-duration') 0.1s
  • $buttons('active', 'color') default When set to default, the hover color will be set to the base button color.
  • $buttons('active', 'background') darken The color to use on :active. If set to lighten or darken it will take the $buttons('background') color and lighten or darken it respectively using $buttons('background-deg') as the modifier. You can also pass a color to use for :active.
  • $buttons('active', 'box-shadow') inset 0 1px 2px rgba($black, 0.2)
  • $buttons('active', 'border-color') rgba($black, 0.25)
  • $buttons('active', 'transition-duration') 0

Button Mixins

Button are common place on the web these days, especially in web applications. Whether you need one, or a dozen button types and styles, BaseWeb provides mixins and classes for creating beautiful buttons to add to your UI toolkit.

  • make-button

    Creates the base styles for a button modifier mixin or class. Usually applied directly through a base button class, mixin or an extend placeholder. If button modifier classes are enabled, you are provided .button for your base button class.

    @mixin make-button( $options: () )
    // @param $options
    //   @type map
    //   @default $buttons map

    Example Usage

    This example shows us using a %base-button placeholder for the extend method. Other methods include adding make-button() to a general class which is applied to button elements directly (which is the method BaseWeb uses for its classes).

    %base-button {
      @include make-button();
    }
    .button-purchase {
      @extend %base-button;
      ...
    }
    .button-cart {
      @extend %base-button;
      ...
    }
    
  • add-button-color

    Handles all the color variations of a button such as color, text-shadow, background and border color.

    @mixin add-button-color( $options: () )
    // @param $options
    //   @type map
    //   @default $buttons map

    Example Usage

    Use this mixin along with make-button() to create custom semantic button styles. You can pass in a map to replace any of the defaults from the $buttons map.

    
    .button-custom {
      @include make-button();
      @include add-button-color((
        'color' : $white,
        'background' : $violet
      ));
    }

    Available Classes

    If you have button class modifiers enabled, BaseWeb will provide you with a set of button classes and semantic aliases ready to use right away.

    <!-- .button-default default button class -->
    <button class="button default">Default</button>
    
    <!-- .button.blue class with .primary & .active semantic aliases -->
    <button class="button blue">Blue</button>
    <button class="button primary">Primary</button>
    <button class="button active">Primary</button>
    
    <!-- .button.green class with .success semantic alias -->
    <button class="button green">Green</button>
    <button class="button success">Success</button>
    
    <!-- .button.orange class with .warning semantic alias -->
    <button class="button orange">Orange</button>
    <button class="button warning">Warning</button>
    
    <!-- .button.red class with .danger semantic alias -->
    <button class="button red">Red</button>
    <button class="button danger">Danger</button>
    
    <!-- .button.black class with .secondary semantic alias -->
    <button class="button black">Black</button>
    <button class="button secondary">Secondary</button>
  • add-button-size

    Handles size variations for buttons. This is done by changing the padding, font-size and line-height based on the parameters passed.

    @mixin add-button-size( $size, $option: () )
    // @param $size
    //   @type string (small, default, large)
    // @param $options
    //   @type map
    //   @default $buttons map

    Example Usage

    The first parameter is a quick way to make a button use the default small or large size set in our $buttons map. Or you can pass in a $options:() map for custom padding, font-size and line-height.

    
    // Use default small size
    .button-small {
      @include add-button-size('small');
    }
    
    // Use default large size with custom font size
    .button-custom-large {
      @include add-button-size('large', (
        'font-size': 20px
      ));
    }
    
    // Set a custom button size
    .button-custom-size {
      @include add-button-size(20px 40px, (
        'font-size': 20px,
        'line-height': 24px
      ));
    }
    

    Available Classes

    <button class="button primary large">Large Button</button>
    <button class="button primary">Default Button</button>
    <button class="button primary small">Small Button</button>
  • add-button-block

    Makes the button block with 100% width. This is typically used for mobile friendly buttons.

    @mixin add-button-block( $option: () )
    // @param $options
    //   @type map
    //   @default $buttons map

    Example Usage

    
    .button-custom-mobile {
      @include make-button();
      @include add-button-color();
      @include add-button-block();
    }
    
    <button class="button green block">Block Button</button>

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 to false 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 where A is the passed in width and B 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.