Ok, so you’re starting an 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:
- Add the minified, CDN hosted version of Simple.css, so you always get the latest updates.
- 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 - 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.
Here’s an example of how you would download the Simple.css source and host it yourself in a project…
Step 1 - create a HTML file
The first thing you’re 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:
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 download the latest version of Simple.css from Github, copy the
simple.min.css file to the same directory as the
index.html you just made, then add the following to the
<head> section of your HTML:
<link rel="stylesheet" href="simple.min.css">
Refresh your browser window and ta da! You now have Simple.css formatting on your site. 🎉
That’s it. You’re done.
You now have Simple.css formatting your site. All you need to do now is edit the
<footer> sections to suit your needs. Any content within the main page needs to be added inside the
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.