Getting Started

Instructions on how to get started with Simple.css.

Ok, so you’re starting a new project (or have an existing project), and you want to use Simple.css to theme your site. It’s very simple to do and you should be able to set something up that looks like this site in just a few minutes.

There are a couple of ways in which you can use Simple.css:

  1. Add the minified, CDN hosted version of Simple.css, so you always get the latest updates.
  2. Host Simple.css yourself.

Option 1 - the CDN hosted version

Whenever we push an update to the Simple.css GitHub repository, GitHub automatically minifies the CSS and publishes it to our CDN.

So all you need to do in order to use Simple.css in your project, is add the following line of code to the <head> section of your HTML:

<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">

Now, whenever I publish an update to Simple.css, you will automatically receive it.

Option 2 - UNPKG.com (CDN for npm)

Whenever we publish a new version to npm a minified and un-minified version of the CSS will be available in unpkg.

So all you need to do in order to use Simple.css in your project, is add the following line of code to the <head> section of your HTML:

<link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.min.css">

Option 3 - Install from npm

npm is a package registry installing JavaScript and other frontend packages, for NodeJS and browsers. If you’re using any sort of build process (webpack, gulp, browserify,etc), you can manage simple.css as dependency in your project’s package.json.

To install with npm or Yarn

$ npm install simpledotcss

# or

$ yarn add simpledotcss

For example, using a bundler like webpack, you can consume simple.css using an @import statement in a CSS file

@import url('~simpledotcss/simple.min.css');

Option 4 - Self-host Simple.css

Of course, you don’t have to use the CDN delivery method. If you prefer, you can host Simple.css yourself; but you won’t automatically receive updates to the CSS as it is released. You would need to re-download the source and update your project yourself.

Download the source files from here.

Adding Simple.css to your project

Here’s a simple quick start guide on how to add the CDN hosted version of Simple.css to your project.

Step 1 - create a HTML file

The first thing you’re going to need is a HTML file so you have something to actually format with Simple.css. Fire up your favourite text editor (my favourite is Atom) and paste this basic HTML into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My New Website</title>
</head>
<body>
  <header>
    <h1>Hello, world</h1>
    <p>Welcome to my website!</p>
  </header>

  <main>
    <p>This is my new website and it's using Simple.css. It's really cool. If you want to use it too, you can <a href="https://simplecss.org">visit their site</a>.</p>
  </main>

  <footer>
    <p>Jane Smith's website.</p>
  </footer>
</body>
</html>

Save this file on your computer somewhere as index.html. If you then double-click on that file, it will open in your browser and should look something like this:

Unformatted HTML example

Not very nice, I think you will agree. Let’s add Simple.css and fix this, shall we?

Step 2 - add Simple.css

All you need to do to add all the loveliness of Simple.css to your fantastic new site, is add the following line of code to the <head> section of your HTML:

<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">

Refresh your browser window and ta da! You now have Simple.css formatting on your site. 🎉

Simple.css formatted HTML example

That’s it. You’re done.

You now have Simple.css formatting your site. All you need to do now is edit the <header> and <footer> sections to suit your needs. Any content within the main page needs to be added inside the <main> tags.

The best part is that because you’re using our CDN, whenever we publish updates to the project, you get them automagically!

How easy was that! If you want to learn more about adding more styles elements and what’s available with Simple.css, take a look at the demo page.