Makers Academy Skeleton

A skelton structure for scaffolding new Makers Academy websites.

Setting up the site locally

• Clone the repo
• Run bundle to install gems
• Run npm install to install node packages
• Create a .env file - you can copy the .env.example file provided as an example to get you started
• Start the server with middleman s
• Go to http://localhost:4567 to view the site in your browser

Running tests

• You'll need to run Ruby tests using bundle exec rspec rather than just rspec
• JS is tested using jasmine_node - run npm test to run them

Deploying

• Make sure you have submitted a pull request and had it approved by another engineer.
• Merge the pull request into master
• Once our CI server has passed the tests, it will automatically deploy to Github Pages by using the rake publish command provided by the Middleman GitHub pages extension. This builds a Middleman site and pushes the built repo onto a gh-pages branch.

Alternative deployment

There is an interactive script for deployment as well. To use it, run rake publish:domain and follow the instructions. You will need to have various things set up already; check the Rakefile for more information.

Technologies used

• Ruby as our server side language
• JavaScript/jQuery for client side scripts
• Middleman for compiling our code into a static website we can host on GitHub pages
• RSpec for testing
• Bower for installing shared assets
• Sass to help write our CSS
• Bourbon/Neat/Bitters as a framework for our CSS
• Typekit for typefaces

Building pages

Use the components available at /source/elements to build new pages using design-compliant blocks. By running middleman server, you can visit http://localhost:4567/elements.html and view both the rendered component, and its associated copy-pastable code.

Adding images

Our images are stored on the makers assets GitHub repo - we've split them out to a seperate repository to keep the size of this repository down. All assets from that repository can be accessed from http://assets.makersacademy.com.

When adding a new image, add it to the images directory of the makers assets GitHub repo, and make sure that the image has been compressed using image optim and are good quality images that fit the look and feel of the site.

Using Bower Styles

We use Bower to share our assets across the various Makers Academy websites. Instructions for updating Bower Styles can be found on the Makers Academy Website repository README.

This skeleton should use the latest version of makers_styles wherever possible. You can update the Makers Styles version in bower.json, and then run bower install to upgrade.

You can override Bower Styles locally, inside the /source/sass directory. An overrides.scss has been provided for that use.

Segment.io tracking

Look at tracking.js to see how to enable Segment.io tracking for websites that use makers_styles bower package.

How to create a form

1. Use Fridge raiders example as a form that works and copy over and adapt. Put this code on top of a form.

%form.trackable-form{action: "/"name of your page"/success.html.haml”}

2. Include Javascript tag at the bottom:

= javascript_include_tag "track-form/save-for-later-submit"

3. Create submit page source/"name of your page"/success.html.haml”

4. On success page put your copy and include this code, editing the details inside of the submitFormDataToAnalytics function

=javascript_include_tag "track-form/submit-to-analytics"
:javascript
  function submitFormDataToAnalytics (formData) {
    analytics.alias(formData.email);
    analytics.identify(formData.email, formData)
    analytics.track("Submitted "Name of form" form")
  }

Segment.io tracking

Look at tracking.js to see how to enable Segment.io tracking for websites that use makers_styles bower package.