makers-styles
The definitive repository for Makers Academy stylesheets
Styles Catalogue
You can view our currently-available styles on our showcase page.
If you add a new style you must ensure that you update this page to reflect it's usage. Failure to do this will result in Nikesh releasing the flying monkeys. You do not want this to happen.
External Dependencies
Our styles have the following external dependencies:
- CSS Reset and Normalize
- Slick (slider)
- Bourbon (Mixin Library)
- Neat (grid framework)
- PrismJS (syntax highlighting for the showcase site)
These are currently pulled in via the Yarn package associated with this repo. NOTE: PrismJS must be manually updated, and lives in the /sass/elements-showcase/
directory.
Please do not move them outside of the node_modules
directory, nor directly edit any files in the node_modules
directory.
Sass will be configured to find the appropriate .scss
files from their respective locations and bring them all into a central CSS file which you can minify/deploy as you wish.
Installation:
Ensure you have Yarn installed. Once this is the case you should be able to run:
$ yarn init
This sets up a new yarn project. Then simply run:
$ yarn add makers-styles
This should fetch all of the external dependencies our styles have listed above, as well as the styles written by Makers Academy.
Next make sure you have the following compile-sass
and install-js-middleman
commands defined under the scripts
in your package.json
file:
"scripts": {
"compile-sass": "./node_modules/node-sass/bin/node-sass ./node_modules/makers-styles/sass/ -o ./source/stylesheets/",
"install-js-middleman": "copyfiles \"./javascripts/*.js\" source"
},
Once these are in place, simply run:
$ yarn compile-sass
to compile the css, and:
$ yarn install-js-middleman
to install the necessary JavaScript files for software built on Middleman.
You should now have the beautiful stylings of Makers Academy, right there in your project!
Notes
Middleman
If you are using a Middleman app, please make sure you make the following edit:
# in config.rb:
# default: set :css_dir, 'sass'
set :css_dir, 'stylesheets'