Skip to main content

Simple UI

A simple UI framework for building simple web projects.

Getting started

Download

Four download options are available:

  • Download the latest release.
  • Clone the repository: git clone https://github.com/fengyuanchen/simpleui.git.
  • Install with NPM: npm install simpleui.
  • Install with Bower: bower install simpleui.

Installation

Once downloaded the source files, includes the main CSS file into your pages:

<link href="/path/to/simple.css" rel="stylesheet">

Starter template

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="/path/to/simple.min.css">
    </head>
    <body>
      <h1>Hello, world!</h1>
    </body>
  </html>

Browser support

  • Chrome (latest)
  • Firefox (latest)
  • Internet Explorer 8+
  • Microsoft Edge (latest)
  • Opera (latest)
  • Safari (latest)

Typography

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Blockquotes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Horizontals




Links

Lists

Basic

  • Lorem ipsum dolor sit amet
  • Consectetuer adipiscing elit
  • Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
  • Ut wisi enim ad minim veniam
  • Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
  1. Lorem ipsum dolor sit amet
  2. Consectetuer adipiscing elit
  3. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
  4. Ut wisi enim ad minim veniam
  5. Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

Unstyled

Inline

Description lists

Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Code

A paragraph always was wrapped with a <p> tag.

<p>A paragraph always was wrapped with a <code>&lt;p&gt;</code> tag.</p>

Grid system

Basic

.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell

Sizing cells

Basic

.cell-1
.cell-1
.cell-1
.cell-1
.cell-1
.cell-1
.cell-1
.cell-1
.cell-1
.cell-1
.cell-1
.cell-1
.cell-2
.cell-2
.cell-2
.cell-2
.cell-2
.cell-2
.cell-3
.cell-3
.cell-3
.cell-3
.cell-4
.cell-4
.cell-4
.cell-6
.cell-6
.cell-12

Responsive

The .cell-tablet class make the cell floating only effective when viewport wider than 768 pixels. The .cell-desktop class make the cell floating only effective when viewport wider than 992 pixels.

.cell-4
.cell-4
.cell-4
.cell-4.cell-tablet
.cell-4.cell-tablet
.cell-4.cell-tablet
.cell-4.cell-desktop
.cell-4.cell-desktop
.cell-4.cell-desktop

Offsetting cells

Basic

.cell-4
.cell-4
.cell-4
.cell-4
.cell-4.offset-4

Responsive

The .offset-tablet class make the cell offsetting only effective when viewport wider than 768 pixels. The .offset-desktop class make the cell offsetting only effective when viewport wider than 992 pixels.

.cell-4
.cell-4
.cell-4
.cell-4
.cell-4.offset-4.offset-tablet
.cell-4
.cell-4.offset-4.offset-desktop

Ordering cells

Basic

.cell-4
.cell-8
.cell-4.push-8
.cell-8.pull-4

Responsive

The .pull-tablet and .push-tablet classes make the cell ordering only effective when viewport wider than 768 pixels. The .pull-desktop and .push-desktop classes make the cell ordering only effective when viewport wider than 992 pixels.

.cell-4
.cell-8
.cell-4.push-8.push-tablet
.cell-8.pull-4.pull-tablet
.cell-4.push-8.push-desktop
.cell-8.pull-4.pull-desktop

Nesting cells

.cell-8
.cell-4
.cell-4
.cell-4
.cell-4
.cell-6
.cell-6

Buttons

Basic

Link

Colors

Disabled state

Link

Forms

Input, select and textarea

Basic

Colors

Disabled state

File input

Radio

Basic

Inline

Checkbox

Basic

Inline

Field

Fieldset and legend

Fieldset 1
Fieldset 2

Example usage

Sign In
Sign Up

Tables

Basic

# Heading Heading Heading ...
1 Content Content Content ...
2 Content Content Content ...
3 Content Content Content ...

Striped

# Heading Heading Heading ...
1 Content Content Content ...
2 Content Content Content ...
3 Content Content Content ...

Lined

# Heading Heading Heading ...
1 Content Content Content ...
2 Content Content Content ...
3 Content Content Content ...

Bordered

# Heading Heading Heading ...
1 Content Content Content ...
2 Content Content Content ...
3 Content Content Content ...

Responsive

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# Heading Heading Heading Heading Heading ...
1 Content Content Content Content Content ...
2 Content Content Content Content Content ...
3 Content Content Content Content Content ...

Cards

Basic

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Card LinkAnother link

Bordered

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Sizing

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Utilities

Hide content

The .hidden class can hide an element visually and from screen readers.

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

Hide content visually

The .visuallyhidden class can hide an element only visually, but have it available for screen readers.

The optional .focusable class extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard.

<div class="visuallyhidden">...</div>
<div class="visuallyhidden focusable">...</div>

Invisible content

The .invisible class can only hide an element from the visibility.

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

Clearfix

Easily clear floats by adding .clearfix to the parent element.

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

Floats

Basic

The .float-left class can float an element to left and the .float-right class can float an element to right. The !important is included to avoid specificity issues.

Float left
Float right

Responsive

The .float-tablet class make the floats only effective when viewport wider than 768 pixels. The .float-desktop class make the floats only effective when viewport wider than 992 pixels.

Float left when viewport wider than 768 pixels
Float right when viewport wider than 768 pixels
Float left when viewport wider than 992 pixels
Float right when viewport wider than 992 pixels