InitCSS


Minimal CSS Framework

A minimal, customizable CSS utility framework for fast and clean UI development

Buttons

Filled:

Outlined:

Rounded:

Sizes:

Badges

Tags:

HIGH RUNNING POSITIVE DONE

With icons:

Variants:

Primary Danger Warning Success Default

With count:

3 Inbox 5 Default 125

Custom colors:

Successful Failed Hot

Sizes:

Smallest Small Default Large

Inputs

Default inputs:

Selector:

Range:

Checkboxes:

Radios:

Links

simple link with icon Like Button

Lists

  1. First item
  2. Second item
CSS (Cascading Style Sheets)
Is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML.
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Blockquote

“Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.”

Details

More Info

This is the hidden content revealed when you expand the details.

Dividers

or
Left
Right

Tables

Default table:

Status of the club members 2021
Name ID Membership Dates Balance
Joined Canceled
Margaret Nguyen 427311 n/a 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 n/a 15.00
Total balance 52.00

Hoverable with horizontal dividers:

Firstname Lastname Level
Rick Sanchez 10
Morty Smith 6

Vertical zebra stripes:

Firstname Lastname Age Level
Rick Sanchez 70 10
Morty Smith 14 6

Horizontal zebra stripes:

Firstname Lastname Level
Rick Sanchez 10
Beth Smith 7
Jerry Smith 4
Morty Smith 6

Colgroup:

MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

Fieldsets

Fieldset without <legend> tag
Dotted-bordered fieldset: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non arcu sed leo porttitor malesuada eget vitae augue.
Dashed-bordered fieldset: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non arcu sed leo porttitor malesuada eget vitae augue.
Bordered vertical (default) fieldset:
Not bordered horizontal fieldset:

Typography

Headings:

H1 tag

H2 tag

H3 tag

H4 tag

H5 tag
H6 tag
Another titles:

Highlighted Text

MEGA PRIMARY TEXT
Large paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non arcu sed leo porttitor malesuada eget vitae augue.

Default paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non arcu sed leo porttitor malesuada eget vitae augue.

Small paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non arcu sed leo porttitor malesuada eget vitae augue. Cras fermentum imperdiet lorem. Quisque eu mauris laoreet, molestie augue at, gravida dui.

small tag: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non arcu sed leo porttitor malesuada eget vitae augue. Cras fermentum imperdiet lorem. Quisque eu mauris laoreet, molestie augue at, gravida dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text-level semantics: strong b em italic underline strikethrough mark l x w x h CMD + P Abbr Small Sub Sup

Code

pre and code tags:

Use the fetch() function to make HTTP requests in JavaScript

JS 
function fetchData() {
  fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));
}
samp tag:

Program output: Connected successfully

kbd tag:

Press Ctrl + S to save the file

var tag:

Let x be the number of users online

Avatars

With name:

felix-avatar-1
Tom Smith

Default rounded:

felix-avatar-1

Soft rounded:

felix-avatar-1

Square rounded:

felix-avatar-1

Small:

felix-avatar-2

Default:

felix-avatar-3

Medium:

felix-avatar-3

Large:

felix-avatar-4

Small group:

  • Nolan
  • Maria
  • Aiden
  • +5

Default avatar group:

  • Nolan
  • Maria
  • Aiden
  • +5

Large group:

  • Nolan
  • Maria
  • Aiden
  • +5

Images

Habitat 67
Figure 1: Habitat 67, Montreal (small pic)
Bank of London and South America
Figure 2: Bank of London and South America, Buenos Aires (large pic)