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! :heart:

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'