KOWLOR/codeless

Advanced Middleman template with Sass, Slim, CoffeeScript & Bower

Start your next Middleman project in seconds

A highly scalable, rails ready foundation with the best DX and a focus on SEO & best practices.

Preprocessing

• Slim [for html]
• Sass [for css]
• CoffeeScript [for js]

Tools

• Yarn [package management]
• Bower [package management]
• GitHub Pages [deployment/hosting]
• Middleman Autoprefixer [Automatically add vendor prefixes to CSS rules]
• Middleman Favicon Maker [Generate favicon files in various sizes]
• Middleman Live Reload [Reloads the page when files change]

Getting Started

Install Middleman

$ gem install middleman

Start your project

$ cd ~/path/to/your/project
$ middleman init awesome-project --template=flexbox/codeless

⚠️ This project is not Middleman 4 ready, due to nightmare dependency with middleman-deploy.

Dependencies

You need Bundler to install gems

$ gem install bundler

Then, install them

$ bundle install

Yarn

Find and install the packages you need…

$ yarn search package-name
$ yarn add package-name

If the project already contains Yarn dependencies, run

$ yarn

css files

@import 'folder/file'

js files

#=require 'folder/file'

Architecture

Stylesheets, fonts, images, and JavaScript files go in the /source/assets/ directory. Vendor stylesheets and JavaScripts should go in each of their /bower_components/ directories.

codeless/
├── node_modules/
│    └── ...
├── source/
│   ├── assets/
│   └── ...

Browser preview

middleman server

Deploying to GitHub Pages

middleman build
middleman deploy

Note :

• If you get an error with middleman build, make sure Imagemagik is installed brew install imagemagick

• If you deploy on Github pages, don't forget to uncomment these two lines in config.rb :

  activate :relative_assets set :relative_links, true

Author

David Leuliette

License

This project is free software, and may be redistributed under GNU/GPL license.