We're building a simple CSS framework. Below is some notes and sample code explaining how it work.

View/Download at GitHub

CSS Variables

Setup your base styles using CSS variables. Choose your primary and secondary colours, a light neutral, alert colours and then define your default border radius and set some line heights for your typography.

You'll find these styles from line 89 in simple-css-framework.css - change them to be whatever you want.

Support for IE11

CSS variables are not supported by IE11 so if you want to ensure a good user experience for users still using IE11 you'll need to provide some additional styles. We are going to be working on a solution to this to try and make it easy to support older browsers. Watch this space!

Sample Code

:root {
	--main-bg-colour: #fff;
	--primary-colour: #1f2d3d;
	--primary-colour-alt: #353f4b;
	--secondary-colour: #dc314b;
	--secondary-colour-alt: #f15f63;
	--light-neutral: #f1f2f2;
	--alert-success: #75a000;
	--alert-success-alt: #dfedb7;
	--alert-error: #c10000;
	--alert-error-alt: #ffcaca;
	--alert-warning: #ddb300;
	--alert-warning-alt: #fff0b0;
	--default-radius: 8px;
	--half-line: 0.7rem;
	--single-line: 1.4rem;
	--double-line: 2.8rem;
	--triple-line: 4.2rem;
	--max-width:1280px;
}

Typography

Simple CSS Framework includes the following base styles:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo erat, dapibus porta rutrum non, dictum ut quam. Maecenas eleifend sapien odio, vel condimentum ante porttitor in.

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item

Sample Code

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor <strong>sit amet,</strong> <a href="#">consectetur adipiscing elit</a>. Suspendisse leo erat, <em>dapibus porta rutrum non</em>, dictum ut quam. Maecenas eleifend sapien odio, vel condimentum ante porttitor in.</p>
<ul>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>
<ol>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
</ol>

Buttons

Button Primary Button Secondary Button Primary Outline Button Secondary Outline Success Warning Error Disabled

As well as the colour classes, primary, secondary, outline, alert-success, alert-warning, alert-error and disabled you can also these to change the button size:

  • smaller
  • smallest
  • bigger
  • biggest

Alerts

This is a success alert ×

This is a warning alert ×

This is a error alert ×

Tables

Item # Item Name Quantity
123 Product Name 2
124 Another Name 4
125 Third Row 8

Forms

Form Name

This is a success alert ×

Cancel

About Us

Jack Barber and Esgrid Sikahall
Jack and Esgrid on Skiddaw in the Lake District

Jack Barber has been a freelance website designer and developer for over 10 years. Based in Whitby, North Yorkshire, he's married to Megan and they have four children.

Originally from Guatemala, Esgrid Sikahall is married to Rachel and they live in Edinburgh. Esgrid splits his time between Simple Studios and working for his PhD at Edinburgh University.

About This Site

Simple Studios is a new venture for Jack Barber Ltd. We're eating our own dog food and building this website using our own CSS framework. As a result this site will always remain a work in progress; bits of it may be be unfinished or broken.

Our aim is to develop a design and development studio with a reputation for creating simple solutions for complex problems.

All content © Jack Barber Ltd 2018