├── source ├── javascripts │ ├── lib │ │ └── .gitkeep │ ├── vendor │ │ └── .gitkeep │ └── application.js.coffee ├── stylesheets │ ├── lib │ │ ├── _fonts.css.sass │ │ ├── _mixins.css.sass │ │ ├── _variables.css.sass │ │ └── common.css.sass │ ├── application.css.sass │ └── vendor │ │ ├── all.css │ │ └── normalize.css ├── images │ ├── background.png │ └── middleman.png ├── index.html.haml └── layouts │ └── layout.html.haml ├── Gemfile ├── .gitignore ├── config.rb ├── README.md └── Gemfile.lock /source/javascripts/lib/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/javascripts/vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/lib/_fonts.css.sass: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/lib/_mixins.css.sass: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/lib/_variables.css.sass: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/lib/common.css.sass: -------------------------------------------------------------------------------- 1 | @import "variables", "mixins", "fonts" -------------------------------------------------------------------------------- /source/javascripts/application.js.coffee: -------------------------------------------------------------------------------- 1 | #= require_tree ./vendor 2 | #= require_tree ./lib -------------------------------------------------------------------------------- /source/stylesheets/application.css.sass: -------------------------------------------------------------------------------- 1 | //= require_tree ./vendor 2 | //= require_tree ./lib -------------------------------------------------------------------------------- /source/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryanlindsey/middleman-hamlsasscoffee/HEAD/source/images/background.png -------------------------------------------------------------------------------- /source/images/middleman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryanlindsey/middleman-hamlsasscoffee/HEAD/source/images/middleman.png -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # If you have OpenSSL installed, we recommend updating 2 | # the following line to use "https" 3 | source 'http://rubygems.org' 4 | 5 | gem "middleman", "~>3.0.13" 6 | gem "middleman-livereload", "~> 3.1.0" 7 | -------------------------------------------------------------------------------- /source/index.html.haml: -------------------------------------------------------------------------------- 1 | --- 2 | title: Middleman is Watching 3 | body_class: index 4 | --- 5 | 6 | .welcome 7 | %h1 Middleman is Watching 8 | %p.doc 9 | = link_to 'Read Online Documentation', 'http://middlemanapp.com/', title: 'Read Online Documentation', target: '_blank' -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore the build directory 11 | /build 12 | 13 | # Ignore Sass' cache 14 | /.sass-cache 15 | -------------------------------------------------------------------------------- /source/stylesheets/vendor/all.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | body { 4 | background: #d4d4d4 url("../images/background.png"); 5 | text-align: center; 6 | font-family: sans-serif; } 7 | 8 | h1 { 9 | color: rgba(0, 0, 0, .3); 10 | font-weight: bold; 11 | font-size: 32px; 12 | letter-spacing: -1px; 13 | text-transform: uppercase; 14 | text-shadow: 0 1px 0 rgba(255, 255, 255, .5); 15 | background: url("../images/middleman.png") no-repeat center 100px; 16 | padding: 350px 0 10px; 17 | margin: 0; } 18 | 19 | .doc { 20 | font-size: 14px; 21 | margin: 0; } 22 | .doc:before, 23 | .doc:after { 24 | opacity: .2; 25 | padding: 6px; 26 | font-style: normal; 27 | position: relative; 28 | content: "•"; } 29 | .doc a { 30 | color: rgba(0, 0, 0, 0.3); } 31 | .doc a:hover { 32 | color: #666; } 33 | 34 | .welcome { 35 | -webkit-animation-name: welcome; 36 | -webkit-animation-duration: .9s; } 37 | 38 | @-webkit-keyframes welcome { 39 | from { 40 | -webkit-transform: scale(0); 41 | opacity: 0; 42 | } 43 | 50% { 44 | -webkit-transform: scale(0); 45 | opacity: 0; 46 | } 47 | 82.5% { 48 | -webkit-transform: scale(1.03); 49 | -webkit-animation-timing-function: ease-out; 50 | opacity: 1; 51 | } 52 | to { 53 | -webkit-transform: scale(1); 54 | } 55 | } -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | ### 2 | # Compass 3 | ### 4 | 5 | # Susy grids in Compass 6 | # First: gem install susy 7 | # require 'susy' 8 | 9 | # Change Compass configuration 10 | # compass_config do |config| 11 | # config.output_style = :compact 12 | # end 13 | 14 | ### 15 | # Page options, layouts, aliases and proxies 16 | ### 17 | 18 | # Per-page layout changes: 19 | # 20 | # With no layout 21 | # page "/path/to/file.html", :layout => false 22 | # 23 | # With alternative layout 24 | # page "/path/to/file.html", :layout => :otherlayout 25 | # 26 | # A path which all have the same layout 27 | # with_layout :admin do 28 | # page "/admin/*" 29 | # end 30 | 31 | # Proxy (fake) files 32 | # page "/this-page-has-no-template.html", :proxy => "/template-file.html" do 33 | # @which_fake_page = "Rendering a fake page with a variable" 34 | # end 35 | 36 | ### 37 | # Helpers 38 | ### 39 | 40 | # Automatic image dimensions on image_tag helper 41 | # activate :automatic_image_sizes 42 | 43 | # Methods defined in the helpers block are available in templates 44 | # helpers do 45 | # def some_helper 46 | # "Helping" 47 | # end 48 | # end 49 | 50 | # Use LiveReload 51 | activate :livereload 52 | 53 | # Compass configuration 54 | set :css_dir, 'stylesheets' 55 | 56 | set :js_dir, 'javascripts' 57 | 58 | set :images_dir, 'images' 59 | 60 | # Build-specific configuration 61 | configure :build do 62 | ignore 'images/*.psd' 63 | ignore 'stylesheets/lib/*' 64 | ignore 'stylesheets/vendor/*' 65 | ignore 'javascripts/lib/*' 66 | ignore 'javascripts/vendor/*' 67 | 68 | # For example, change the Compass output style for deployment 69 | activate :minify_css 70 | 71 | # Minify Javascript on build 72 | activate :minify_javascript 73 | 74 | # Enable cache buster 75 | # activate :cache_buster 76 | 77 | # Use relative URLs 78 | # activate :relative_assets 79 | 80 | # Compress PNGs after build 81 | # First: gem install middleman-smusher 82 | # require "middleman-smusher" 83 | # activate :smusher 84 | 85 | # Or use a different image path 86 | # set :http_path, "/Content/images/" 87 | end 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Middleman Template with Haml, Sass & Coffeescript 2 | 3 | **middleman-hamlsasscoffee** is a [Middleman 3.x](http://middlemanapp.com/) project template with [Compass](http://compass-style.org)/[SASS](http://sass-lang.com/), [HAML](http://haml-lang.com/) and [Coffeescript](http://coffeescript.org). As with all Middleman templates, using [Bundler](http://gembundler.com/) and [Rbenv](https://github.com/sstephenson/rbenv/) is recommended. 4 | 5 | ###Features### 6 | * Optimized asset structure 7 | * Conditional IE html tags 8 | * Viewport meta setup for iOS and Android 9 | * Favicon and app icons 10 | * Dynamic title attribute body class via YAML front-matter 11 | 12 | ###Includes### 13 | * Modernizr 2.6.2 via cdnjs.com 14 | * jQuery 2.0.3 via cdnjs.com 15 | * Google Analytics (async) 16 | 17 | ### Installation ### 18 | 19 | Clone **middleman-hamlsasscoffee** into `~/.middleman`. You will need to create this directory if it doesn't exist. 20 | ```$ git clone git://github.com/pixelsonly/middleman-hamlsasscoffee.git ~/.middleman/middleman-hamlsasscoffee``` 21 | 22 | Initialize middleman on a new or existing folder `$ middleman init path_to_project --template=middleman-hamlsasscoffee` 23 | 24 | 25 | For more help follow [Middleman's project template instructions](http://middlemanapp.com/getting-started/welcome/) or feel free to hit me up on [Twitter](http://twitter.com/pixelsonly). 26 | 27 | --- 28 | 29 | ##### LICENSE ##### 30 | 31 | Copyright (c) 2013 Ryan Lindsey 32 | 33 | Permission is hereby granted, free of charge, to any person obtaining 34 | a copy of this software and associated documentation files (the 35 | "Software"), to deal in the Software without restriction, including 36 | without limitation the rights to use, copy, modify, merge, publish, 37 | distribute, sublicense, and/or sell copies of the Software, and to 38 | permit persons to whom the Software is furnished to do so, subject to 39 | the following conditions: 40 | 41 | The above copyright notice and this permission notice shall be 42 | included in all copies or substantial portions of the Software. 43 | 44 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 45 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 46 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 47 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 48 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 49 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 50 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 51 | -------------------------------------------------------------------------------- /source/layouts/layout.html.haml: -------------------------------------------------------------------------------- 1 | !!! 5 2 | /[if lt IE 7] 3 | /[if IE 7] 4 | /[if IE 8] 5 | /[if IE 9] 6 | /[if lt IE 10] 7 | /[if !IE]> 8 | %html{lang: 'en', class: 'no-js'} 9 | / 1.0) 7 | chunky_png (1.2.8) 8 | coffee-script (2.2.0) 9 | coffee-script-source 10 | execjs 11 | coffee-script-source (1.3.3) 12 | compass (0.12.2) 13 | chunky_png (~> 1.2) 14 | fssm (>= 0.2.7) 15 | sass (~> 3.1) 16 | em-websocket (0.5.1) 17 | eventmachine (>= 0.12.9) 18 | http_parser.rb (~> 0.6.0) 19 | eventmachine (1.0.3) 20 | execjs (1.4.0) 21 | multi_json (~> 1.0) 22 | fssm (0.2.10) 23 | haml (4.0.2) 24 | tilt 25 | hike (1.2.2) 26 | http_parser.rb (0.6.0) 27 | http_router (0.10.2) 28 | rack (>= 1.0.0) 29 | url_mount (~> 0.2.1) 30 | i18n (0.6.1) 31 | listen (0.7.3) 32 | maruku (0.6.1) 33 | syntax (>= 1.0.0) 34 | middleman (3.0.13) 35 | middleman-core (= 3.0.13) 36 | middleman-more (= 3.0.13) 37 | middleman-sprockets (~> 3.0.8) 38 | middleman-core (3.0.13) 39 | activesupport (~> 3.2.6) 40 | bundler (~> 1.1) 41 | listen (~> 0.7.3) 42 | rack (~> 1.4.1) 43 | rack-test (~> 0.6.1) 44 | rb-fsevent (~> 0.9.3) 45 | thor (~> 0.15.4) 46 | tilt (~> 1.3.6) 47 | middleman-livereload (3.1.1) 48 | em-websocket (>= 0.2.0) 49 | middleman-core (>= 3.0.2) 50 | multi_json (~> 1.0) 51 | rack-livereload 52 | middleman-more (3.0.13) 53 | coffee-script (~> 2.2.0) 54 | coffee-script-source (~> 1.3.3) 55 | compass (>= 0.12.2) 56 | execjs (~> 1.4.0) 57 | haml (>= 3.1.6) 58 | i18n (~> 0.6.0, < 0.6.2) 59 | maruku (~> 0.6.0) 60 | middleman-core (= 3.0.13) 61 | padrino-helpers (= 0.10.7) 62 | sass (>= 3.1.20) 63 | uglifier (~> 1.2.6) 64 | middleman-sprockets (3.0.11) 65 | middleman-more (>= 3.0.11) 66 | sprockets (~> 2.1) 67 | sprockets-sass (~> 0.9.1) 68 | multi_json (1.7.2) 69 | padrino-core (0.10.7) 70 | activesupport (~> 3.2.0) 71 | http_router (~> 0.10.2) 72 | sinatra (~> 1.3.1) 73 | thor (~> 0.15.2) 74 | tilt (~> 1.3.0) 75 | padrino-helpers (0.10.7) 76 | i18n (~> 0.6) 77 | padrino-core (= 0.10.7) 78 | rack (1.4.5) 79 | rack-livereload (0.3.15) 80 | rack 81 | rack-protection (1.5.0) 82 | rack 83 | rack-test (0.6.2) 84 | rack (>= 1.0) 85 | rb-fsevent (0.9.3) 86 | sass (3.2.7) 87 | sinatra (1.3.6) 88 | rack (~> 1.4) 89 | rack-protection (~> 1.3) 90 | tilt (~> 1.3, >= 1.3.3) 91 | sprockets (2.9.2) 92 | hike (~> 1.2) 93 | multi_json (~> 1.0) 94 | rack (~> 1.0) 95 | tilt (~> 1.1, != 1.3.0) 96 | sprockets-sass (0.9.1) 97 | sprockets (~> 2.0) 98 | tilt (~> 1.1) 99 | syntax (1.0.0) 100 | thor (0.15.4) 101 | tilt (1.3.7) 102 | uglifier (1.2.7) 103 | execjs (>= 0.3.0) 104 | multi_json (~> 1.3) 105 | url_mount (0.2.1) 106 | rack 107 | 108 | PLATFORMS 109 | ruby 110 | 111 | DEPENDENCIES 112 | middleman (~> 3.0.13) 113 | middleman-livereload (~> 3.1.0) 114 | -------------------------------------------------------------------------------- /source/stylesheets/vendor/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.0.1 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Corrects `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* 26 | * Corrects `inline-block` display not defined in IE 8/9. 27 | */ 28 | 29 | audio, 30 | canvas, 31 | video { 32 | display: inline-block; 33 | } 34 | 35 | /* 36 | * Prevents modern browsers from displaying `audio` without controls. 37 | * Remove excess height in iOS 5 devices. 38 | */ 39 | 40 | audio:not([controls]) { 41 | display: none; 42 | height: 0; 43 | } 44 | 45 | /* 46 | * Addresses styling for `hidden` attribute not present in IE 8/9. 47 | */ 48 | 49 | [hidden] { 50 | display: none; 51 | } 52 | 53 | /* ========================================================================== 54 | Base 55 | ========================================================================== */ 56 | 57 | /* 58 | * 1. Sets default font family to sans-serif. 59 | * 2. Prevents iOS text size adjust after orientation change, without disabling 60 | * user zoom. 61 | */ 62 | 63 | html { 64 | font-family: sans-serif; /* 1 */ 65 | -webkit-text-size-adjust: 100%; /* 2 */ 66 | -ms-text-size-adjust: 100%; /* 2 */ 67 | } 68 | 69 | /* 70 | * Removes default margin. 71 | */ 72 | 73 | body { 74 | margin: 0; 75 | } 76 | 77 | /* ========================================================================== 78 | Links 79 | ========================================================================== */ 80 | 81 | /* 82 | * Addresses `outline` inconsistency between Chrome and other browsers. 83 | */ 84 | 85 | a:focus { 86 | outline: thin dotted; 87 | } 88 | 89 | /* 90 | * Improves readability when focused and also mouse hovered in all browsers. 91 | */ 92 | 93 | a:active, 94 | a:hover { 95 | outline: 0; 96 | } 97 | 98 | /* ========================================================================== 99 | Typography 100 | ========================================================================== */ 101 | 102 | /* 103 | * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, 104 | * Safari 5, and Chrome. 105 | */ 106 | 107 | h1 { 108 | font-size: 2em; 109 | } 110 | 111 | /* 112 | * Addresses styling not present in IE 8/9, Safari 5, and Chrome. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: 1px dotted; 117 | } 118 | 119 | /* 120 | * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: bold; 126 | } 127 | 128 | /* 129 | * Addresses styling not present in Safari 5 and Chrome. 130 | */ 131 | 132 | dfn { 133 | font-style: italic; 134 | } 135 | 136 | /* 137 | * Addresses styling not present in IE 8/9. 138 | */ 139 | 140 | mark { 141 | background: #ff0; 142 | color: #000; 143 | } 144 | 145 | 146 | /* 147 | * Corrects font family set oddly in Safari 5 and Chrome. 148 | */ 149 | 150 | code, 151 | kbd, 152 | pre, 153 | samp { 154 | font-family: monospace, serif; 155 | font-size: 1em; 156 | } 157 | 158 | /* 159 | * Improves readability of pre-formatted text in all browsers. 160 | */ 161 | 162 | pre { 163 | white-space: pre; 164 | white-space: pre-wrap; 165 | word-wrap: break-word; 166 | } 167 | 168 | /* 169 | * Sets consistent quote types. 170 | */ 171 | 172 | q { 173 | quotes: "\201C" "\201D" "\2018" "\2019"; 174 | } 175 | 176 | /* 177 | * Addresses inconsistent and variable font size in all browsers. 178 | */ 179 | 180 | small { 181 | font-size: 80%; 182 | } 183 | 184 | /* 185 | * Prevents `sub` and `sup` affecting `line-height` in all browsers. 186 | */ 187 | 188 | sub, 189 | sup { 190 | font-size: 75%; 191 | line-height: 0; 192 | position: relative; 193 | vertical-align: baseline; 194 | } 195 | 196 | sup { 197 | top: -0.5em; 198 | } 199 | 200 | sub { 201 | bottom: -0.25em; 202 | } 203 | 204 | /* ========================================================================== 205 | Embedded content 206 | ========================================================================== */ 207 | 208 | /* 209 | * Removes border when inside `a` element in IE 8/9. 210 | */ 211 | 212 | img { 213 | border: 0; 214 | } 215 | 216 | /* 217 | * Corrects overflow displayed oddly in IE 9. 218 | */ 219 | 220 | svg:not(:root) { 221 | overflow: hidden; 222 | } 223 | 224 | /* ========================================================================== 225 | Figures 226 | ========================================================================== */ 227 | 228 | /* 229 | * Addresses margin not present in IE 8/9 and Safari 5. 230 | */ 231 | 232 | figure { 233 | margin: 0; 234 | } 235 | 236 | /* ========================================================================== 237 | Forms 238 | ========================================================================== */ 239 | 240 | /* 241 | * Define consistent border, margin, and padding. 242 | */ 243 | 244 | fieldset { 245 | border: 1px solid #c0c0c0; 246 | margin: 0 2px; 247 | padding: 0.35em 0.625em 0.75em; 248 | } 249 | 250 | /* 251 | * 1. Corrects color not being inherited in IE 8/9. 252 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 253 | */ 254 | 255 | legend { 256 | border: 0; /* 1 */ 257 | padding: 0; /* 2 */ 258 | } 259 | 260 | /* 261 | * 1. Corrects font family not being inherited in all browsers. 262 | * 2. Corrects font size not being inherited in all browsers. 263 | * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome 264 | */ 265 | 266 | button, 267 | input, 268 | select, 269 | textarea { 270 | font-family: inherit; /* 1 */ 271 | font-size: 100%; /* 2 */ 272 | margin: 0; /* 3 */ 273 | } 274 | 275 | /* 276 | * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in 277 | * the UA stylesheet. 278 | */ 279 | 280 | button, 281 | input { 282 | line-height: normal; 283 | } 284 | 285 | /* 286 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 287 | * and `video` controls. 288 | * 2. Corrects inability to style clickable `input` types in iOS. 289 | * 3. Improves usability and consistency of cursor style between image-type 290 | * `input` and others. 291 | */ 292 | 293 | button, 294 | html input[type="button"], /* 1 */ 295 | input[type="reset"], 296 | input[type="submit"] { 297 | -webkit-appearance: button; /* 2 */ 298 | cursor: pointer; /* 3 */ 299 | } 300 | 301 | /* 302 | * Re-set default cursor for disabled elements. 303 | */ 304 | 305 | button[disabled], 306 | input[disabled] { 307 | cursor: default; 308 | } 309 | 310 | /* 311 | * 1. Addresses box sizing set to `content-box` in IE 8/9. 312 | * 2. Removes excess padding in IE 8/9. 313 | */ 314 | 315 | input[type="checkbox"], 316 | input[type="radio"] { 317 | box-sizing: border-box; /* 1 */ 318 | padding: 0; /* 2 */ 319 | } 320 | 321 | /* 322 | * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 323 | * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome 324 | * (include `-moz` to future-proof). 325 | */ 326 | 327 | input[type="search"] { 328 | -webkit-appearance: textfield; /* 1 */ 329 | -moz-box-sizing: content-box; 330 | -webkit-box-sizing: content-box; /* 2 */ 331 | box-sizing: content-box; 332 | } 333 | 334 | /* 335 | * Removes inner padding and search cancel button in Safari 5 and Chrome 336 | * on OS X. 337 | */ 338 | 339 | input[type="search"]::-webkit-search-cancel-button, 340 | input[type="search"]::-webkit-search-decoration { 341 | -webkit-appearance: none; 342 | } 343 | 344 | /* 345 | * Removes inner padding and border in Firefox 4+. 346 | */ 347 | 348 | button::-moz-focus-inner, 349 | input::-moz-focus-inner { 350 | border: 0; 351 | padding: 0; 352 | } 353 | 354 | /* 355 | * 1. Removes default vertical scrollbar in IE 8/9. 356 | * 2. Improves readability and alignment in all browsers. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; /* 1 */ 361 | vertical-align: top; /* 2 */ 362 | } 363 | 364 | /* ========================================================================== 365 | Tables 366 | ========================================================================== */ 367 | 368 | /* 369 | * Remove most spacing between table cells. 370 | */ 371 | 372 | table { 373 | border-collapse: collapse; 374 | border-spacing: 0; 375 | } --------------------------------------------------------------------------------