Seed CSS

A light-weight and mobile first CSS boilerplate.

v2.5.1

DOWNLOAD CONTRIBUTE

Get started

Install

Fork, download or install via NPM.

Prepare

Create the minimum markup

Done

You are good to go!

<head >
  ...
  <!-- Add something like this to the HEAD of your page for the Style -->
  <link href="/path/to/seed.css" rel="stylesheet" type="text/css" >

  <!-- Add something like this to the HEAD of your page when using the JS Helpers -->
  <script defer src="/path/to/seedcss.js" rel="stylesheet" type="text/css" ></script>
</head>

Supported browsers:

Desktop: IE 10+, Edge 12+, Chrome 21+, Firefox 22+, Opera 12.1+, and Safari 6.1+.

Mobile: Safari 7+, Android 4.4+, Blackberry 10+, Opera 12.1+, Android Chrome 71+, Android Firefox 64+ and IE 11.

# When using NPM, run this in a terminal window
$ npm install --save seed-css

The basic

This is the foundation of seed-css. In other words, it is the most fundamental features from this boilerplate. By design, the basic comes with a container, grid, responsive images, typography, pre-defined media queries and a color scheme. Even though it looks kinda few things, it lonely can help you a lot to speed up the development of a website or app.

。。。

Containers

Containers are simple DIV elements with pre-defined width (depending on the screen size) which will help you to keep the content enclosed in a specific area.

This's a container.

<div class="container" ></div>
<div class="container-fluid" ></div>

	Screen width	Container
Extra Small Mobiles	< 320px	90%
Mobiles	< 600px	90%
Tablets	<= 990px	85%
Desktops/ laptops	<= 1200px	80%
Extra large desktops/ TVs	> 1200px	75%

Fluid containers are all 100% with no max-width.

。。。

Grid

The grid (system) helps you to create responsive designs by defining a different number of columns (there's a maximum of 12) depending on the device width.

Offsets are also available. To apply offsets, just use the class *-offset-* to your classname.

Have fun playing with columns!

11 columns with offset of 1

Code example

<!-- This's a row. You can have as many rows as you need. -->
<div class="row" >
  <!-- This's a column. You can have up to 12 columns in a row. -->
  <div class="col sm-12 md-6 lg-3" > ... </div>
  <div class="col sm-12 md-6 lg-9" > ... </div>
</div>

Available classes for rows

Class	Remarks
.row	Defines each row of a grid
.stretch	Forces all columns from given row to have the same height.

Available classes for columns

Class	Detail	Remarks
.col		Defines each column of a grid container
.stretch		Defines columns that fullfil the remaining available space from a .row. To be used alongsite .col
.xs-*	(1 ~ 12)	Defines a column size for extra small screens (max-width: 320px). To be used alongside .col.
.sm-*	(1 ~ 12)	Defines a column size for small screens (max-width: 600px). To be used alongside .col.
.md-*	(1 ~ 12)	Defines a column size for medium screens (max-width: 990px). To be used alongside .col.
.lg-*	(1 ~ 12)	Defines a column size for large screens (max-width: 1200px). To be used alongside .col.
.xl-*	(1 ~ 12)	Defines a column size for extra-large screens (min-width: 1200px). To be used alongside .col.
-offset-	(.sm, .md, .lg and .xl) and (1 ~ 12)	Creates an offset of columns. To be used alongside .col and its screen size. E.g: .md-offset-2.

。。。

Responsive images

By default, all images are considered responsive and will adjust accordingly to the window size. In case you, for any sake, need a non responsive image, just add the class .no-responsive on it.

Sample of a responsive image

<img src="..." alt="..." >

Circle and Thumbnail

Circle image sample

<!-- makes a circle image -->
<img class="circle" ... >

<!-- makes a square small image -->
<img class="thumb" ... >

。。。

Typography

All default HTML tags are supported, including but not limited to the below few examples.

<head >
  ... 
  <!-- Add something like this to the HEAD of your page -->
  <!-- Will add Open-Sans(400) and Lato (300,700) as title and general font-families -->
  <link href="//fonts.googleapis.com/css?family=Lato:300,700|Open+Sans:400" rel="stylesheet">
  ...
</head>

For other options, check Google Fonts out.

Header 1	Font-size: `5rem`	<h1> ... </h1>
Header 2	Font-size: `4.2rem`	<h2> ... </h2>
Header 3	Font-size: `3.6rem`	<h3> ... </h3>
Header 4	Font-size: `3rem`	<h4> ... </h4>
Header 5	Font-size: `2.4rem`	<h5> ... </h5>
Header 6	Font-size: `1.5rem`	<h6> ... </h6>
Paragraph	Font-size: `1.5rem`	<p> ... </p>
Bold	Font-size: `1.5rem`	<strong> ... </strong>
Italic	Font-size: `1.5rem`	<i> ... </i>
Underlined	Font-size: `1.5rem`	<u> ... </u>
Anchors	Font-size: `1.5rem`	<a href="" target="" > ... </a>
Ordered lists: First item Second item Nested first Nested second ... Third item Unordered lists: First item Second item Nested first Nested second ... Third item	Font-size: `1.5rem`	<!-- replace OL by UL or DL for different list types --> <ol > <li > ... </li> <li > ... </li> <li > ... </li> </ol>
Horizontal lines		<hr /> <hr class="dotted" /> <hr class="solid" />
`Code`	Font-size: `1.5rem`	<code > ... </code>
Pre	Font-size: `1.5rem`	<pre > ... </pre>

。。。

Media queries

Media queries allows us to make an even more accurated design. In seed-css they are build to represent the screen sizes below. Also, you can safely write your own styling rules using the following queries and keep covered by seed-css grid system. Using a different set of media queries may overwrite this boilerplate grid system.

Code example

// Mobile first
@media only screen and (min-width: 0px) {
  ...
}

// Tablets
@media only screen and (min-width: 600px) {
  ...
}

// ...

Pre-defined medias

	Screen width	Prefix	Columns	Container
Extra Small Mobiles	< 320px	.xs	12	90%
Mobiles	< 600px	.sm	12	90%
Tablets	<= 990px	.md	12	85%
Desktops/ laptops	<= 1200px	.lg	12	80%
Extra large desktops/ TVs	> 1200px	.xl	12	75%

Queries definition

Breakpoint	Remarks
`@media only screen and (max-width: 320px) {}`	For extra small mobile devices. (Mobile first, first iPhones)
`@media only screen and (min-width: 0px) {}`	For mobile devices. (Mobile first)
`@media only screen and (min-width: 600px) {}`	For tablets devices.
`@media only screen and (min-width: 990px) {}`	For desktop/ laptop devices.
`@media only screen and (min-width: 1200px) {}`	For extra large desktop/ TV devices.

。。。

Icons

For the sake of flexibility, seed-css does not implement its own set of icons. However, there are tons of really cool icons out there which you can easily use with this boilerplate. Some of them are trully special and free, which I strongly recommend to you to use.

Recommended (FREE) Icons/Web fonts

。。。

Colors

Oh, yes! This boilerplate wouldn't worth without colors, isn't it? That's why seed-css comes with a pre-defined set of colors exposed in classes, and the same colors can be applied both to the foreground (texts) and the background from any HTML element.

The full color list

Foreground class	Background class	Color
`.primary`	`.primary-background`	`#1466ff`
`.secondary`	`.secondary-background`	`#4b70b4`
`.red`	`.red-background`	`#d32f2f`
`.orange`	`.orange-background`	`#fb8c00`
`.green`	`.green-background`	`#43a047`
`.purple`	`.purple-background`	`#8e24aa`
`.darkgrey`	`.darkgrey-background`	`#666`
`.grey`	`.grey-background`	`#ccc`
`.softgrey`	`.softgrey-background`	`#f2f2f2`
`.white`	`.white-background`	`#ffffff`

。。。

Components

Alerts

Alerts are used to notify the users in many different situations.

.alert

This's a default alert

.alert.info

This's an info alert

.alert.success

This's a success alert

.alert.warning

This's a warning alert

.alert.danger

This's a danger alert

Code example

<!-- default -->
<div class="alert" >
  The message... 
</div>

<!-- info -->
<div class="alert info" >
  The message... 
</div>

<!-- success -->
<div class="alert success" >
  The message... 
</div>

<!-- warning -->
<div class="alert warning" >
  The message... 
</div>

<!-- danger -->
<div class="alert danger" >
  The message... 
</div>

。。。

Badges

Badges are another component commonly used to notifications.

default

info

success

warning

danger

<!-- default -->
<span class="badge" > ... </span>

<!-- info -->
<span class="badge info" > ... </span>

<!-- success -->
<span class="badge success" > ... </span>

<!-- warning -->
<span class="badge warning" > ... </span>

<!-- danger -->
<span class="badge danger" > ... </span>

。。。

Buttons

Buttons can be created with seed-css by simply adding the class .btn to any <a /> or <button/> element. Adding the class .primary it will become a primary button.

a.btn

Playing with colors

Colored (.btn.color)

.btn.primary
.btn.secondary
.btn.red

.btn.orange
.btn.green
.btn.purple

Link style (.btn.link)

.btn.link

Playing with states

Disabled (.disabled) or `disabled` property

Playing with sizes

.btn.small .btn.medium

Code example

<!-- .btn class makes an anchor looks like a button -->
<a class="btn" href="..." > ... </a>

<!-- default buttons and input[type="button"] -->
<button type="button" class="btn" > ... </button>
<input type="button" class="btn" value="..." />

<!-- .btn-primary makes buttons colored -->
<a class="btn btn-primary" href="..." > ... </a>
<a class="btn btn-red" href="..." > ... </a>
<a class="btn btn-green" href="..." > ... </a>

<!-- .btn-primary makes buttons on different sizes -->
<a class="btn btn-medium" href="..." > ... </a>
<a class="btn btn-small" href="..." > ... </a>

<!-- .btn-primary makes disabled buttons -->
<a class="btn disabled" href="..." > ... </a>
<button class="btn" disabled > ... </button>

Available classes

Class	Detail	Remarks
.btn		Makes anchors looks like buttons
.primary		Defines a 'primary' (blue) colored button
.secondary		Defines a 'secondary' (soft blue) colored button
.outline		Defines an outlined button, very similar to the default, however, used in combination with any color will produce an colored outlined button.
.disabled		Defines disabled buttons. Simply setting the `disabled` property will also make button looks like disabled
.link		Defines link styled buttons, which means no borders or background colors.
.(color)		Defines a colored button. Colors can be: `red`, `orange`, `green`, `purple` or `white`
.(size)		Defines a sized button. Sizes can be: `small` or `medium`. Default is `big`

。。。

Cards

Cards are important for applications and websites riches in content.

Simple cards

Card header

Card body

Card footer

Code example

<div class="card" >
  <div class="card-header" >
    <h5 class="card-title" >
      Card header
    </h5>
  </div>
  <div class="card-body" >
    <p > Card body</p>
  </div>
  <div class="card-footer" >
    <p > Card footer</p>
  </div>
</div>

Image cards

Card header
with image

Card body

Card footer

Code example

<div class="card card-image" >
  <div class="card-header" >
    <img 
      src="https://unsplash.it/350/200" 
      alt="Sample image card" 
    />
    <h5 class="card-title" >
      Card header
    </h5>
  </div>
  <div class="card-body" >
    <p > Card body</p>
  </div>
  <div class="card-footer" >
    <p > Card footer</p>
  </div>
</div>

。。。

Forms

Probably all websites and apps will contain (at least) one form, so, that's why seed-css has a really simple, easy to use and customizable form field stylesheet. Have a look on the examples below:

Simple elements

This is an input text

This is an input text with additional info This is an additional piece of information.

This is an input text with .error message This is an error message!

This is an input text with .warning message This is a warning message!

This is an input text with .success message This is a success message!

Grouped elements

First name

Last name

Code example

<!-- Example of an input text -->
<div class="field" >
  <label for="..." > ... </label>
  <input type="text" name="..." >
</div>

<!-- Example of an input text with feedback (success or error) -->
<div class="field has-feedback" >
  <label for="..." > ... </label>
  <input type="text" name="..." class="error" >
  <span class="warning" > ... </span>
  <span class="error" > ... </span>
  <span class="success" > ... </span>
</div>

<!-- Example of grouped fields -->
<div class="field group" >
  <div class="field" >
    <label for="..." > ... </label>
    <input type="text" name="..." >
  </div>

  <div class="field" >
    <label for="..." > ... </label>
    <input type="text" name="..." >
  </div>
</div>

File upload

PRO: id attribute is mandatory for file input fields and needs to match the for attribute from its label.

... Remove Attach

Code example

<!-- Example of file upload field -->
<div class="field seed-file" >
  <!-- The actual file input (Required) -->
  <input type="file" name="..." id="..." >

  <!-- Here's the magic (Required) -->
  <label for="..." >
    <span class="input" data-empty="No file chosen" > ... </span>

    <!-- Only visible when file is selected (Optional) -->
    <span class="cancel" > Remove </span>
    <!-- Only visible when there's not file selected (Optional) -->
    <span class="button" > Attach </span>
  </label>
</div>

Adding the property multiple to the input element will enable multiple files selection. Also adding data-multiple="{count} ..." will customize the selected message.

Exceptionally the file upload component works better with a javascript support. Using javascript will create a much better user experience. seed-css has a plug-and-play javascript library written in VanillaJS:

When using Node JS:

import SeedCSS from 'seed-css'; // Import 
SeedCSS.fileUpload(); // Initialize

When using Vanilla JS:

if (typeof SeedCSS !== 'undefined') {
  SeedCSS.fileUpload();
}

Textareas

PRO: Include the maxlength attribute if you want to enable the automatic character typing counter provided by seed-css.

This is a textarea ...

Code example

<!-- Example of a textarea -->
<div class="field" >
  <label for="..." > ... </label>
  <textarea name="..." > ... </textarea>
  <span role="counter" data-template="... %a ... %b ... %c" maxlength="..." > Calculating ... </span>
</div>

To make it simple and make the user experience better, seed-css is using javascript to automaticaly calculates types chars from textareas. If you use the Javascript given, it's basically plug-an-play.

When using Node JS:

import SeedCSS from 'seed-css'; // Import 
SeedCSS.textArea(); // Initialize

When using Vanilla JS:

if (typeof SeedCSS !== 'undefined') {
  SeedCSS.textArea();
}

Dropdowns (Selects)

This is a select/ dropdown

This is a select/ dropdown with error message This is an error message!

Code example

<!-- Example of a dropdown -->
<div class="field seed-select" >
  <label for="..." > ... </label>
  <select name="..." >
    <option value="..." > ... </option>
    <option value="..." > ... </option>
    <option value="..." > ... </option>
  </select>
</div>

Radio buttons & Checkboxes

This is a radio button

This is a radio button with a warning

This is a radio button with error

This is a radio button with a success (needs to be checked)

This is a checkbox

This is a checkbox with warning

This is a checkbox with error

This is a checkbox with success (needs to be checked)

Code example

<!-- Example of an input radio -->
<div class="field" >
  <input type="radio" name="..." >
  <label for="..." >
    ...
  </label>
</div>

<!-- Example of a checkbox -->
<div class="field" >
  <input type="checkbox" name="..." >
  <label for="..." >
    ...
  </label>
</div>

。。。

Modals

A modal window is an essential component for providing the best user experience, it's the easiest way for requesting imediate feedback from your visitors.

<!-- The trigger -->
<button type="button" role="modal" data-modal-id="my-modal" class="btn-primary" > 
  Open modal
</button>

<!-- The modal -->
<div class="modal hide" id="my-modal" >
  <div class="modal-window" >
    <div class="modal-header" >
      <h3 class="modal-title" >Hello world</h3>
      <!-- To close the modal, the simplest way is add role="modal-dismiss" to a clickable element -->
      <a href="#" role="modal-dismiss" class="dismiss" >
        <i class="ion-close" ></i>
      </a>
    </div>
    <div class="modal-body" >
      <p >This' the body of my overlay modal window.</p>
    </div>
    <div class="modal-footer" >
      <p >And the footer.</p>
    </div>
  </div>
</div>

Using animation when showing/ hiddng the modal creates an even better experience to your users/ visitors.

To make it simple, seed-css is using Animate.CSS to apply animation to the modal window and, if you use the Javascript given, it's basically plug-an-play.

When using Node JS:

Install it using NPM: $ npm install seed-css --save

import SeedCSS from 'seed-css'; // Import 
SeedCSS.modal(); // Initialize

When using Vanilla JS:

First download the javascript library here.

<script src="seed-css.js" ></script>

if (typeof SeedCSS !== 'undefined') {
  SeedCSS.modal();
}

Optionally assigning it to a variable you can programatically show and hide the modal.

const modal = SeedCSS.modal(); 
modal.get('#modal').show();
modal.get('#modal').hide();

。。。

Navigation bar

Navigation bar is a responsive mobile first component and will fit any screen size. When in small screens you might want to use it in conjunction to the hide classes from utilities in order to show and hide the hamburguer menu, when needed.

Horizontal navigation bar

By default, navigation bar is horizontal in seed-css.

`.default`

`.primary`

`.secondary`

`.red`

`.orange`

`.green`

`.purple`

`.dark`

`.transparent`

Vertical navigation bar

However, you can still define vertical navigation bars depending on your needs. For that, you just need to add the class .vertical to the navigation bar element.

Code example

<!-- The Navigation bar -->
<nav > 
  <div class="container" > 
    <button class="hamburguer" >
      <span></span>
      <span></span>
      <span></span>
    </button>
    
    <!-- Use .logo class for a specific styling for logos -->
    <a href="#" class="logo hide-on-medium-and-up" > ... </a>

    <!-- Use .collapsible class for automatically collapse the navbar options when in small screens -->
    <ul class="collapsible" > 
      <li > 
        <!-- Use .logo class to show your logo when not collapsed -->
        <a href="#" class="logo" > LOGO </a>
      </li>

      <li > 
        <!-- Use .active class when the item is active in the navbar -->
        <a href="#" class="active" > ... </a>
      </li>

      <li > 
        <a href="#" > ... </a>
      </li>

      <!-- Use .right class always you wanna place it on the right side -->
      <li class="right" > 
        <a href="#" > ... </a>
      </li>
    </ul>
  </div>
</nav>

Available classes

To be used with NAV tag	Remarks
.sticky	Forces the navigation bar to be fixed on the top.
.vertical	Forces the navigation bar to be vertical.
.default OR NONE	Sets the `default` light theme.
.primary	Sets the `primary` theme.
.secondary	Sets the `secondary` theme.
.red	Sets the `red` theme.
.orange	Sets the `orange` theme.
.green	Sets the `green` theme.
.purple	Sets the `purple` theme.
.dark	Sets the `dark` theme.
.transparent	Sets the `transparent` theme.
To be used with A tag	Remarks
.logo	Creates a special styling for `<a />` tags in the navigation bar.
To be used with LI tag	Remarks
.right	Places the `<li />` tags to the right in the navigatin bar.

。。。

Off canvas menu

An off-canvas is that kind of component very useful to accomodate hidden navigation menus, optionally visible when the page is seeing on desktops, but essential when the viewport is as small as a mobile device.

Seed-css brings two different styles of off-canvas: aside (default) and overlay. In order to make the off-canvas work properly, it uses an arrangement of special markups and (as another exception to the rule) a JavaScript helper.

Code example

<!-- The off-canvas -->
<aside class="offcanvas" id="mycanvas"  > 
  ...
</aside>

<!-- The 'on-canvas' content wrapper -->
<main class="oncanvas"  > 
  ...
</main>

<!-- The trigger -->
<button role="offcanvas" data-id="mycanvas" > 
  ...
</button>

When using Node JS:

Install it using NPM: $ npm install seed-css --save

import SeedCSS from 'seed-css'; // Import 
SeedCSS.offCanvas(); // Initialize

When using Vanilla JS:

First download the javascript library here.

<script src="seed-css.js" ></script>

if (typeof SeedCSS !== 'undefined') {
  SeedCSS.offCanvas();
}

Optionally assigning it to a variable you can programatically show and hide the modal.

const canvas = SeedCSS.offCanvas(); 
canvas.get('#mycanvas').open();
canvas.get('#mycanvas').close();
canvas.get('#mycanvas').toggle();

。。。

Progress bars

Progress bar is an important elements for UX. If you use it accordingly, it's gonna pass the imediate response to the user. By default, the progress bar uses the .secondary color, but you can define all the existing colors from seed-css just by adding the color classes alongside .progress-bar.

Fixed progress

55%

60%

65%

70%

75%

80%

85%

90%

95%

Undefined progress

Code example

<!-- Fixed progress -->
<div class="progress-bar secondary" >
  <div class="bar" ></div>
  <label >60%</label>
</div>

<!-- Undefined progress -->
<div class="progress-bar primary undefined" >
  <div class="bar" ></div>
</div>

The undefined progress bar also supports a raibow animation. To achieve that simply use .rainbow alongside the .undefined class.

。。。

Spinners

The spinner has three different sizes: starndard, medium and big.

Standard

Medium ( `.medium` )

Big ( `.big` )

Also, the spinner animation speed can be controled with the classes: .fast (0.85s) and .furious (0.5s), while the normal speed animation will take 1.3s to complete the course.

Standard

Fast ( `.fast` )

Furious ( `.furious` )

If for some reason you want to hide the "loading" message, just include the class .lean or simply do not include the property data-label as seen in the examples.

Do you wanna colors?

Spinners also support all the pre-defined colors from seed-css.

Code example

<!-- Default -->
<div class="spinner" data-label="Loading ..." ></div>

<!-- Default, no label -->
<div class="spinner lean" data-label="Loading ..." ></div>
<div class="spinner" ></div>

<!-- Medium -->
<div class="spinner medium" data-label="Loading ..." ></div>

<!-- Big -->
<div class="spinner big" data-label="Loading ..." ></div>

。。。

Tables

Tables are intended to be used for display data.

In that matter, seed-css has very special classes to allow you show your data in a very clean and readable way. Basically, just using a default markup for data you'll get a styled table, but, you also can make use of special classes to make your tables even more readable.

default

Name	Email	Phone
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900

Code example

<table class="" >
  <tbody >
    <tr >
      <td > ... </td>
      <td > ... </td>
      <td > ... </td>
    </tr>
  </tbody>
</table>

stripped

Name	Email	Phone
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900

Code example

<table class="stripped" >
  <tbody >
    <tr >
      <td > ... </td>
      <td > ... </td>
      <td > ... </td>
    </tr>
  </tbody>
</table>

hovered

Name	Email	Phone
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900

Code example

<table class="hovered" >
  <tbody >
    <tr >
      <td > ... </td>
      <td > ... </td>
      <td > ... </td>
    </tr>
  </tbody>
</table>

bordered

Name	Email	Phone
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900

Code example

<table class="bordered" >
  <tbody >
    <tr >
      <td > ... </td>
      <td > ... </td>
      <td > ... </td>
    </tr>
  </tbody>
</table>

Table Responsive

Wrapping tables in a DIV with .table-responsive class helps very long tables looking good even in small devices. Wrapped tables become scrollable horizontally.

Name	Email	Phone
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900
John Wayne	john@wayne.com	123-4567-8900

Code example

<div class="table-responsive" >
  <table  >
    <tbody >
      <tr >
        <td > ... </td>
        <td > ... </td>
        <td > ... </td>
      </tr>
    </tbody>
  </table>
</div>

。。。

Tooltips

Tooltips are an important part of UX, where you can give user additional information about a component placed on his/her screen. Seed-css gives you a simple but very efficient tooltip, which doesn't even need javascript.

Code example

<!-- top -->
<span class="with-tooltip top" tooltip="Hover here!" >
  ...
</span>

<!-- right -->
<span class="with-tooltip right" tooltip="Hover here!" >
  ...
</span>

<!-- bottom (default) -->
<span class="with-tooltip bottom" tooltip="Hover here!" >
  ...
</span>

<!-- left -->
<span class="with-tooltip left" tooltip="Hover here!" >
  ...
</span>

。。。

Utilities

Utilities are classes that can help you to easily show up your data or content in a beatiful way.
It can be used combined with other available classes.

Class	Remarks
.lead	Increase font-size in 30%

Text alignment

This is left aligned

<p class="align-left" > ... </p>

This is center aligned

<p class="align-center" > ... </p>

This is right aligned

<p class="align-right" > ... </p>

This is justified. This is justified. This is justified. This is justified. This is justified. This is justified. This is justified. This is justified.

<p class="align-justify" > ... </p>

Class	Remarks
.align-left	Aligns on left
.align-right	Aligns on right
.align-center	Aligns on center
.align-justify	Aligns justified

。。。

Text transform

This text should not break when the screen width is smaller then the text length.

<p class="nowrap" > ... </p>

this text should be camel case.

<p class="camel-case" > ... </p>

only the first character of this text should be capitalized.

<p class="uc-first" > ... </p>

All letters of this text should be capitalized.

<p class="upper-case" > ... </p>

All letters of this text should be lower case.

<p class="lower-case" > ... </p>

Class	Remarks
.nowrap	Forces the HTML to ignore white spaces when wrapping lines.
.camel-case	Capitalize the first character of any word
.uc-first	Capitalize the first character only from the first word
.upper-case	Capitalize all character
.lower-case	Make all letters in lower case
.lead	Make the text 30% bigger

。。。

Element Floating

Floating elements are very hepful for quick element alignments.

This is floating center

This is floating left This is floating right

<span class="place-left" > ... </span>
<span class="place-right" > ... </span>
<span class="place-center" > ... </span>

Class	Remarks
.place-left	Places an element on left
.place-right	Places an element on right
.place-center	Places an element on center

。。。

Margins & Paddings

Every CSS boilerplate has its own set of standard styling defined, and on that matter, seed-css is not too different! It comes with pre-defined element styles that helps speed-up the development process. However, it also brings you a simple way for quickly customize any margin and/or padding definition for any element.

Margins

.ml-0

.mt-0

.mr-0

.mb-0

<!-- Removes margin left -->
<div class="ml-0" > ... </div>
<!-- Removes margin top -->
<div class="mt-0" > ... </div>
<!-- Removes margin right -->
<div class="mr-0" > ... </div>
<!-- Removes margin bottom -->
<div class="mb-0" > ... </div>

Possible value range goes from 0 to 50, in steps of 5.

Class	Remarks
.m-(number)	Defines what margin size should be applied to an element, all sides at same time.
.mx-(number)	Defines what margin size should be applied to both the `left` and `right` side from the element at same time.
.my-(number)	Defines what margin size should be applied to both the `top` and `bottom` side from the element at same time.
.ml-(number)	Defines what margin size should be applied to the `left` side of an element.
.mt-(number)	Defines what margin size should be applied to the `top` side of an element.
.mr-(number)	Defines what margin size should be applied to the `right` side of an element.
.mb-(number)	Defines what margin size should be applied to the `bottom` side of an element.

Paddings

.pl-0

.pt-0

.pr-0

.pb-0

<!-- Removes padding left -->
<div class="pl-0" > ... </div>
<!-- Removes padding top -->
<div class="pt-0" > ... </div>
<!-- Removes padding right -->
<div class="pr-0" > ... </div>
<!-- Removes padding bottom -->
<div class="pb-0" > ... </div>

Possible value range goes from 0 to 50, in steps of 5.

Class	Remarks
.p-(number)	Defines what padding size should be applied to an element, all sides at same time.
.px-(number)	Defines what padding size should be applied to both the `left` and `right` side from the element at same time.
.py-(number)	Defines what padding size should be applied to both the `top` and `bottom` side from the element at same time.
.pl-(number)	Defines what padding size should be applied to the `left` side of an element.
.pt-(number)	Defines what padding size should be applied to the `top` side of an element.
.pr-(number)	Defines what padding size should be applied to the `right` side of an element.
.pb-(number)	Defines what padding size should be applied to the `bottom` side of an element.

。。。

Shadows

Shadows are very useful for highligth a particular object or even given a motion sense, and seed-css comes already with two pre-defined shadows style (.with-shadow and .with-shadow-inset).

A drop shadowed element

An inset shadowed element

<!-- Drop shadow -->
<div class="with-shadow" > ... </div>

<!-- Inset shadow -->
<div class="with-shadow-inset" > ... </div>

。。。

Hiding

Show and hide elements from your pages can be an usefull ability to improve the user experience of your apps or websites.

Class	Remarks
.hide	Hide an element in any device.
.hide-only-small	Hide an element on small devices only.
.hide-only-medium	Hide an element on medium devices only.
.hide-only-large	Hide an element on large devices only.
.hide-only-extra-large	Hide an element on extra-large devices only.
.hide-on-medium-and-down	Hide an element on all small and medium devices
.hide-on-medium-and-up	Hide an element on all devices, except for small ones
.hide-on-large-and-down	Hide an element on all devices, except for extra-large ones
.hide-on-large-and-up	Hide an element on all large and extra-large devices

<!-- Hide on all devices -->
<div class="hide" > ... </div>

<!-- Hide on small devices -->
<div class="hide-only-small" > ... </div>

<!-- Hide on medium and small devices -->
<div class="hide-on-medium-and-down" > ... </div>

<!-- Hide on medium devices -->
<div class="hide-only-medium" > ... </div>

<!-- Hide on medium and large devices -->
<div class="hide-on-medium-and-up" > ... </div>

<!-- Hide on large devices -->
<div class="hide-only-large" > ... </div>

<!-- Hide on large and extra-large devices -->
<div class="hide-on-large-and-up" > ... </div>

<!-- Hide on small, medium and large devices -->
<div class="hide-on-large-and-down" > ... </div>

<!-- Hide on extra-large devices -->
<div class="hide-only-extra-large" > ... </div>

。。。

Display

The display classes make it very simple to control the object.

This is a block element

This is a inline-block element

This is a element with display initial

<!-- Block -->
<div class="d-block" > ... </div>

<!-- Inline Block -->
<div class="d-inline" > ... </div>

<!-- Initial -->
<div class="d-initial" > ... </div>

。。。

JavaScript Library Download

As a general rule, seed-css is not JavaScript dependent because it is implemented purely in CSS (using Sass), however, there are a few exceptions created in order to deliver a high level experience to your visitors/ users. Any component which has the (optional) JavaScript dependence has it written on its own section.

Existing helpers:

Helper	Detail	Remarks
fileUpload	`SeedCSS.fileUpload()`	Custom HTML InputFileUploadElement.
modal	`SeedCSS.modal([options])`	Modal overlay window with handlers for ESC key, outside click and animations powered by Animate.CSS. Check the documentation here
offCanvas	`SeedCSS.offCanvas()`	Off-canvas panel.
textArea	`SeedCSS.textArea()`	Custom HTML TextareaElement with characters counter.
scroll	`SeedCSS.scroll([options])`	A simple yet handy scroll smoother which makes scrolling navigation soft and more enjoyable.Check the documentation here
window.CustomEvent	`new CustomEvent(name[, option])`	A simple yet cross-browser polyfill for CustomEvents calls. Used internally by all helpers.

GET THE JAVASCRIPT HERE

It is plug-and-play and dependecy free.
or check the code on Github

License

The MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contributing

This is an open-source project and you can freely contribute.

By contributing you will help me to improve the code-base and make seed-css even better to other developers like us.

How to contribute?

Improving this page;
Testing and reporting bugs;
Fixing bugs or implementing missing features;

Check the source-code on Github, fork the project and submit your pull-requests. I'll review, discuss it as needed with you and approve and merge as soon as possible.

Don't know coding?

No worries! If you're not confident coding and think you cannot help much on that way, yet still wanna contribute in some way, you can help us donating any amout of money!

Buy me a coffee.

Get started

Install

Prepare

Done

Supported browsers:

The basic

Containers

Fluid containers are all 100% with no max-width.

Grid

Code example

Available classes for rows

Available classes for columns

Responsive images

Circle and Thumbnail

Typography

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Media queries

Code example

Pre-defined medias

Queries definition

Icons

Recommended (FREE) Icons/Web fonts

Colors

The full color list

Components

Alerts

Code example

Badges

Buttons

Playing with colors

Colored (.btn.*color*)

Link style (.btn.link)

Playing with states

Disabled (.disabled) or disabled property

Playing with sizes

Code example

Available classes

Cards

Simple cards

Card header

Code example

Image cards

Card headerwith image

Code example

Forms

Simple elements

Grouped elements

Code example

File upload

Code example

When using Node JS:

When using Vanilla JS:

Textareas

Code example

When using Node JS:

When using Vanilla JS:

Dropdowns (Selects)

Code example

Radio buttons & Checkboxes

Code example

Modals

When using Node JS:

When using Vanilla JS:

Navigation bar

Horizontal navigation bar

.default

.primary

.secondary

.red

.orange

.green

.purple

.dark

.transparent

Vertical navigation bar

Colored (.btn.color)

Disabled (.disabled) or `disabled` property

Card header
with image

`.default`

`.primary`

`.secondary`

`.red`

`.orange`

`.green`

`.purple`

`.dark`

`.transparent`

Medium ( `.medium` )

Big ( `.big` )

Fast ( `.fast` )

Furious ( `.furious` )