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
- 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
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><p></code> tag.</p>
Grid system
Basic
Sizing cells
Basic
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.
Offsetting cells
Basic
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.
Ordering cells
Basic
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.
Nesting cells
Buttons
Basic
Colors
Disabled state
Forms
Input, select and textarea
Basic
Colors
Disabled state
File input
Radio
Basic
Inline
Checkbox
Basic
Inline
Field
Fieldset and legend
Example usage
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 linkBordered
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.
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.