Cream CSS framework

Lightweight, Classless*, HTML Semantic Elements, Responsive, Mobile First

...forget the default ugly formatting !

The purpose of this framework is to be used as a starting point for web pages. It is mostly Classless so it can be used just by adding to a page's header: 

<link rel="stylesheet" href="cream-mn.css">

Typography

Header level 1

Header level 2

Header level 3

Header level 4

Header level 5
Header level 6

The framework was designed by following some design patterns from Google's Material Design 3, GitHub's Primer Design System and Apple's Human Interface Guidelines.

To be sure that the look is the same in different browsers, I selected modern-normalize to set a default starting style.
The dist directory contains minified versions for:

This is a blockquote included here for demo purposes.

Custom elements may complicate the usage and increase the framework's size, custom attributes should start with data- and increase the code size in the long term so, for added flexibility, I have decided to add some classes:

  • c-req to style the labels of required inputs
  • c-txt and c-txtd for standard and dim text color
  • c-main, c-error and c-code to apply colors
  • bg-m, bg-0, bg-1, bg-2 to set background colors
  • In the cream-extra.css file, br- classes for borders

There are some custom HTML semantic elements in the cream-extra.css file:

  • cream-row is a column / row responsive flex container
  • cream-card is a flex container with rounded corners

cream-row and cream-card are used in the Colors section of this page.

Here is a complete <head> with the combined and minimized version:

<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <meta name="description" content="Page description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="cream-all-mn.css">
</head>

Colors and styles

The background, standard text and borders are shades of gray.

Main color as background bg-m

Main color c-main

Code color c-code

Error color c-error

Default style

Background 1 bg-1

Background 2 bg-2

Dim text c-txtd

Dim text on background 1 bg-1 c-txtd

Dim text on background 2 bg-2 c-txtd

1 pixel border br-1

1 pixel dim border br-1d

border br-a

dim border br-ad

Forms

Text input

This is a standalone long hint, the length is limited to 30rem and the text will wrap.

The length of this field must be between 2 and 32 characters

This is another standalone long hint, the length is limited to 30rem and the text will wrap.

Radio buttons and checkboxes