├── source ├── stylesheets │ ├── helpers │ │ └── _index.scss │ ├── layout │ │ └── _index.scss │ ├── pages │ │ ├── _home.scss │ │ └── _index.scss │ ├── themes │ │ └── _index.scss │ ├── vendor │ │ └── _index.scss │ ├── components │ │ └── _index.scss │ ├── base │ │ ├── _base.scss │ │ ├── _index.scss │ │ ├── _typography.scss │ │ └── _normalize.scss │ └── all.scss ├── javascripts │ └── all.js ├── index.html.slim ├── layouts │ └── layout.slim └── images │ └── middleman-logo.svg ├── config.ru ├── Gemfile ├── .gitignore ├── package.json ├── config.rb ├── README.md └── gulpfile.js /source/stylesheets/helpers/_index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/layout/_index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/pages/_home.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/themes/_index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/vendor/_index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/components/_index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/javascripts/all.js: -------------------------------------------------------------------------------- 1 | console.log('hello'); 2 | -------------------------------------------------------------------------------- /source/stylesheets/pages/_index.scss: -------------------------------------------------------------------------------- 1 | @import "home"; 2 | -------------------------------------------------------------------------------- /source/stylesheets/base/_base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Ubuntu', sans-serif; 3 | } 4 | -------------------------------------------------------------------------------- /source/stylesheets/base/_index.scss: -------------------------------------------------------------------------------- 1 | @import 'normalize'; 2 | @import 'base'; 3 | @import 'typography'; 4 | -------------------------------------------------------------------------------- /source/stylesheets/base/_typography.scss: -------------------------------------------------------------------------------- 1 | // font-family: 'Ubuntu', sans-serif; 2 | @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700,500); 3 | -------------------------------------------------------------------------------- /source/index.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stub Middleman Kit 3 | --- 4 | 5 |
6 | 9 |
10 | 11 | h2 hello 12 | -------------------------------------------------------------------------------- /config.ru: -------------------------------------------------------------------------------- 1 | require 'middleman-core/load_paths' 2 | ::Middleman.setup_load_paths 3 | 4 | require 'middleman-core' 5 | require 'middleman-core/rack' 6 | 7 | require 'fileutils' 8 | FileUtils.mkdir('log') unless File.exist?('log') 9 | ::Middleman::Logger.singleton("log/#{ENV['RACK_ENV']}.log") 10 | 11 | app = ::Middleman::Application.new 12 | 13 | run ::Middleman::Rack.new(app).to_app 14 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # If you do not have OpenSSL installed, change 2 | # the following line to use 'http://' 3 | source 'https://rubygems.org' 4 | 5 | # For faster file watcher updates on Windows: 6 | gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw] 7 | 8 | # Windows does not come with time zone data 9 | gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby] 10 | 11 | # Middleman Gems 12 | gem 'middleman', '>= 4.0.0' 13 | gem 'slim' 14 | gem 'middleman-minify-html' 15 | -------------------------------------------------------------------------------- /source/layouts/layout.slim: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | meta content="IE=edge" http-equiv="X-UA-Compatible" 5 | meta charset="utf-8" 6 | meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" 7 | title = current_page.data.title || "Middleman" 8 | 9 | = stylesheet_link_tag "all.min" 10 | = javascript_include_tag "all.min" 11 | 12 | body class="#{{page_classes}}" 13 | = yield 14 | 15 | -------------------------------------------------------------------------------- /source/images/middleman-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/stylesheets/all.scss: -------------------------------------------------------------------------------- 1 | // External libraries 2 | 3 | 4 | // Your CSS 5 | @import "base/index"; // Base – contains global styles, such as resets, typography, colors, etc. 6 | @import "layout/index"; // Layout - Grid system, Header, Footer, Sidebar, Forms Etc.. 7 | @import "components/index"; // Components - Buttons, Dropdown, Cards, lists, Banners etc.. 8 | @import "helpers/index"; // Helpers - contains global mixins, Functions, helper selectors, Class etc.. 9 | @import "pages/index"; // Pages - contains page-specific styling, if necessary 10 | @import "themes/index"; // Themes - Default themes, Admin themes Etc.. 11 | @import "vendor/index"; // Vendor - Import SCSS files that come from third parties 12 | 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io/api/images,node 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directories 26 | node_modules 27 | jspm_packages 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | 35 | # Ignore temporary files created by editors or operating systems 36 | .DS_Store 37 | log 38 | *~ 39 | .*.swp 40 | .sass-cache/ 41 | 42 | # Ignore files that are generated in the build. 43 | out/ 44 | Gemfile.lock 45 | 46 | # dist/ 47 | tmp/ 48 | 49 | # Ignore temporary build directory 50 | /dist 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stub-middleman-kit", 3 | "version": "1.0.0", 4 | "description": "an Middleman static websites framework with Gulp as automatic workflow", 5 | "main": "all.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "stub4ever/stub-middleman-kit" 12 | }, 13 | "author": " Van Quoc Bui", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "babel": "5.8.23", 17 | "babelify": "6.4.0", 18 | "browser-sync": "2.9.11", 19 | "browserify": "11.2.0", 20 | "del": "^2.2.0", 21 | "gulp": "^3.9.1", 22 | "gulp-autoprefixer": "3.1.0", 23 | "gulp-cache": "^0.4.3", 24 | "gulp-cssnano": "^2.1.1", 25 | "gulp-imagemin": "^2.4.0", 26 | "gulp-notify": "2.2.0", 27 | "gulp-postcss": "^6.1.0", 28 | "gulp-rename": "^1.2.2", 29 | "gulp-sass": "^2.2.0", 30 | "gulp-sourcemaps": "^1.6.0", 31 | "gulp-uglify": "1.4.2", 32 | "gulp-util": "3.0.7", 33 | "gulp-wait": "0.0.2", 34 | "imagemin-pngquant": "^4.2.2", 35 | "run-sequence": "^1.1.5", 36 | "vinyl-buffer": "1.0.0", 37 | "vinyl-source-stream": "1.1.0", 38 | "watchify": "3.4.0" 39 | }, 40 | "dependencies": {} 41 | } 42 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'slim' 2 | 3 | ### 4 | # Page options, layouts, aliases and proxies 5 | ### 6 | 7 | # Per-page layout changes: 8 | # 9 | # With no layout 10 | page '/*.xml', layout: false 11 | page '/*.json', layout: false 12 | page '/*.txt', layout: false 13 | 14 | # With alternative layout 15 | # page "/path/to/file.html", layout: :otherlayout 16 | 17 | # Proxy pages (http://middlemanapp.com/basics/dynamic-pages/) 18 | # proxy "/this-page-has-no-template.html", "/template-file.html", locals: { 19 | # which_fake_page: "Rendering a fake page with a local variable" } 20 | 21 | # General configuration 22 | 23 | # External pipeline for gulp assets 24 | activate :external_pipeline, 25 | name: :gulp, 26 | command: build? ? './node_modules/gulp/bin/gulp.js default' : './node_modules/gulp/bin/gulp.js watch', 27 | source: "./dist", 28 | latency: 1 29 | 30 | ### 31 | # Helpers 32 | ### 33 | 34 | # Methods defined in the helpers block are available in templates 35 | # helpers do 36 | # def some_helper 37 | # "Helping" 38 | # end 39 | # end 40 | 41 | # Build-specific configuration 42 | configure :build do 43 | # Minify html on build 44 | activate :minify_html 45 | 46 | # Append a hash to asset urls (make sure to use the url helpers) 47 | #activate :asset_hash 48 | end 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Stub Middleman Kit 2 | 3 | This is an Middleman static websites framework with Gulp as automatic workflow. 4 | 5 | A Starter Kit for front-end development, it contains: 6 | - [Middleman](https://middlemanapp.com/) Build static websites with an easy-to-use framework 7 | - [Gulp](https://github.com/gulpjs/gulp) for asset bundling (JS/CSS/Fonts/Sass/images) with Browser-sync 8 | - [Browser-sync](https://github.com/BrowserSync/browser-sync) Keep multiple browsers & devices in sync when building websites 9 | - [Babel](https://babeljs.io/) 6 for EcmaScript 2015 / ES6 support 10 | - [PostCSS](https://github.com/postcss/postcss) PostCSS is a tool for transforming styles with JS plugins 11 | - [CSSnano](https://github.com/ben-eb/gulp-cssnano) Minify CSS with cssnano 12 | - [UglifyJS](https://github.com/mishoo/UglifyJS2) A JavaScript parser, minifier, compressor or beautifier toolkit 13 | - [Imagemin](https://github.com/imagemin/imagemin) Minify PNG, JPEG, GIF and SVG images 14 | - [pngquant](https://github.com/pornel/pngquant) Lossy PNG compressor 15 | - [Normalize](https://necolas.github.io/normalize.css/) A modern, HTML5-ready alternative to CSS resets 16 | - Slim as a template engine for app views 17 | - gulp integration through middleman's [external asset pipeline](https://middlemanapp.com/advanced/external-pipeline) 18 | 19 | ## Architecture 20 | 21 | name-project/ 22 | ├── dist/ 23 | │ └── ... 24 | │ 25 | └── source/ 26 | ├── images/ 27 | │ 28 | ├── javascripts/ 29 | │ └── all.js 30 | │ 31 | ├── layouts/ 32 | │ └── layout.slim 33 | │ 34 | ├── stylesheets/ 35 | │ ├── base/ 36 | │ ├── components/ 37 | │ ├── helpers/ 38 | │ ├── layout/ 39 | │ ├── pages/ 40 | │ ├── themes/ 41 | │ ├── vendor/ 42 | │ └── all.scss 43 | │ 44 | └── index.html.slim 45 | 46 | ## Installation Stub Middleman Kit 47 | 48 | Using templates with Middleman is incredibly easy, you just need to reference 49 | the repository for the template in the ``--template`` flag when you call 50 | ``middleman init``. It looks like this: 51 | 52 | ``` 53 | middleman init name-project --template=stub4ever/stub-middleman-kit 54 | ``` 55 | 56 | Once you have the middleman project you will need to install the npm 57 | dependencies. You will need Node.js and npm on your system. 58 | 59 | ``` 60 | cd name-project 61 | npm install 62 | ``` 63 | Now you can simply run $``bundle exec middleman``. This will start the BrowserSync proxy 64 | and it will open for you. You can then edit your stylesheets, images, javascript and slim. 65 | Your browser will automatically reload on all devices. 66 | 67 | 68 | ## Deploy A Static Build 69 | 70 | After building the site you have everything you need within the build-directory. There are nearly limitless ways to deploy a static build. 71 | A very handy tool to deploy a build is running: 72 | 73 | ``` 74 | middleman build 75 | ``` 76 | 77 | ## Contributing 78 | If you have problems, please create a [GitHub Issue](https://github.com/stub4ever/stub-middleman-kit/issues). 79 | Have a fix or want to add a feature? [Pull Requests](https://github.com/stub4ever/stub-middleman-kit/pulls) are welcome! 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var browserify = require('browserify'); 4 | var browserSync = require('browser-sync'); 5 | var del = require('del'); 6 | var gulp = require('gulp'); 7 | var gutil = require('gulp-util'); 8 | var notify = require('gulp-notify'); 9 | var reload = browserSync.reload; 10 | var rename = require('gulp-rename'); 11 | var runSequence = require('run-sequence'); 12 | var source = require('vinyl-source-stream'); 13 | var sourcemaps = require('gulp-sourcemaps'); 14 | var wait = require('gulp-wait'); 15 | var watchify = require('watchify'); 16 | 17 | var autoprefixer = require('gulp-autoprefixer'); 18 | var cssnano = require('gulp-cssnano'); 19 | var postcss = require('gulp-postcss'); 20 | var sass = require('gulp-sass'); 21 | 22 | var cache = require('gulp-cache'); 23 | var imagemin = require('gulp-imagemin'); 24 | var pngquant = require('imagemin-pngquant'); 25 | 26 | var babelify = require('babelify'); 27 | var buffer = require('vinyl-buffer'); 28 | var uglify = require('gulp-uglify'); 29 | 30 | 31 | // Setup your Configuration 32 | var paths = { 33 | 'stylesheetsEntryPoint': 'source/stylesheets/all.scss', 34 | 'stylesheets': 'source/stylesheets/**/*.scss', 35 | 'stylesheetsDist': './dist/stylesheets', 36 | 37 | 'fontsEntryPoint': '/source/stylesheets/fonts/**.*', 38 | 'fontsDist': 'dist/stylesheets/fonts', 39 | 40 | 'views': 'source/**/*.slim', 41 | 42 | 'imageEntryPoint': 'source/images/**/*.+(png|jpg|jpeg|gif|svg)', 43 | 'imageDist': './dist/images', 44 | 45 | 'javascriptMainFile': 'all.js', 46 | 'javascriptsEntryPoint': './source/javascripts/', 47 | 'javascriptsDist': './dist/javascripts/' 48 | // 'buildFolder': 'build' 49 | }; 50 | 51 | /* 52 | Styles Task 53 | */ 54 | 55 | gulp.task('stylesheets',function() { 56 | // move over fonts 57 | gulp.src(paths.fontsEntryPoint) 58 | .pipe(gulp.dest(paths.fontsDist)) 59 | 60 | // Compiles CSS 61 | var postCssPlugins = [ // add PostCssPlugins 62 | ]; 63 | 64 | gulp.src(paths.stylesheetsEntryPoint) // take all.scss only 65 | .pipe(sass().on('error', handleCssErrors)) 66 | //.pipe(postcss(postCssPlugins)) // use Postcss Plugins 67 | .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 68 | //.pipe(gulp.dest(paths.buildFolder + '/stylesheets')) // build new folder 69 | .pipe(gulp.dest(paths.stylesheetsDist)) 70 | .pipe(rename({ suffix: '.min' })) 71 | .pipe(cssnano()) 72 | .pipe(sourcemaps.write('./')) 73 | .pipe(gulp.dest(paths.stylesheetsDist)) 74 | .pipe(wait(1000)) 75 | .pipe(reload({stream:true})) 76 | .pipe(notify({ message: 'Stub: Styles task complete' })); 77 | }); 78 | 79 | function handleCssErrors (error) { 80 | // If you want details of the error in the console 81 | console.log(error.toString()); 82 | 83 | this.emit('end'); 84 | } 85 | 86 | /* 87 | Images 88 | */ 89 | gulp.task('images', function() { 90 | gulp.src(paths.imageEntryPoint) 91 | .pipe(cache(imagemin({ 92 | progressive: true, 93 | svgoPlugins: [{removeViewBox: false}], 94 | interlaced: true, // GIFs by setting the interlaced option key to true 95 | use: [pngquant()] 96 | }))) 97 | .pipe(gulp.dest(paths.imageDist)) 98 | .pipe(reload({stream:true})) 99 | .pipe(notify({ message: 'Stub: Image Update Successfully' })); 100 | }); 101 | 102 | /* 103 | Browser Sync 104 | */ 105 | gulp.task('browser-sync', function(){ 106 | browserSync.init({ 107 | proxy: "localhost:4567" 108 | }); 109 | }); 110 | 111 | /* 112 | Cleaning Image & callback Image 113 | */ 114 | gulp.task('clean:dist', function() { 115 | return del.sync([paths.imgDst]); 116 | }); 117 | 118 | gulp.task('callbackImg', function(callback) { 119 | runSequence( 120 | 'clean:dist', 121 | ['images'], 122 | callback 123 | ) 124 | }) 125 | 126 | /* 127 | Scripts 128 | */ 129 | function handleJsErrors() { 130 | var args = Array.prototype.slice.call(arguments); 131 | notify.onError({ 132 | title: 'Compile Error', 133 | message: '<%= error.message %>' 134 | }).apply(this, args); 135 | this.emit('end'); // Keep gulp from hanging on this task 136 | } 137 | 138 | function buildScript(file, watch) { 139 | var props = { 140 | entries: [paths.javascriptsEntryPoint + file], 141 | debug : true, 142 | cache: {}, 143 | packageCache: {}, 144 | transform: [babelify.configure({stage : 0 })] 145 | }; 146 | 147 | // watchify() if watch requested, otherwise run browserify() once 148 | var bundler = watch ? watchify(browserify(props)) : browserify(props); 149 | 150 | function rebundle() { 151 | var stream = bundler.bundle(); 152 | return stream 153 | .on('error', handleJsErrors) 154 | .pipe(source(file)) 155 | .pipe(gulp.dest(paths.javascriptsDist)) 156 | .pipe(buffer()) 157 | .pipe(uglify()) 158 | .pipe(rename('all.min.js')) 159 | .pipe(gulp.dest(paths.javascriptsDist)) 160 | .pipe(wait(1000)) 161 | .pipe(reload({stream:true})) 162 | .pipe(notify({ message: 'Stub: Scripts task complete' })); 163 | } 164 | 165 | // listen for an update and run rebundle 166 | bundler.on('update', function() { 167 | rebundle(); 168 | gutil.log('Rebundle...'); 169 | }); 170 | 171 | // run it once the first time buildScript is called 172 | return rebundle(); 173 | } 174 | 175 | gulp.task('scripts', function() { 176 | return buildScript(paths.javascriptMainFile, false); // this will run once because we set watch to false 177 | }); 178 | 179 | // run 'scripts' task first, then watch for future changes 180 | gulp.task('watch',['images', 'stylesheets', 'scripts', 'browser-sync'], function() { 181 | gulp.watch(paths.stylesheets, ['stylesheets']); // gulp watch for sass changes 182 | 183 | gulp.watch([paths.views], function (e){ // gulp watch for erb changes 184 | gulp.src(e.path) 185 | .pipe(wait(2000)) 186 | .pipe(reload({stream:true})); 187 | }); 188 | 189 | gulp.watch([paths.imageEntryPoint], function (callback){ // gulp watch for image changes 190 | gulp.src(callback.path) 191 | gulp.run('callbackImg'); 192 | }); 193 | 194 | return buildScript(paths.javascriptMainFile, true); // browserify watch for JS changes 195 | }); 196 | 197 | // Default task for running 'middleman build' 198 | gulp.task('default', ['stylesheets', 'scripts', 'images']); 199 | -------------------------------------------------------------------------------- /source/stylesheets/base/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * Remove the gray background on active links in IE 10. 89 | */ 90 | 91 | a { 92 | background-color: transparent; 93 | } 94 | 95 | /** 96 | * Remove the outline on focused links when they are also active or hovered 97 | * in all browsers (opinionated). 98 | */ 99 | 100 | a:active, 101 | a:hover { 102 | outline-width: 0; 103 | } 104 | 105 | /* Text-level semantics 106 | ========================================================================== */ 107 | 108 | /** 109 | * 1. Remove the bottom border in Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom: none; /* 1 */ 115 | text-decoration: underline; /* 2 */ 116 | text-decoration: underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight: bolder; 135 | } 136 | 137 | /** 138 | * Add the correct font style in Android 4.3-. 139 | */ 140 | 141 | dfn { 142 | font-style: italic; 143 | } 144 | 145 | /** 146 | * Correct the font size and margin on `h1` elements within `section` and 147 | * `article` contexts in Chrome, Firefox, and Safari. 148 | */ 149 | 150 | h1 { 151 | font-size: 2em; 152 | margin: 0.67em 0; 153 | } 154 | 155 | /** 156 | * Add the correct background and color in IE 9-. 157 | */ 158 | 159 | mark { 160 | background-color: #ff0; 161 | color: #000; 162 | } 163 | 164 | /** 165 | * Add the correct font size in all browsers. 166 | */ 167 | 168 | small { 169 | font-size: 80%; 170 | } 171 | 172 | /** 173 | * Prevent `sub` and `sup` elements from affecting the line height in 174 | * all browsers. 175 | */ 176 | 177 | sub, 178 | sup { 179 | font-size: 75%; 180 | line-height: 0; 181 | position: relative; 182 | vertical-align: baseline; 183 | } 184 | 185 | sub { 186 | bottom: -0.25em; 187 | } 188 | 189 | sup { 190 | top: -0.5em; 191 | } 192 | 193 | /* Embedded content 194 | ========================================================================== */ 195 | 196 | /** 197 | * Remove the border on images inside links in IE 10-. 198 | */ 199 | 200 | img { 201 | border-style: none; 202 | } 203 | 204 | /** 205 | * Hide the overflow in IE. 206 | */ 207 | 208 | svg:not(:root) { 209 | overflow: hidden; 210 | } 211 | 212 | /* Grouping content 213 | ========================================================================== */ 214 | 215 | /** 216 | * 1. Correct the inheritance and scaling of font size in all browsers. 217 | * 2. Correct the odd `em` font sizing in all browsers. 218 | */ 219 | 220 | code, 221 | kbd, 222 | pre, 223 | samp { 224 | font-family: monospace, monospace; /* 1 */ 225 | font-size: 1em; /* 2 */ 226 | } 227 | 228 | /** 229 | * Add the correct margin in IE 8. 230 | */ 231 | 232 | figure { 233 | margin: 1em 40px; 234 | } 235 | 236 | /** 237 | * 1. Add the correct box sizing in Firefox. 238 | * 2. Show the overflow in Edge and IE. 239 | */ 240 | 241 | hr { 242 | box-sizing: content-box; /* 1 */ 243 | height: 0; /* 1 */ 244 | overflow: visible; /* 2 */ 245 | } 246 | 247 | /* Forms 248 | ========================================================================== */ 249 | 250 | /** 251 | * Change font properties to `inherit` in all browsers (opinionated). 252 | */ 253 | 254 | button, 255 | input, 256 | select, 257 | textarea { 258 | font: inherit; 259 | } 260 | 261 | /** 262 | * Restore the font weight unset by the previous rule. 263 | */ 264 | 265 | optgroup { 266 | font-weight: bold; 267 | } 268 | 269 | /** 270 | * Show the overflow in IE. 271 | * 1. Show the overflow in Edge. 272 | * 2. Show the overflow in Edge, Firefox, and IE. 273 | */ 274 | 275 | button, 276 | input, /* 1 */ 277 | select { /* 2 */ 278 | overflow: visible; 279 | } 280 | 281 | /** 282 | * Remove the margin in Safari. 283 | * 1. Remove the margin in Firefox and Safari. 284 | */ 285 | 286 | button, 287 | input, 288 | select, 289 | textarea { /* 1 */ 290 | margin: 0; 291 | } 292 | 293 | /** 294 | * Remove the inheritence of text transform in Edge, Firefox, and IE. 295 | * 1. Remove the inheritence of text transform in Firefox. 296 | */ 297 | 298 | button, 299 | select { /* 1 */ 300 | text-transform: none; 301 | } 302 | 303 | /** 304 | * Change the cursor in all browsers (opinionated). 305 | */ 306 | 307 | button, 308 | [type="button"], 309 | [type="reset"], 310 | [type="submit"] { 311 | cursor: pointer; 312 | } 313 | 314 | /** 315 | * Restore the default cursor to disabled elements unset by the previous rule. 316 | */ 317 | 318 | [disabled] { 319 | cursor: default; 320 | } 321 | 322 | /** 323 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 324 | * controls in Android 4. 325 | * 2. Correct the inability to style clickable types in iOS. 326 | */ 327 | 328 | button, 329 | html [type="button"], /* 1 */ 330 | [type="reset"], 331 | [type="submit"] { 332 | -webkit-appearance: button; /* 2 */ 333 | } 334 | 335 | /** 336 | * Remove the inner border and padding in Firefox. 337 | */ 338 | 339 | button::-moz-focus-inner, 340 | input::-moz-focus-inner { 341 | border: 0; 342 | padding: 0; 343 | } 344 | 345 | /** 346 | * Restore the focus styles unset by the previous rule. 347 | */ 348 | 349 | button:-moz-focusring, 350 | input:-moz-focusring { 351 | outline: 1px dotted ButtonText; 352 | } 353 | 354 | /** 355 | * Change the border, margin, and padding in all browsers (opinionated). 356 | */ 357 | 358 | fieldset { 359 | border: 1px solid #c0c0c0; 360 | margin: 0 2px; 361 | padding: 0.35em 0.625em 0.75em; 362 | } 363 | 364 | /** 365 | * 1. Correct the text wrapping in Edge and IE. 366 | * 2. Correct the color inheritance from `fieldset` elements in IE. 367 | * 3. Remove the padding so developers are not caught out when they zero out 368 | * `fieldset` elements in all browsers. 369 | */ 370 | 371 | legend { 372 | box-sizing: border-box; /* 1 */ 373 | color: inherit; /* 2 */ 374 | display: table; /* 1 */ 375 | max-width: 100%; /* 1 */ 376 | padding: 0; /* 3 */ 377 | white-space: normal; /* 1 */ 378 | } 379 | 380 | /** 381 | * Remove the default vertical scrollbar in IE. 382 | */ 383 | 384 | textarea { 385 | overflow: auto; 386 | } 387 | 388 | /** 389 | * 1. Add the correct box sizing in IE 10-. 390 | * 2. Remove the padding in IE 10-. 391 | */ 392 | 393 | [type="checkbox"], 394 | [type="radio"] { 395 | box-sizing: border-box; /* 1 */ 396 | padding: 0; /* 2 */ 397 | } 398 | 399 | /** 400 | * Correct the cursor style of increment and decrement buttons in Chrome. 401 | */ 402 | 403 | [type="number"]::-webkit-inner-spin-button, 404 | [type="number"]::-webkit-outer-spin-button { 405 | height: auto; 406 | } 407 | 408 | /** 409 | * Correct the odd appearance of search inputs in Chrome and Safari. 410 | */ 411 | 412 | [type="search"] { 413 | -webkit-appearance: textfield; 414 | } 415 | 416 | /** 417 | * Remove the inner padding and cancel buttons in Chrome on OS X and 418 | * Safari on OS X. 419 | */ 420 | 421 | [type="search"]::-webkit-search-cancel-button, 422 | [type="search"]::-webkit-search-decoration { 423 | -webkit-appearance: none; 424 | } 425 | --------------------------------------------------------------------------------