Components

CoreSheet consists of a set of CSS declarations for default HTML elements. Additionally there are custom CSS classes which define advanced components like buttons or the grid system. This page represents a full HTML template that demonstrates all CSS components of CoreSheet. For each component there are buttons which show the respective HTML code snippet. This template is also included in the GitHub respository of the framework.

Overview

  1. Typography
  2. Media
  3. Forms
  4. Navigation Menus
  5. Buttons
  6. Tables
  7. Grid System
  8. Sticky Footer

h1 Heading 38px

h2 Heading 32px

h3 Heading 26px

h4 Heading 20px

h5 Heading 16px
h6 Heading 12px

Copy

The body copy is wrapped in regular <p> tags. There is no need for certain classes. You can define the paragraph's margin in the coresheet-config.scss file.

This is an unordered list:

  • List item
  • List item
  • List item

Ordered and unordered lists are not styled by default in CoreSheet.

Text align

Common text adjustments can be performed by using atomic classes. The atomic text classes are optional and can be excluded from CoreSheet by setting a Sass variable. Below are examples for text align classes.

This text is aligned left. This text is aligned left. This text is aligned left. This text is aligned left. This text is aligned left. This text is aligned left. This text is aligned left.

This text is aligned centered. This text is aligned centered. This text is aligned centered. This text is aligned centered. This text is aligned centered. This text is aligned centered. This text is aligned centered.

This text is aligned right. This text is aligned right. This text is aligned right. This text is aligned right. This text is aligned right. This text is aligned right. This text is aligned right.

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

Text transform

There are also atomic classes for text transforms which look like the following.

This text is uppercase.

This text is lowercase.

This text is capitalized.

Images

Image elements behave as usual. If you use them with the grid system and the columns get scaled down because of the screen size, an image will be scaled to the column's width. By default, small images will not be upscaled to the column's width. So if the screen width is smaller than the full grid system width and an image is smaller than its parent column's width, its size won't change. If you want to scale them up for the responsive view, you can do this by adjusting a Sass variable.

Audio / Video

Multimedia elements like <audio> or <video> will be displayed in their original size (for audio there are the browser's default controls) and scaled to the viewport width if the screen size is smaller than the element's width. So multimedia elements act responsive by default.

Regular

Forms are built up using common input elements. Radio options and checkboxes are fully customizable via CSS. Also the color of the placeholder texts inside the input fields has been normalized so it looks equal in all major browsers. There is also also a CSS class for additional form information, like displaying validation errors or password strength hints. The appearance of all form elements can be adjusted in the respective CoreSheet theme Sass file.

This is an additional info text
Browse...

Horizontal

This is an example for a horizontal form where labels are located left to the input elements. The horizontal form is implemented by using nested columns of the grid system of CoreSheet.

Default style

<a>

Outline style

<a>

Configurable colors and borders

Item Column 1 Column 2 Column 3
1 Row 1 Row 1 Row 1
2 Row 2 Row 2 Row 2
3 Row 3 Row 3 Row 3
4 Row 4 Row 4 Row 4

Customizable columns

The grid system of CoreSheet is fully configurable: you can define the number of columns, the gutter width and a row width for the responsive view. The width of the grid system underlies the Sass setting for your whole page layout so columns and gutters are calculated through percentages.

The grid system comes with helper classes so you can extend and push columns to the right. There are push classes (e.g. push1) that move a column to the right for the width of the desired columns plus their gutters. Additionally there two more classes for a more granular control, so you can use push1-reduced (width of columns minus twice one gutter width) and push1-half-reduced (width of columns minus one gutter width).

Furthermore you can remove the gutter on both sides (nil-left and nil-right). And there's even support for nesting down to one level. So you can have columns inside a column (requires the nested class). Below you will find some examples for the grid system column classes.

12 Columns Grid

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col2

.col2

.col2

.col2

.col2

.col2

.col3

.col3

.col3

.col3

.col4

.col4

.col4

.col5

.col7

.col6

.col6

.col7

.col5

.col8

.col4

.col9

.col3

.col10

.col2

.col11

.col1

.col12

Extends

.col5 .extend .nil-right

.col7 .nil-left

.col4 .extend .nil-right

.col8 .nil-left

.col3 .nil-right

.col9 .extend .nil-left

.col2 .nil-right

.col10 .extend .nil-left

Pushes

.col4 .push2

.col4

.col8 .push4

.col6 .push6

.col4 .push2

.col4 .push2

.col4 .push2-half-reduced

.col4 .push2

.col4 .push2-reduced

.col4 .push2

Nesting (1 level)

.col8 .nested > .col8

.col4

.col4

.col4 .nested > .col4

.col2

.col2

.col6 .nested > .col6

.col3

.col3

.col6 .nested > .col6

.col3

.col3

.col4 .nested > .col4

.col2

.col1

.col1

.col6 .nested > .col6 .push2

.col2

.col2

.col2