Elemental v0.2 is up – now using SCSS

I have updated the Elemental framework to version 0.2 on GitHub.

There are some minor updates to the underlying code but some pretty major changes to the directory structure, mainly for usability and maintainability.

Directory Structure

First off the repo is now structured in a way that can be downloaded and run as a site straight away.

I originally set it up to just make the CSS and JS files available for easy download/copy, but I have found that most of the time I need a complete scratch-build structure and I am just creating the same files locally every time.

To this end the framework now includes:

  • A basic index.html file with standard meta data and links to all the CSS/JS.
  • CSS files built using SCSS, including a separate _elemental.scss file that contains the core data. All output to one styles.css file.
  • Two JS files – elemental.js for the core Elemental functions and scripts.js for all your custom code.
  • A .htaccess file containing the most commonly used setting. Including compression, redirects, expiry times, hack blocks and more.
  • A sensible structure to being building from. Just download the files and go!

SCSS – the way forward

I have found myself using SCSS more and more recently. What started off for me as a good way of keeping very large CSS files from taking over the world, but a bit too fiddly to set up every time, has now turned into a must use technology for every build.

I really cannot imagine not using it any more, if I am doing quick updates on some older sites I find myself cursing a lack of global variables or mixins! It just makes sense to be able to create and structure CSS in a logical and programmatical way, and I am annoyed I didn’t pick it up properly sooner.

Anyway, I digress…

I now use SCSS in every new project so it had to be made part of Elemental. If you are not familiar with SASS or SCSS (or LESS for that matter) then pop it in Google and see, there are loads of resources out there. If you are too lazy for that then try the official SASS website (move past the pink – it’s well worth a read!)

Take a look at the updates and let me know what you think, or even better fork it and do what you please, that’s what it is there for.

You can get Elemental on GitHub, and while you are in the neighbourhood see some of my other repo’s.