Base CSS

A simple CSS theme to kick start your project. Provides a consistent responsive style across mobile and desktop browsers for the base HTML elements. The popular Open Sans font is used to keep the text consistent between browsers.

Designed for Chrome, Firefox, Safari and IE9+

View on GitHib

Get Started

To use Base CSS in your project, include the below CDN links in your HTML. Alternatively you can self-host by installing the NPM package in your project.

<link href="https://unpkg.com/base-css-theme@1.1.3/base.css" rel="stylesheet">
<script src="https://unpkg.com/base-css-theme@1.1.3/base.js"></script>

npm install --save-dev base-css-theme

HTML5 Doctype

Base CSS makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Viewport

Base CSS is mobile first. To ensure proper rendering and touch zooming, add the viewport meta tag inside the head element.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Container

Use container for a responsive fixed width container.

<div class="container">
  ...
</div>

Media Queries

The following media query is used to apply alternate styles for desktop devices.

@media (min-width: 1200px) { 
  ...
}

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph

Normal text, Strong text, Underlined text, Italic text, Small text

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML
<p>Normal text, <strong>Strong text</strong>, <u>Underlined text</u>, <i>Italic text</i>, <small>Small text</small></p>

Icons

The Google Material icon collection is included. A list of available icons can be found on their website https://material.io/icons/.

file_download archive cloud local_printshop

HTML
<i class="icon">file_download</i>

Lists

Unordered List

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
HTML
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

Table

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3LarryBird@twitter
HTML
<table>
  <thead>
    <tr><th>#</th><th>First Name</th><th>Last Name</th><th class="mobile-hide">Username</th></tr>
  </thead>
  <tbody>
    <tr><th>1</th><td>Mark</td><td>Otto</td><td class="mobile-hide">@mdo</td></tr>
    <tr><th>2</th><td>Jacob</td><td>Thornton</td><td class="mobile-hide">@fat</td></tr>
    <tr><th>3</th><td>Larry</td><td>Bird</td><td class="mobile-hide">@twitter</td></tr>
  </tbody>
</table>

Buttons

Basic

Button Icons

The Google Material icon collection can be used to add icons to buttons. A list of available icons can be found on their website https://material.io/icons/.

Icon Only Buttons

HTML
<button class="primary">Save</button> <button>Cancel</button>

<button class="primary"><i class="icon">file_download</i> Download</button>

<button class="icon-button"><i class="icon">account_box</i></button>

Forms

Forms use a full width stacked layout by default on all screen sizes. Add inline to the form to switch to a horizonal layout on large displays.

Stacked Form

HTML
<form>
<label for="title">Title</label>
<div class="select">
  <select id="title">
    <option>Mr</option>
    <option>Mrs</option>
    <option>Miss</option>
  </select>
</div>

<label for="name">Name</label>
<input id="name" type="text" placeholder="Name" value="Mark Otto">

<label for="mobile">Mobile</label>
<input id="mobile" type="tel" placeholder="Mobile Number">

<label for="accept">Accept Terms</label>
<div class="checkbox">
  <input id="accept" type="checkbox">
  <span></span>
</div>

<label for="notes">Notes</label>
<textarea id="notes" placeholder="Add some notes">One
Two
Three</textarea>
</form>

Inline

Add inline to the form to use a horizonal inline layout on large displays and a stacked layout on smaller displays.

HTML
<form class="inline">
  <label for="username">Username</label><div class="select">
    <select id="username">
      <option>Mark_Otto</option>
      <option>Jacob_Thornton</option>
      <option>Larry_Bird</option>
    </select>
  </div>

  <label for="password">Password</label><input id="password" type="password" placeholder="Password" value="xxxxxx">

  <label for="rememberme">Remember Me</label>
  <div class="checkbox">
    <input id="rememberme" type="checkbox" checked>
    <span></span>
  </div>

  <button class="primary"><i class="icon">forward</i>Sign In</button>
</form>

Field Groups

Use the field-group container to join multiple form fields together to create a custom field. Buttons must be inside a field-buttons container.

Stacked
Inline
person
HTML
<h5>Stacked</h5>

<form>
  <div class="field-group">
      <input type="url" value="http://google.com">
      <div class="field-buttons"><button class="primary">Go</button></div>
  </div>

  <div class="field-group">
      <input type="url" value="http://google.com">
      <div class="field-buttons">
        <button class="primary"><i class="icon">file_download</i></button>
        <button class="primary"><i class="icon">content_copy</i></button>
      </div>
  </div>

  <div class="field-group">
      <div class="select">
        <select>
          <option>Mr</option>
          <option>Mrs</option>
          <option>Miss</option>
        </select>
      </div>
      <input type="text" value="Smith">
  </div>
</form>


<div class="field-group" id="shirtFormGroup">
  <div class="select">
    <select>
      <option>Size</option>
      <option>Small</option>
      <option>Medium</option>
    </select>
  </div>
  <input type="text" value="Shirt Text">
  <div class="select">
    <select>
      <option>Qty</option>
      <option>1</option>
      <option>2</option>
    </select>
  </div>
</div>

<div class="field-group" id="locationFormGroup">
  <div class="select">
    <select>
      <option>County</option>
      <option>US</option>
      <option>UK</option>
    </select>
  </div>
  <div class="select">
    <select>
      <option>State</option>
      <option>California</option>
      <option>Massachusetts</option>
      <option>Texas</option>
      <option>Washington</option>
    </select>
  </div>
  <input type="text" value="City">
  <div class="field-buttons"><button class="primary"><i class="icon">add</i></button></div>
</div>

<h5>Inline</h5>

<form class="inline">
  <div class="field-group">
    <input type="text" value="Tracking code">
    <div class="field-buttons"><button class="primary"><i class="icon">content_copy</i></button></div>
  </div>

  <div class="field-group">
    <div class="field-buttons"><button class="primary"><i class="icon">autorenew</i></button></div>
    <input type="text" value="New Secret">
    <div class="field-buttons"><button class="primary"><i class="icon">content_copy</i></button></div>
  </div>

  <div class="field-group">
    <div class="select">
      <select>
        <option>Mr</option>
        <option>Mrs</option>
        <option>Miss</option>
      </select>
    </div>
    <div class="field-icons">
      <i class="icon left">person</i>
      <input type="text" value="Smith" required>
    </div>
  </div>

  <div class="field-group" id="location2FormGroup">
    <input type="text" id="city" value="City">
    <div class="select">
      <select>
        <option>State</option>
        <option>California</option>
        <option>Massachusetts</option>
        <option>Texas</option>
        <option>Washington</option>
      </select>
    </div>
    <div class="select">
      <select>
        <option>County</option>
        <option>US</option>
        <option>UK</option>
      </select>
    </div>
  </div>
</form>

Field Icons

Add icons to a form field by placing the icons and the field inside a field-icons container.

phone_android
person clear
HTML
<form class="inline">
  <div class="field-icons">
    <i class="icon left">phone_android</i>
    <input type="text" value="0800 123456">
  </div>

  <div class="field-icons">
    <i class="icon left">person</i>
    <i class="icon right">clear</i>
    <input type="text" value="Bob Smith">
  </div>
</form>

Field Validation

Use the input attribute required in conjunction with type to highlight invalid fields. Add feedback text using field-feedback inside a field container along with the input field.

person clear
Invalid email address
Enter a work email address
HTML
<form class="inline">
  <input type="url" value="http\\www.google.com" required>

  <div class="field">
    <div class="field-icons">
      <i class="icon left">person</i>
      <i class="icon right">clear</i>
      <input type="email" value="bob@@acme.com" required>
    </div>
    <div class="field-feedback invalid">Invalid email address</div>
  </div>

  <div class="field">
    <input type="email" value="bob@acme.com" required>
    <div class="field-feedback">Enter a work email address</div>
  </div>
</form>

Dropdown Menu

HTML
<div class="dropdown">
  <button class="primary">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a href="#item1">Item 1</a></li>
    <li><a href="#item2">Item 2</a></li>
    <li><a href="#item3">Item 3</a></li>
  </ul>
</div>

Navbar

HTML
<nav class="navbar">
    <ul class="nav">
        <li><a href="#home">Acme Corp</a></li>
    </ul>
    <button class="icon-button dropdown"><i class="icon">menu</i></button>
    <div class="nav-collapse">
        <ul class="nav">
            <li><a href="#products">Products</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#about">About</a></li>
        </ul>
        <ul class="nav nav-right">
            <li><a href="#account">John Smith</a></li>
            <li><a href="#logOut">Logout</a></li>
        </ul>
    </div>
</nav>

Tabs

Tab one content
Tab two content
Tab three content
HTML
<div class="tabs">
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">One</label>
    
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Two</label>
    
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Three</label>
    
  <section class="tab" id="tab1content">
    Tab one content
  </section>

  <section class="tab" id="tab2content">
    Tab two content
  </section>

  <section class="tab" id="tab3content">
    Tab three content
  </section>
</div>

Alerts Banner

The requested operation has completed successfully.
The requested operation could not be completed.
HTML
<div class="alerts-banner">
  <div class="alert alert-info">The requested operation has completed successfully.</div>
  <div class="alert alert-error">The requested operation could not be completed.</div>
</div>

Grid Layout

col-1-8
col-1-8
col-1-8
col-1-8
col-1-8
col-1-8
col-1-8
col-1-8
col-2-8
col-6-8
col-4-8
col-4-8
col-5-8
col-3-8
col-7-8
col-1-8
HTML
<div class="row">
  <div class="col-1-8">col-1-8</div>
  <div class="col-1-8">col-1-8</div>
  <div class="col-1-8">col-1-8</div>
  <div class="col-1-8">col-1-8</div>
  <div class="col-1-8">col-1-8</div>
  <div class="col-1-8">col-1-8</div>
  <div class="col-1-8">col-1-8</div>
  <div class="col-1-8">col-1-8</div>
</div>
<div class="row">
  <div class="col-2-8">col-2-8</div>
  <div class="col-6-8">col-6-8</div>
</div>
<div class="row">
  <div class="col-4-8">col-4-8</div>
  <div class="col-4-8">col-4-8</div>
</div>
<div class="row">
  <div class="col-5-8">col-5-8</div>
  <div class="col-3-8">col-3-8</div>
</div>
<div class="row">
  <div class="col-7-8">col-7-8</div>
  <div class="col-1-8">col-1-8</div>
</div>