Structured On Something Special

An opinionated workflow with a focus on modern tool use, common sense, and easily digestible instructions. Hoping the community steps in to improve this process.

1. Local Development
2. Staging
3. Production

Grab the files by cloning this repo.

$ git clone https://github.com/kingluddite/awesome-soss.git

Install Flow globally

flowtype.org

$ npm install --global flow-bin

Install all required modules with npm

$ npm install

$ gulp

In the production environment all the JavaScript should be concatenated in the correct order and minified into one file. This should incorporated custom JavaScript and 3rd Party JavaScript. We found Gulp easier to use than webpack so we used Gulp. We wanted to avoid using Bower as NPM should be able to do everything Bower does.

Lots of hosts out there so we are going to pick one we like. Instead of using a shared host like GoDaddy we'll use Digital Ocean (DO).

There are lots of tutorials out there but this is a good one

• We set up an Ubunto image
• The cheapest one at $5/mo
• Chose a datacenter near us - San Francisco
• Chose a node application

• all of your images will be optimized
• you can write your code using modern ES6 and babel will be used to transpile your code into ES5 for maximum browser support
• Browser-sync is built in so you can test your site on multiple devices and develop your app without having to constantly refresh the browser
• browser prefixes will be automatically added
• Using Bootstrap 4 and able to override it's Sass variables out of the box
• Using Flex mode of Bootstrap
• Using Modular Gulp files
• flow config will enable you to use strictly typed variables
• all vendor css can easily be added, concatenated, minified and renamed into one vendor bundle
• all vendor js can easily be added, concatenated, minified and renamed into one vendor bundle
• using font-awesome
• using hover-css, animate.css
• using jquery, tether and masonry
• with each running of gulp, old production files will be deleted and recreated
• using gulp to watch custom files so that when they are modified, they are subsequently updated
• npm can be used to install all modules
• individual gulp files instead of one large file

• Flight plan
• Staging and DO subdomains
• IP to domain on DO
• Free email forwarding DO