A nimble little SASS powered kickstarter for modern RWD web builds.
Current frameworks don't teach people anything much about web development, so over the last few months I have published an eight part guide to assembling your own SASS framework that works the way you do.
This kickstarter is the result of that series.
It's time we started to think again.
Before you start you will need to download Midas from github
git clone https://github.com/CodeStalker/Midas.git
You can rename the Midas folder if you wish to match the name of your project.
CD into the folder and run the following to install Gulp and the dependencies for Midas.
npm install --save-dev
All you need to is run the default Gulp task with:
This will run Gulp, compile the project, launch a static server and watch images, web fonts, JS, SASS, and HTML files for changes.
Additionally, It will also reload your browser automatically after processing any changed files. Neat, huh? This is the main task to use during development.
Much of Midas is controlled with variables in the
_config.scss file. It is here that you can configure the typography and colours. All you need to do now is create your styles in
site.scss and optionally you can tweak the typography by editing
To aid with debugging browser issues, Midas includes Pesticide. You turn it on very easy by setting
$pesticide-debug: false; in
There is also a
style-guide.html page that can be used to quickly test
_config.scss changes and also serves as a general reference to using Midas.
This produces a single
site.min.js that is concatenated in the correct order and keeps your project tidy if you stick to the three simple rules below:
- Major scripts like jQuery or Zepto go in
- Plugins & libraries that depend on this library and are not meant to be edited like jQuery UI or your own plugins go in
- Any snippets of jQuery to fire off those plugins or do something else with your project should be written into
There is no need to optimise images, Midas will handle this for you. With the Gulp task running, it will be watching the
src/assets/images/ folder for changes. This will automatically be optimised and moved to the corresponding path in the build folder. Your welcome.
Additional Gulp Tasks
To aid development, there are a couple of other tasks you can run with Gulp.
It's possible after a while to end up with some old files in your build folder, particularly images that are no longer in use or have been renamed. If you want to flush out the Build folder of all images, JS, SASS, and HTML files (folders are left behind) you may run:
Alternatively you can run individual clean tasks:
Finally there is a Deploy task. This processes the whole project by running all the
gulp clean tasks to flush out all files, and minifies the CSS to a greater degree than just
gulp does. Namely, it doesn't use source maps and removes line breaks and comments. It does not run the static server or do any file watching. This is the task to run if you are about to FTP your whole project to a live server.
Midas was built around a few other projects. It includes:
- The Typography was inspired by an early version of Cardinal and the ideas of a great number of people to numourous to list.
If you want to learn more about the thought process behind Midas and how it came to be, you can find a full overview here.
A complete working example of a finished project made with Midas can be seen here - Geraldine Theme
Midas is Copyright © 2014 James Steel email@example.com This work is free. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.