├── .babelrc ├── .gitignore ├── config.yml ├── gulpfile.babel.js ├── package.json ├── readme.md └── src ├── assets ├── img │ └── .gitkeep ├── js │ ├── app.js │ └── lib │ │ └── foundation-explicit-pieces.js └── scss │ ├── _settings.scss │ ├── app.scss │ ├── components │ └── .gitkeep │ └── global │ └── _typography.scss ├── data └── .gitkeep ├── layouts └── default.html ├── pages └── index.html ├── partials └── .gitkeep └── styleguide ├── index.md └── template.html /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "@babel/preset-env" ], 3 | "compact": false 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | dist 5 | *.swp 6 | .cache 7 | .idea 8 | yarn.lock -------------------------------------------------------------------------------- /config.yml: -------------------------------------------------------------------------------- 1 | # Your project's server will run on localhost:xxxx at this port 2 | PORT: 8000 3 | 4 | # UnCSS will use these settings 5 | UNCSS_OPTIONS: 6 | html: 7 | - "dist/**/*.html" 8 | timeout: 1000 9 | ignore: 10 | - .foundation-mq 11 | - !!js/regexp /\.is-\w+/ 12 | 13 | # Gulp will reference these paths when it copies files 14 | PATHS: 15 | # Path to dist folder 16 | dist: "dist" 17 | # Paths to static assets that aren't images, CSS, or JavaScript 18 | assets: 19 | - "src/assets/**/*" 20 | - "!src/assets/{img,js,scss}/**/*" 21 | # Paths to Sass libraries, which can then be loaded with @import 22 | sass: 23 | - "node_modules/foundation-sites/scss" 24 | - "node_modules/motion-ui/src" 25 | # Paths to JavaScript entry points for webpack to bundle modules 26 | entries: 27 | - "src/assets/js/app.js" 28 | -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | import plugins from 'gulp-load-plugins'; 2 | import yargs from 'yargs'; 3 | import browser from 'browser-sync'; 4 | import gulp from 'gulp'; 5 | import panini from 'panini'; 6 | import rimraf from 'rimraf'; 7 | import sherpa from 'style-sherpa'; 8 | import yaml from 'js-yaml'; 9 | import fs from 'fs'; 10 | import webpackStream from 'webpack-stream'; 11 | import webpack2 from 'webpack'; 12 | import named from 'vinyl-named'; 13 | import autoprefixer from 'autoprefixer'; 14 | import imagemin from 'gulp-imagemin'; 15 | 16 | const sass = require('gulp-sass')(require('sass-embedded')); 17 | const postcss = require('gulp-postcss'); 18 | const uncss = require('postcss-uncss'); 19 | var sourcemaps = require('gulp-sourcemaps'); 20 | var plumber = require('gulp-plumber'); 21 | 22 | // Load all Gulp plugins into one variable 23 | const $ = plugins(); 24 | 25 | // Check for --production flag 26 | const PRODUCTION = !!(yargs.argv.production); 27 | 28 | // Load settings from settings.yml 29 | function loadConfig() { 30 | const unsafe = require('js-yaml-js-types').all; 31 | const schema = yaml.DEFAULT_SCHEMA.extend(unsafe); 32 | const ymlFile = fs.readFileSync('config.yml', 'utf8'); 33 | return yaml.load(ymlFile, {schema}); 34 | } 35 | const { PORT, UNCSS_OPTIONS, PATHS } = loadConfig(); 36 | 37 | console.log(UNCSS_OPTIONS); 38 | 39 | // Build the "dist" folder by running all of the below tasks 40 | // Sass must be run later so UnCSS can search for used classes in the others assets. 41 | gulp.task('build', 42 | gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sassBuild, styleGuide) 43 | ); 44 | 45 | // Build the site, run the server, and watch for file changes 46 | gulp.task('default', 47 | gulp.series('build', server, watch) 48 | ); 49 | 50 | // Delete the "dist" folder 51 | // This happens every time a build starts 52 | function clean(done) { 53 | rimraf(PATHS.dist, done); 54 | } 55 | 56 | // Copy files out of the assets folder 57 | // This task skips over the "img", "js", and "scss" folders, which are parsed separately 58 | function copy() { 59 | return gulp.src(PATHS.assets) 60 | .pipe(gulp.dest(PATHS.dist + '/assets')); 61 | } 62 | 63 | // Copy page templates into finished HTML files 64 | function pages() { 65 | return gulp.src('src/pages/**/*.{html,hbs,handlebars}') 66 | .pipe(panini({ 67 | root: 'src/pages/', 68 | layouts: 'src/layouts/', 69 | partials: 'src/partials/', 70 | data: 'src/data/', 71 | helpers: 'src/helpers/' 72 | })) 73 | .pipe(gulp.dest(PATHS.dist)); 74 | } 75 | 76 | // Load updated HTML templates and partials into Panini 77 | function resetPages(done) { 78 | panini.refresh(); 79 | done(); 80 | } 81 | 82 | // Generate a style guide from the Markdown content and HTML template in styleguide/ 83 | function styleGuide(done) { 84 | sherpa('src/styleguide/index.md', { 85 | output: PATHS.dist + '/styleguide.html', 86 | template: 'src/styleguide/template.html' 87 | }, done); 88 | } 89 | 90 | // Compile Sass into CSS 91 | // In production, the CSS is compressed 92 | function sassBuild() { 93 | 94 | const postCssPlugins = [ 95 | // Autoprefixer 96 | autoprefixer(), 97 | // UnCSS - Uncomment to remove unused styles in production 98 | // PRODUCTION && uncss(UNCSS_OPTIONS), 99 | ].filter(Boolean); 100 | 101 | return gulp.src('src/assets/scss/app.scss') 102 | .pipe(sourcemaps.init()) 103 | .pipe(plumber()) 104 | .pipe(sass({ 105 | includePaths: PATHS.sass 106 | }).on('error', sass.logError)) 107 | .pipe(postcss(postCssPlugins)) 108 | .pipe(sourcemaps.write('.')) 109 | .pipe(gulp.dest(PATHS.dist + '/assets/css')) 110 | .pipe(browser.reload({ stream: true })); 111 | } 112 | 113 | let webpackConfig = { 114 | mode: (PRODUCTION ? 'production' : 'development'), 115 | module: { 116 | rules: [ 117 | { 118 | test: /\.js$/, 119 | use: { 120 | loader: 'babel-loader', 121 | options: { 122 | presets: [ "@babel/preset-env" ], 123 | compact: false 124 | } 125 | } 126 | } 127 | ] 128 | }, 129 | devtool: !PRODUCTION && 'source-map' 130 | } 131 | 132 | // Combine JavaScript into one file 133 | // In production, the file is minified 134 | function javascript() { 135 | return gulp.src(PATHS.entries) 136 | .pipe(named()) 137 | .pipe($.sourcemaps.init()) 138 | .pipe(webpackStream(webpackConfig, webpack2)) 139 | .pipe($.if(PRODUCTION, $.terser() 140 | .on('error', e => { console.log(e); }) 141 | )) 142 | .pipe($.if(!PRODUCTION, $.sourcemaps.write())) 143 | .pipe(gulp.dest(PATHS.dist + '/assets/js')); 144 | } 145 | 146 | // Copy images to the "dist" folder 147 | // In production, the images are compressed 148 | function images() { 149 | return gulp.src('src/assets/img/**/*') 150 | .pipe($.if(PRODUCTION, imagemin([ 151 | imagemin.gifsicle({interlaced: true}), 152 | imagemin.mozjpeg({quality: 85, progressive: true}), 153 | imagemin.optipng({optimizationLevel: 5}), 154 | imagemin.svgo({ 155 | plugins: [ 156 | {removeViewBox: true}, 157 | {cleanupIDs: false} 158 | ] 159 | }) 160 | ]))) 161 | .pipe(gulp.dest(PATHS.dist + '/assets/img')); 162 | } 163 | 164 | // Start a server with BrowserSync to preview the site in 165 | function server(done) { 166 | browser.init({ 167 | server: PATHS.dist, port: PORT 168 | }, done); 169 | } 170 | 171 | // Reload the browser with BrowserSync 172 | function reload(done) { 173 | browser.reload(); 174 | done(); 175 | } 176 | 177 | // Watch for changes to static assets, pages, Sass, and JavaScript 178 | function watch() { 179 | gulp.watch(PATHS.assets, copy); 180 | gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload)); 181 | gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload)); 182 | gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload)); 183 | gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload)); 184 | gulp.watch('src/assets/scss/**/*.scss').on('all', sassBuild); 185 | gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload)); 186 | gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload)); 187 | gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload)); 188 | } 189 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foundation-zurb-template", 3 | "version": "1.0.0", 4 | "description": "Official Template for Foundation for Sites.", 5 | "main": "gulpfile.babel.js", 6 | "scripts": { 7 | "start": "gulp", 8 | "build": "gulp build --production" 9 | }, 10 | "author": "Foundation Yetinauts (https://get.foundation)", 11 | "license": "MIT", 12 | "dependencies": { 13 | "foundation-sites": "latest", 14 | "jquery": "^3.6.0", 15 | "motion-ui": "latest", 16 | "what-input": "^5.2.10" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.15.5", 20 | "@babel/preset-env": "^7.15.6", 21 | "@babel/register": "^7.15.3", 22 | "autoprefixer": "^10.4.15", 23 | "babel-loader": "^8.2.2", 24 | "browser-sync": "^2.29.3", 25 | "fs": "^0.0.1-security", 26 | "gulp": "^4.0.0", 27 | "gulp-babel": "^8.0.0", 28 | "gulp-clean-css": "^4.3.0", 29 | "gulp-cli": "^2.3.0", 30 | "gulp-concat": "^2.6.1", 31 | "gulp-extname": "^0.2.2", 32 | "gulp-if": "^3.0.0", 33 | "gulp-imagemin": "^7.1.0", 34 | "gulp-load-plugins": "^2.0.7", 35 | "gulp-plumber": "^1.2.1", 36 | "gulp-postcss": "^10.0.0", 37 | "gulp-sass": "^5.1.0", 38 | "gulp-sourcemaps": "^3.0.0", 39 | "gulp-terser": "^2.0.1", 40 | "js-yaml": "^4.1.0", 41 | "js-yaml-js-types": "^1.0.0", 42 | "panini": "latest", 43 | "postcss": "^8.4.28", 44 | "postcss-uncss": "^0.17.0", 45 | "rimraf": "^3.0.2", 46 | "sass-embedded": "^1.79.3", 47 | "style-sherpa": "^1.0.2", 48 | "uncss": "^0.17.3", 49 | "vinyl-named": "^1.1.0", 50 | "webpack": "^5.52.1", 51 | "webpack-stream": "^7.0.0", 52 | "yargs": "^17.1.1" 53 | }, 54 | "repository": { 55 | "type": "git", 56 | "url": "https://github.com/zurb/foundation-zurb-template.git" 57 | }, 58 | "bugs": { 59 | "url": "https://github.com/zurb/foundation-sites/issues", 60 | "email": "foundation@zurb.com" 61 | }, 62 | "private": true, 63 | "browserslist": [ 64 | "last 2 versions", 65 | "> 1%" 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # ZURB Template 2 | 3 | **Please open all issues with this template on the main [Foundation for Sites](https://github.com/foundation/foundation-sites/issues) repo.** 4 | 5 | This is the official ZURB Template for use with [Foundation for Sites](https://get.foundation/sites/docs/). We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features: 6 | 7 | - Handlebars HTML templates with Panini 8 | - Sass compilation and prefixing 9 | - JavaScript module bundling with webpack 10 | - Built-in BrowserSync server 11 | - For production builds: 12 | - CSS compression 13 | - JavaScript module bundling with webpack 14 | - Image compression 15 | 16 | ## Installation 17 | 18 | To use this template, your computer needs: 19 | 20 | - [NodeJS](https://nodejs.org/en/) (Version 12 or greater recommended) 21 | - [Git](https://git-scm.com/) 22 | 23 | This template can be installed with the Foundation CLI, or downloaded and set up manually. 24 | 25 | ### Using the CLI 26 | 27 | Install the Foundation CLI with this command: 28 | 29 | ```bash 30 | npm install foundation-cli --global 31 | ``` 32 | 33 | Use this command to set up a blank Foundation for Sites project with this template: 34 | 35 | ```bash 36 | foundation new --framework sites --template zurb 37 | ``` 38 | 39 | The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name. 40 | 41 | Now `cd` to your project name and to start your project run 42 | 43 | ```bash 44 | foundation watch 45 | ``` 46 | 47 | ### Manual Setup 48 | 49 | To manually set up the template, first download it with Git: 50 | 51 | ```bash 52 | git clone https://github.com/foundation/foundation-zurb-template projectname 53 | ``` 54 | 55 | Then open the folder in your command line, and install the needed dependencies: 56 | 57 | ```bash 58 | cd projectname 59 | yarn 60 | ``` 61 | 62 | Finally, run `yarn start` to run Gulp. Your finished site will be created in a folder called `dist`, viewable at this URL: 63 | 64 | ``` 65 | http://localhost:8000 66 | ``` 67 | 68 | To create compressed, production-ready assets, run `yarn run build`. 69 | -------------------------------------------------------------------------------- /src/assets/img/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foundation/foundation-zurb-template/bd20b651cbf729f28c375bfc3c64cef5cfad898b/src/assets/img/.gitkeep -------------------------------------------------------------------------------- /src/assets/js/app.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery'; 2 | import 'what-input'; 3 | 4 | // Foundation JS relies on a global variable. In ES6, all imports are hoisted 5 | // to the top of the file so if we used `import` to import Foundation, 6 | // it would execute earlier than we have assigned the global variable. 7 | // This is why we have to use CommonJS require() here since it doesn't 8 | // have the hoisting behavior. 9 | window.jQuery = $; 10 | require('foundation-sites'); 11 | 12 | // If you want to pick and choose which modules to include, comment out the above and uncomment 13 | // the line below 14 | //import './lib/foundation-explicit-pieces'; 15 | 16 | 17 | $(document).foundation(); 18 | -------------------------------------------------------------------------------- /src/assets/js/lib/foundation-explicit-pieces.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery'; 2 | 3 | import { Foundation } from 'foundation-sites/js/foundation.core'; 4 | import * as CoreUtils from 'foundation-sites/js/foundation.core.utils'; 5 | import { Box } from 'foundation-sites/js/foundation.util.box' 6 | import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader'; 7 | import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard'; 8 | import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery'; 9 | import { Motion, Move } from 'foundation-sites/js/foundation.util.motion'; 10 | import { Nest } from 'foundation-sites/js/foundation.util.nest'; 11 | import { Timer } from 'foundation-sites/js/foundation.util.timer'; 12 | import { Touch } from 'foundation-sites/js/foundation.util.touch'; 13 | import { Triggers } from 'foundation-sites/js/foundation.util.triggers'; 14 | import { Abide } from 'foundation-sites/js/foundation.abide'; 15 | import { Accordion } from 'foundation-sites/js/foundation.accordion'; 16 | import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu'; 17 | import { Drilldown } from 'foundation-sites/js/foundation.drilldown'; 18 | import { Dropdown } from 'foundation-sites/js/foundation.dropdown'; 19 | import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu'; 20 | import { Equalizer } from 'foundation-sites/js/foundation.equalizer'; 21 | import { Interchange } from 'foundation-sites/js/foundation.interchange'; 22 | import { Magellan } from 'foundation-sites/js/foundation.magellan'; 23 | import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas'; 24 | import { Orbit } from 'foundation-sites/js/foundation.orbit'; 25 | import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu'; 26 | import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle'; 27 | import { Reveal } from 'foundation-sites/js/foundation.reveal'; 28 | import { Slider } from 'foundation-sites/js/foundation.slider'; 29 | import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll'; 30 | import { Sticky } from 'foundation-sites/js/foundation.sticky'; 31 | import { Tabs } from 'foundation-sites/js/foundation.tabs'; 32 | import { Toggler } from 'foundation-sites/js/foundation.toggler'; 33 | import { Tooltip } from 'foundation-sites/js/foundation.tooltip'; 34 | import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs'; 35 | 36 | Foundation.addToJquery($); 37 | 38 | // Add Foundation Utils to Foundation global namespace for backwards 39 | // compatibility. 40 | Foundation.rtl = CoreUtils.rtl; 41 | Foundation.GetYoDigits = CoreUtils.GetYoDigits; 42 | Foundation.transitionend = CoreUtils.transitionend; 43 | Foundation.RegExpEscape = CoreUtils.RegExpEscape; 44 | Foundation.onLoad = CoreUtils.onLoad; 45 | 46 | Foundation.Box = Box; 47 | Foundation.onImagesLoaded = onImagesLoaded; 48 | Foundation.Keyboard = Keyboard; 49 | Foundation.MediaQuery = MediaQuery; 50 | Foundation.Motion = Motion; 51 | Foundation.Move = Move; 52 | Foundation.Nest = Nest; 53 | Foundation.Timer = Timer; 54 | 55 | // Touch and Triggers previously were almost purely sede effect driven, 56 | // so no need to add it to Foundation, just init them. 57 | Touch.init($); 58 | Triggers.init($, Foundation); 59 | MediaQuery._init(); 60 | 61 | Foundation.plugin(Abide, 'Abide'); 62 | Foundation.plugin(Accordion, 'Accordion'); 63 | Foundation.plugin(AccordionMenu, 'AccordionMenu'); 64 | Foundation.plugin(Drilldown, 'Drilldown'); 65 | Foundation.plugin(Dropdown, 'Dropdown'); 66 | Foundation.plugin(DropdownMenu, 'DropdownMenu'); 67 | Foundation.plugin(Equalizer, 'Equalizer'); 68 | Foundation.plugin(Interchange, 'Interchange'); 69 | Foundation.plugin(Magellan, 'Magellan'); 70 | Foundation.plugin(OffCanvas, 'OffCanvas'); 71 | Foundation.plugin(Orbit, 'Orbit'); 72 | Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu'); 73 | Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle'); 74 | Foundation.plugin(Reveal, 'Reveal'); 75 | Foundation.plugin(Slider, 'Slider'); 76 | Foundation.plugin(SmoothScroll, 'SmoothScroll'); 77 | Foundation.plugin(Sticky, 'Sticky'); 78 | Foundation.plugin(Tabs, 'Tabs'); 79 | Foundation.plugin(Toggler, 'Toggler'); 80 | Foundation.plugin(Tooltip, 'Tooltip'); 81 | Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs'); 82 | 83 | export { Foundation }; 84 | -------------------------------------------------------------------------------- /src/assets/scss/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites Settings 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Global 7 | // 2. Breakpoints 8 | // 3. The Grid 9 | // 4. Base Typography 10 | // 5. Typography Helpers 11 | // 6. Abide 12 | // 7. Accordion 13 | // 8. Accordion Menu 14 | // 9. Badge 15 | // 10. Breadcrumbs 16 | // 11. Button 17 | // 12. Button Group 18 | // 13. Callout 19 | // 14. Card 20 | // 15. Close Button 21 | // 16. Drilldown 22 | // 17. Dropdown 23 | // 18. Dropdown Menu 24 | // 19. Flexbox Utilities 25 | // 20. Forms 26 | // 21. Label 27 | // 22. Media Object 28 | // 23. Menu 29 | // 24. Meter 30 | // 25. Off-canvas 31 | // 26. Orbit 32 | // 27. Pagination 33 | // 28. Progress Bar 34 | // 29. Prototype Arrow 35 | // 30. Prototype Border-Box 36 | // 31. Prototype Border-None 37 | // 32. Prototype Bordered 38 | // 33. Prototype Display 39 | // 34. Prototype Font-Styling 40 | // 35. Prototype List-Style-Type 41 | // 36. Prototype Overflow 42 | // 37. Prototype Position 43 | // 38. Prototype Rounded 44 | // 39. Prototype Separator 45 | // 40. Prototype Shadow 46 | // 41. Prototype Sizing 47 | // 42. Prototype Spacing 48 | // 43. Prototype Text-Decoration 49 | // 44. Prototype Text-Transformation 50 | // 45. Prototype Text-Utilities 51 | // 46. Responsive Embed 52 | // 47. Reveal 53 | // 48. Slider 54 | // 49. Switch 55 | // 50. Table 56 | // 51. Tabs 57 | // 52. Thumbnail 58 | // 53. Title Bar 59 | // 54. Tooltip 60 | // 55. Top Bar 61 | // 57. Xy Grid 62 | 63 | @use "sass:color"; 64 | @import 'util/util'; 65 | 66 | // 1. Global 67 | // --------- 68 | 69 | $global-font-size: 100%; 70 | $global-width: rem-calc(1200); 71 | $global-lineheight: 1.5; 72 | $foundation-palette: ( 73 | "primary": #1779ba, 74 | "secondary": #767676, 75 | "success": #3adb76, 76 | "warning": #ffae00, 77 | "alert": #cc4b37, 78 | ); 79 | $light-gray: #e6e6e6; 80 | $medium-gray: #cacaca; 81 | $dark-gray: #8a8a8a; 82 | $black: #0a0a0a; 83 | $white: #fefefe; 84 | $body-background: $white; 85 | $body-font-color: $black; 86 | $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 87 | $body-safe-padding: false; 88 | $body-antialiased: true; 89 | $global-margin: 1rem; 90 | $global-padding: 1rem; 91 | $global-position: 1rem; 92 | $global-weight-normal: normal; 93 | $global-weight-bold: bold; 94 | $global-radius: 0; 95 | $global-menu-padding: 0.7rem 1rem; 96 | $global-menu-nested-margin: 1rem; 97 | $global-text-direction: ltr; 98 | $global-flexbox: true; 99 | $global-prototype-breakpoints: false; 100 | $global-button-cursor: auto; 101 | $global-color-pick-contrast-tolerance: 0; 102 | $print-transparent-backgrounds: true; 103 | $print-hrefs: true; 104 | 105 | @include add-foundation-colors; 106 | 107 | // 2. Breakpoints 108 | // -------------- 109 | 110 | $-zf-size: null; 111 | $breakpoints: ( 112 | "small": 0, 113 | "medium": 640px, 114 | "large": 1024px, 115 | "xlarge": 1200px, 116 | "xxlarge": 1440px, 117 | ); 118 | $breakpoints-hidpi: ( 119 | "hidpi-1": 1, 120 | "hidpi-1-5": 1.5, 121 | "hidpi-2": 2, 122 | "retina": 2, 123 | "hidpi-3": 3 124 | ); 125 | $print-breakpoint: large; 126 | $breakpoint-classes: (small medium large); 127 | 128 | // 3. The Grid 129 | // ----------- 130 | 131 | $grid-row-width: $global-width; 132 | $grid-column-count: 12; 133 | $grid-column-gutter: ( 134 | small: 20px, 135 | medium: 30px, 136 | ); 137 | $grid-column-align-edge: true; 138 | $grid-column-alias: 'columns'; 139 | $block-grid-max: 8; 140 | 141 | // 4. Base Typography 142 | // ------------------ 143 | 144 | $header-font-family: $body-font-family; 145 | $header-font-weight: $global-weight-normal; 146 | $header-font-style: normal; 147 | $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; 148 | $header-color: inherit; 149 | $header-lineheight: 1.4; 150 | $header-margin-bottom: 0.5rem; 151 | $header-styles: ( 152 | small: ( 153 | 'h1': ('font-size': 24), 154 | 'h2': ('font-size': 20), 155 | 'h3': ('font-size': 19), 156 | 'h4': ('font-size': 18), 157 | 'h5': ('font-size': 17), 158 | 'h6': ('font-size': 16), 159 | ), 160 | medium: ( 161 | 'h1': ('font-size': 48), 162 | 'h2': ('font-size': 40), 163 | 'h3': ('font-size': 31), 164 | 'h4': ('font-size': 25), 165 | 'h5': ('font-size': 20), 166 | 'h6': ('font-size': 16), 167 | ), 168 | ); 169 | $header-text-rendering: optimizeLegibility; 170 | $small-font-size: 80%; 171 | $header-small-font-color: $medium-gray; 172 | $paragraph-lineheight: 1.6; 173 | $paragraph-margin-bottom: 1rem; 174 | $paragraph-text-rendering: optimizeLegibility; 175 | $enable-code-inline: true; 176 | $anchor-color: $primary-color; 177 | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); 178 | $anchor-text-decoration: none; 179 | $anchor-text-decoration-hover: none; 180 | $hr-width: $global-width; 181 | $hr-border: 1px solid $medium-gray; 182 | $hr-margin: rem-calc(20) auto; 183 | $list-lineheight: $paragraph-lineheight; 184 | $list-margin-bottom: $paragraph-margin-bottom; 185 | $list-style-type: disc; 186 | $list-style-position: outside; 187 | $list-side-margin: 1.25rem; 188 | $list-nested-side-margin: 1.25rem; 189 | $defnlist-margin-bottom: 1rem; 190 | $defnlist-term-weight: $global-weight-bold; 191 | $defnlist-term-margin-bottom: 0.3rem; 192 | $blockquote-color: $dark-gray; 193 | $blockquote-padding: rem-calc(9 20 0 19); 194 | $blockquote-border: 1px solid $medium-gray; 195 | $enable-cite-block: true; 196 | $keystroke-font: $font-family-monospace; 197 | $keystroke-color: $black; 198 | $keystroke-background: $light-gray; 199 | $keystroke-padding: rem-calc(2 4 0); 200 | $keystroke-radius: $global-radius; 201 | $abbr-underline: 1px dotted $black; 202 | 203 | // 5. Typography Helpers 204 | // --------------------- 205 | 206 | $lead-font-size: $global-font-size * 1.25; 207 | $lead-lineheight: 1.6; 208 | $subheader-lineheight: 1.4; 209 | $subheader-color: $dark-gray; 210 | $subheader-font-weight: $global-weight-normal; 211 | $subheader-margin-top: 0.2rem; 212 | $subheader-margin-bottom: 0.5rem; 213 | $stat-font-size: 2.5rem; 214 | $cite-color: $dark-gray; 215 | $cite-font-size: rem-calc(13); 216 | $cite-pseudo-content: '\2014 \0020'; 217 | $code-color: $black; 218 | $code-font-family: $font-family-monospace; 219 | $code-font-weight: $global-weight-normal; 220 | $code-background: $light-gray; 221 | $code-border: 1px solid $medium-gray; 222 | $code-padding: rem-calc(2 5 1); 223 | $code-block-padding: 1rem; 224 | $code-block-margin-bottom: 1.5rem; 225 | 226 | // 6. Abide 227 | // -------- 228 | 229 | $abide-inputs: true; 230 | $abide-labels: true; 231 | $input-background-invalid: get-color(alert); 232 | $form-label-color-invalid: get-color(alert); 233 | $input-error-color: get-color(alert); 234 | $input-error-font-size: rem-calc(12); 235 | $input-error-font-weight: $global-weight-bold; 236 | 237 | // 7. Accordion 238 | // ------------ 239 | 240 | $accordion-background: $white; 241 | $accordion-plusminus: true; 242 | $accordion-plus-content: '\002B'; 243 | $accordion-minus-content: '\2013'; 244 | $accordion-title-font-size: rem-calc(12); 245 | $accordion-item-color: $primary-color; 246 | $accordion-item-background-hover: $light-gray; 247 | $accordion-item-padding: 1.25rem 1rem; 248 | $accordion-content-background: $white; 249 | $accordion-content-border: 1px solid $light-gray; 250 | $accordion-content-color: $body-font-color; 251 | $accordion-content-padding: 1rem; 252 | 253 | // 8. Accordion Menu 254 | // ----------------- 255 | 256 | $accordionmenu-padding: $global-menu-padding; 257 | $accordionmenu-nested-margin: $global-menu-nested-margin; 258 | $accordionmenu-submenu-padding: $accordionmenu-padding; 259 | $accordionmenu-arrows: true; 260 | $accordionmenu-arrow-color: $primary-color; 261 | $accordionmenu-item-background: null; 262 | $accordionmenu-border: null; 263 | $accordionmenu-submenu-toggle-background: null; 264 | $accordion-submenu-toggle-border: $accordionmenu-border; 265 | $accordionmenu-submenu-toggle-width: 40px; 266 | $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width; 267 | $accordionmenu-arrow-size: 6px; 268 | 269 | // 9. Badge 270 | // -------- 271 | 272 | $badge-background: $primary-color; 273 | $badge-color: $white; 274 | $badge-color-alt: $black; 275 | $badge-palette: $foundation-palette; 276 | $badge-padding: 0.3em; 277 | $badge-minwidth: 2.1em; 278 | $badge-font-size: 0.6rem; 279 | 280 | // 10. Breadcrumbs 281 | // --------------- 282 | 283 | $breadcrumbs-margin: 0 0 $global-margin 0; 284 | $breadcrumbs-item-font-size: rem-calc(11); 285 | $breadcrumbs-item-color: $primary-color; 286 | $breadcrumbs-item-color-current: $black; 287 | $breadcrumbs-item-color-disabled: $medium-gray; 288 | $breadcrumbs-item-margin: 0.75rem; 289 | $breadcrumbs-item-uppercase: true; 290 | $breadcrumbs-item-separator: true; 291 | $breadcrumbs-item-separator-item: '/'; 292 | $breadcrumbs-item-separator-item-rtl: '\\'; 293 | $breadcrumbs-item-separator-color: $medium-gray; 294 | 295 | // 11. Button 296 | // ---------- 297 | 298 | $button-font-family: inherit; 299 | $button-font-weight: null; 300 | $button-padding: 0.85em 1em; 301 | $button-margin: 0 0 $global-margin 0; 302 | $button-fill: solid; 303 | $button-background: $primary-color; 304 | $button-background-hover: scale-color($button-background, $lightness: -15%); 305 | $button-color: $white; 306 | $button-color-alt: $black; 307 | $button-radius: $global-radius; 308 | $button-border: 1px solid transparent; 309 | $button-hollow-border-width: 1px; 310 | $button-sizes: ( 311 | tiny: 0.6rem, 312 | small: 0.75rem, 313 | default: 0.9rem, 314 | large: 1.25rem, 315 | ); 316 | $button-palette: $foundation-palette; 317 | $button-opacity-disabled: 0.25; 318 | $button-background-hover-lightness: -20%; 319 | $button-hollow-hover-lightness: -50%; 320 | $button-transition: background-color 0.25s ease-out, color 0.25s ease-out; 321 | $button-responsive-expanded: false; 322 | 323 | // 12. Button Group 324 | // ---------------- 325 | 326 | $buttongroup-margin: 1rem; 327 | $buttongroup-spacing: 1px; 328 | $buttongroup-child-selector: '.button'; 329 | $buttongroup-expand-max: 6; 330 | $buttongroup-radius-on-each: true; 331 | 332 | // 13. Callout 333 | // ----------- 334 | 335 | $callout-background: $white; 336 | $callout-background-fade: 85%; 337 | $callout-border: 1px solid rgba($black, 0.25); 338 | $callout-margin: 0 0 1rem 0; 339 | $callout-sizes: ( 340 | small: 0.5rem, 341 | default: 1rem, 342 | large: 3rem, 343 | ); 344 | $callout-font-color: $body-font-color; 345 | $callout-font-color-alt: $body-background; 346 | $callout-radius: $global-radius; 347 | $callout-link-tint: 30%; 348 | 349 | // 14. Card 350 | // -------- 351 | 352 | $card-background: $white; 353 | $card-font-color: $body-font-color; 354 | $card-divider-background: $light-gray; 355 | $card-border: 1px solid $light-gray; 356 | $card-shadow: none; 357 | $card-border-radius: $global-radius; 358 | $card-padding: $global-padding; 359 | $card-margin-bottom: $global-margin; 360 | 361 | // 15. Close Button 362 | // ---------------- 363 | 364 | $closebutton-position: right top; 365 | $closebutton-z-index: 10; 366 | $closebutton-default-size: medium; 367 | $closebutton-offset-horizontal: ( 368 | small: 0.66rem, 369 | medium: 1rem, 370 | ); 371 | $closebutton-offset-vertical: ( 372 | small: 0.33em, 373 | medium: 0.5rem, 374 | ); 375 | $closebutton-size: ( 376 | small: 1.5em, 377 | medium: 2em, 378 | ); 379 | $closebutton-lineheight: 1; 380 | $closebutton-color: $dark-gray; 381 | $closebutton-color-hover: $black; 382 | 383 | // 16. Drilldown 384 | // ------------- 385 | 386 | $drilldown-transition: transform 0.15s linear; 387 | $drilldown-arrows: true; 388 | $drilldown-padding: $global-menu-padding; 389 | $drilldown-nested-margin: 0; 390 | $drilldown-background: $white; 391 | $drilldown-submenu-padding: $drilldown-padding; 392 | $drilldown-submenu-background: $white; 393 | $drilldown-arrow-color: $primary-color; 394 | $drilldown-arrow-size: 6px; 395 | 396 | // 17. Dropdown 397 | // ------------ 398 | 399 | $dropdown-padding: 1rem; 400 | $dropdown-background: $body-background; 401 | $dropdown-border: 1px solid $medium-gray; 402 | $dropdown-font-size: 1rem; 403 | $dropdown-width: 300px; 404 | $dropdown-radius: $global-radius; 405 | $dropdown-sizes: ( 406 | tiny: 100px, 407 | small: 200px, 408 | large: 400px, 409 | ); 410 | 411 | // 18. Dropdown Menu 412 | // ----------------- 413 | 414 | $dropdownmenu-arrows: true; 415 | $dropdownmenu-arrow-color: $anchor-color; 416 | $dropdownmenu-arrow-size: 6px; 417 | $dropdownmenu-arrow-padding: 1.5rem; 418 | $dropdownmenu-min-width: 200px; 419 | $dropdownmenu-background: null; 420 | $dropdownmenu-submenu-background: $white; 421 | $dropdownmenu-padding: $global-menu-padding; 422 | $dropdownmenu-nested-margin: 0; 423 | $dropdownmenu-submenu-padding: $dropdownmenu-padding; 424 | $dropdownmenu-border: 1px solid $medium-gray; 425 | $dropdown-menu-item-color-active: get-color(primary); 426 | $dropdown-menu-item-background-active: transparent; 427 | 428 | // 19. Flexbox Utilities 429 | // --------------------- 430 | 431 | $flex-source-ordering-count: 6; 432 | $flexbox-responsive-breakpoints: true; 433 | 434 | // 20. Forms 435 | // --------- 436 | 437 | $fieldset-border: 1px solid $medium-gray; 438 | $fieldset-padding: rem-calc(20); 439 | $fieldset-margin: rem-calc(18 0); 440 | $legend-padding: rem-calc(0 3); 441 | $form-spacing: rem-calc(16); 442 | $helptext-color: $black; 443 | $helptext-font-size: rem-calc(13); 444 | $helptext-font-style: italic; 445 | $input-prefix-color: $black; 446 | $input-prefix-background: $light-gray; 447 | $input-prefix-border: 1px solid $medium-gray; 448 | $input-prefix-padding: 1rem; 449 | $form-label-color: $black; 450 | $form-label-font-size: rem-calc(14); 451 | $form-label-font-weight: $global-weight-normal; 452 | $form-label-line-height: 1.8; 453 | $select-background: $white; 454 | $select-triangle-color: $dark-gray; 455 | $select-radius: $global-radius; 456 | $input-color: $black; 457 | $input-placeholder-color: $medium-gray; 458 | $input-font-family: inherit; 459 | $input-font-size: rem-calc(16); 460 | $input-font-weight: $global-weight-normal; 461 | $input-line-height: $global-lineheight; 462 | $input-background: $white; 463 | $input-background-focus: $white; 464 | $input-background-disabled: $light-gray; 465 | $input-border: 1px solid $medium-gray; 466 | $input-border-focus: 1px solid $dark-gray; 467 | $input-padding: $form-spacing * 0.5; 468 | $input-shadow: inset 0 1px 2px rgba($black, 0.1); 469 | $input-shadow-focus: 0 0 5px $medium-gray; 470 | $input-cursor-disabled: not-allowed; 471 | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 472 | $input-number-spinners: true; 473 | $input-radius: $global-radius; 474 | $form-button-radius: $global-radius; 475 | 476 | // 21. Label 477 | // --------- 478 | 479 | $label-background: $primary-color; 480 | $label-color: $white; 481 | $label-color-alt: $black; 482 | $label-palette: $foundation-palette; 483 | $label-font-size: 0.8rem; 484 | $label-padding: 0.33333rem 0.5rem; 485 | $label-radius: $global-radius; 486 | 487 | // 22. Media Object 488 | // ---------------- 489 | 490 | $mediaobject-margin-bottom: $global-margin; 491 | $mediaobject-section-padding: $global-padding; 492 | $mediaobject-image-width-stacked: 100%; 493 | 494 | // 23. Menu 495 | // -------- 496 | 497 | $menu-margin: 0; 498 | $menu-nested-margin: $global-menu-nested-margin; 499 | $menu-items-padding: $global-menu-padding; 500 | $menu-simple-margin: 1rem; 501 | $menu-item-color-active: $white; 502 | $menu-item-color-alt-active: $black; 503 | $menu-item-background-active: get-color(primary); 504 | $menu-icon-spacing: 0.25rem; 505 | $menu-state-back-compat: true; 506 | $menu-centered-back-compat: true; 507 | $menu-icons-back-compat: true; 508 | 509 | // 24. Meter 510 | // --------- 511 | 512 | $meter-height: 1rem; 513 | $meter-radius: $global-radius; 514 | $meter-background: $medium-gray; 515 | $meter-fill-good: $success-color; 516 | $meter-fill-medium: $warning-color; 517 | $meter-fill-bad: $alert-color; 518 | 519 | // 25. Off-canvas 520 | // -------------- 521 | 522 | $offcanvas-sizes: ( 523 | small: 250px, 524 | ); 525 | $offcanvas-vertical-sizes: ( 526 | small: 250px, 527 | ); 528 | $offcanvas-background: $light-gray; 529 | $offcanvas-shadow: 0 0 10px rgba($black, 0.7); 530 | $offcanvas-inner-shadow-size: 20px; 531 | $offcanvas-inner-shadow-color: rgba($black, 0.25); 532 | $offcanvas-overlay-zindex: 11; 533 | $offcanvas-push-zindex: 12; 534 | $offcanvas-overlap-zindex: 13; 535 | $offcanvas-reveal-zindex: 12; 536 | $offcanvas-transition-length: 0.5s; 537 | $offcanvas-transition-timing: ease; 538 | $offcanvas-fixed-reveal: true; 539 | $offcanvas-exit-background: rgba($white, 0.25); 540 | $maincontent-class: 'off-canvas-content'; 541 | 542 | // 26. Orbit 543 | // --------- 544 | 545 | $orbit-bullet-background: $medium-gray; 546 | $orbit-bullet-background-active: $dark-gray; 547 | $orbit-bullet-diameter: 1.2rem; 548 | $orbit-bullet-margin: 0.1rem; 549 | $orbit-bullet-margin-top: 0.8rem; 550 | $orbit-bullet-margin-bottom: 0.8rem; 551 | $orbit-caption-background: rgba($black, 0.5); 552 | $orbit-caption-padding: 1rem; 553 | $orbit-control-background-hover: rgba($black, 0.5); 554 | $orbit-control-padding: 1rem; 555 | $orbit-control-zindex: 10; 556 | 557 | // 27. Pagination 558 | // -------------- 559 | 560 | $pagination-font-size: rem-calc(14); 561 | $pagination-margin-bottom: $global-margin; 562 | $pagination-item-color: $black; 563 | $pagination-item-padding: rem-calc(3 10); 564 | $pagination-item-spacing: rem-calc(1); 565 | $pagination-radius: $global-radius; 566 | $pagination-item-background-hover: $light-gray; 567 | $pagination-item-background-current: $primary-color; 568 | $pagination-item-color-current: $white; 569 | $pagination-item-color-disabled: $medium-gray; 570 | $pagination-ellipsis-color: $black; 571 | $pagination-mobile-items: false; 572 | $pagination-mobile-current-item: false; 573 | $pagination-arrows: true; 574 | $pagination-arrow-previous: '\00AB'; 575 | $pagination-arrow-next: '\00BB'; 576 | 577 | // 28. Progress Bar 578 | // ---------------- 579 | 580 | $progress-height: 1rem; 581 | $progress-background: $medium-gray; 582 | $progress-margin-bottom: $global-margin; 583 | $progress-meter-background: $primary-color; 584 | $progress-radius: $global-radius; 585 | 586 | // 29. Prototype Arrow 587 | // ------------------- 588 | 589 | $prototype-arrow-directions: ( 590 | down, 591 | up, 592 | right, 593 | left 594 | ); 595 | $prototype-arrow-size: 0.4375rem; 596 | $prototype-arrow-color: $black; 597 | 598 | // 30. Prototype Border-Box 599 | // ------------------------ 600 | 601 | $prototype-border-box-breakpoints: $global-prototype-breakpoints; 602 | 603 | // 31. Prototype Border-None 604 | // ------------------------- 605 | 606 | $prototype-border-none-breakpoints: $global-prototype-breakpoints; 607 | 608 | // 32. Prototype Bordered 609 | // ---------------------- 610 | 611 | $prototype-bordered-breakpoints: $global-prototype-breakpoints; 612 | $prototype-border-width: rem-calc(1); 613 | $prototype-border-type: solid; 614 | $prototype-border-color: $medium-gray; 615 | 616 | // 33. Prototype Display 617 | // --------------------- 618 | 619 | $prototype-display-breakpoints: $global-prototype-breakpoints; 620 | $prototype-display: ( 621 | inline, 622 | inline-block, 623 | block, 624 | table, 625 | table-cell 626 | ); 627 | 628 | // 34. Prototype Font-Styling 629 | // -------------------------- 630 | 631 | $prototype-font-breakpoints: $global-prototype-breakpoints; 632 | $prototype-wide-letter-spacing: rem-calc(4); 633 | $prototype-font-normal: $global-weight-normal; 634 | $prototype-font-bold: $global-weight-bold; 635 | 636 | // 35. Prototype List-Style-Type 637 | // ----------------------------- 638 | 639 | $prototype-list-breakpoints: $global-prototype-breakpoints; 640 | $prototype-style-type-unordered: ( 641 | disc, 642 | circle, 643 | square 644 | ); 645 | $prototype-style-type-ordered: ( 646 | decimal, 647 | lower-alpha, 648 | lower-latin, 649 | lower-roman, 650 | upper-alpha, 651 | upper-latin, 652 | upper-roman 653 | ); 654 | 655 | // 36. Prototype Overflow 656 | // ---------------------- 657 | 658 | $prototype-overflow-breakpoints: $global-prototype-breakpoints; 659 | $prototype-overflow: ( 660 | visible, 661 | hidden, 662 | scroll 663 | ); 664 | 665 | // 37. Prototype Position 666 | // ---------------------- 667 | 668 | $prototype-position-breakpoints: $global-prototype-breakpoints; 669 | $prototype-position: ( 670 | static, 671 | relative, 672 | absolute, 673 | fixed 674 | ); 675 | $prototype-position-z-index: 975; 676 | 677 | // 38. Prototype Rounded 678 | // --------------------- 679 | 680 | $prototype-rounded-breakpoints: $global-prototype-breakpoints; 681 | $prototype-border-radius: rem-calc(3); 682 | 683 | // 39. Prototype Separator 684 | // ----------------------- 685 | 686 | $prototype-separator-breakpoints: $global-prototype-breakpoints; 687 | $prototype-separator-align: center; 688 | $prototype-separator-height: rem-calc(2); 689 | $prototype-separator-width: 3rem; 690 | $prototype-separator-background: $primary-color; 691 | $prototype-separator-margin-top: $global-margin; 692 | 693 | // 40. Prototype Shadow 694 | // -------------------- 695 | 696 | $prototype-shadow-breakpoints: $global-prototype-breakpoints; 697 | $prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 698 | 699 | // 41. Prototype Sizing 700 | // -------------------- 701 | 702 | $prototype-sizing-breakpoints: $global-prototype-breakpoints; 703 | $prototype-sizing: ( 704 | width, 705 | height 706 | ); 707 | $prototype-sizes: ( 708 | 25: 25%, 709 | 50: 50%, 710 | 75: 75%, 711 | 100: 100% 712 | ); 713 | 714 | // 42. Prototype Spacing 715 | // --------------------- 716 | 717 | $prototype-spacing-breakpoints: $global-prototype-breakpoints; 718 | $prototype-spacers-count: 3; 719 | 720 | // 43. Prototype Text-Decoration 721 | // ----------------------------- 722 | 723 | $prototype-decoration-breakpoints: $global-prototype-breakpoints; 724 | $prototype-text-decoration: ( 725 | overline, 726 | underline, 727 | line-through, 728 | ); 729 | 730 | // 44. Prototype Text-Transformation 731 | // --------------------------------- 732 | 733 | $prototype-transformation-breakpoints: $global-prototype-breakpoints; 734 | $prototype-text-transformation: ( 735 | lowercase, 736 | uppercase, 737 | capitalize 738 | ); 739 | 740 | // 45. Prototype Text-Utilities 741 | // ---------------------------- 742 | 743 | $prototype-utilities-breakpoints: $global-prototype-breakpoints; 744 | $prototype-text-overflow: ellipsis; 745 | 746 | // 46. Responsive Embed 747 | // -------------------- 748 | 749 | $responsive-embed-margin-bottom: rem-calc(16); 750 | $responsive-embed-ratios: ( 751 | default: 4 by 3, 752 | widescreen: 16 by 9, 753 | ); 754 | 755 | // 47. Reveal 756 | // ---------- 757 | 758 | $reveal-background: $white; 759 | $reveal-width: 600px; 760 | $reveal-max-width: $global-width; 761 | $reveal-padding: $global-padding; 762 | $reveal-border: 1px solid $medium-gray; 763 | $reveal-radius: $global-radius; 764 | $reveal-zindex: 1005; 765 | $reveal-overlay-background: rgba($black, 0.45); 766 | 767 | // 48. Slider 768 | // ---------- 769 | 770 | $slider-width-vertical: 0.5rem; 771 | $slider-transition: all 0.2s ease-in-out; 772 | $slider-height: 0.5rem; 773 | $slider-background: $light-gray; 774 | $slider-fill-background: $medium-gray; 775 | $slider-handle-height: 1.4rem; 776 | $slider-handle-width: 1.4rem; 777 | $slider-handle-background: $primary-color; 778 | $slider-opacity-disabled: 0.25; 779 | $slider-radius: $global-radius; 780 | 781 | // 49. Switch 782 | // ---------- 783 | 784 | $switch-background: $medium-gray; 785 | $switch-background-focus: scale-color($switch-background, $lightness: -10%); 786 | $switch-background-active: $primary-color; 787 | $switch-background-active-focus: scale-color($switch-background-active, $lightness: -15%); 788 | $switch-height: 2rem; 789 | $switch-height-tiny: 1.5rem; 790 | $switch-height-small: 1.75rem; 791 | $switch-height-large: 2.5rem; 792 | $switch-radius: $global-radius; 793 | $switch-margin: $global-margin; 794 | $switch-paddle-background: $white; 795 | $switch-paddle-offset: 0.25rem; 796 | $switch-paddle-radius: $global-radius; 797 | $switch-paddle-transition: all 0.25s ease-out; 798 | $switch-opacity-disabled: 0.5; 799 | $switch-cursor-disabled: not-allowed; 800 | 801 | // 50. Table 802 | // --------- 803 | 804 | $table-background: $white; 805 | $table-color-scale: 5%; 806 | $table-border: 1px solid smart-scale($table-background, $table-color-scale); 807 | $table-padding: rem-calc(8 10 10); 808 | $table-hover-scale: 2%; 809 | $table-row-hover: color.adjust($table-background, $lightness: -$table-hover-scale); 810 | $table-row-stripe-hover: color.adjust($table-background, $lightness: -($table-color-scale + $table-hover-scale)); 811 | $table-is-striped: true; 812 | $table-striped-background: smart-scale($table-background, $table-color-scale); 813 | $table-stripe: even; 814 | $table-head-background: smart-scale($table-background, $table-color-scale * 0.5); 815 | $table-head-row-hover: color.adjust($table-head-background, $lightness: -$table-hover-scale); 816 | $table-foot-background: smart-scale($table-background, $table-color-scale); 817 | $table-foot-row-hover: color.adjust($table-foot-background, $lightness: -$table-hover-scale); 818 | $table-head-font-color: $body-font-color; 819 | $table-foot-font-color: $body-font-color; 820 | $show-header-for-stacked: false; 821 | $table-stack-breakpoint: medium; 822 | 823 | // 51. Tabs 824 | // -------- 825 | 826 | $tab-margin: 0; 827 | $tab-background: $white; 828 | $tab-color: $primary-color; 829 | $tab-background-active: $light-gray; 830 | $tab-active-color: $primary-color; 831 | $tab-item-font-size: rem-calc(12); 832 | $tab-item-background-hover: $white; 833 | $tab-item-padding: 1.25rem 1.5rem; 834 | $tab-content-background: $white; 835 | $tab-content-border: $light-gray; 836 | $tab-content-color: $body-font-color; 837 | $tab-content-padding: 1rem; 838 | 839 | // 52. Thumbnail 840 | // ------------- 841 | 842 | $thumbnail-border: 4px solid $white; 843 | $thumbnail-margin-bottom: $global-margin; 844 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 845 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 846 | $thumbnail-transition: box-shadow 200ms ease-out; 847 | $thumbnail-radius: $global-radius; 848 | 849 | // 53. Title Bar 850 | // ------------- 851 | 852 | $titlebar-background: $black; 853 | $titlebar-color: $white; 854 | $titlebar-padding: 0.5rem; 855 | $titlebar-text-font-weight: bold; 856 | $titlebar-icon-color: $white; 857 | $titlebar-icon-color-hover: $medium-gray; 858 | $titlebar-icon-spacing: 0.25rem; 859 | 860 | // 54. Tooltip 861 | // ----------- 862 | 863 | $has-tip-cursor: help; 864 | $has-tip-font-weight: $global-weight-bold; 865 | $has-tip-border-bottom: dotted 1px $dark-gray; 866 | $tooltip-background-color: $black; 867 | $tooltip-color: $white; 868 | $tooltip-padding: 0.75rem; 869 | $tooltip-max-width: 10rem; 870 | $tooltip-font-size: $small-font-size; 871 | $tooltip-pip-width: 0.75rem; 872 | $tooltip-pip-height: $tooltip-pip-width * 0.866; 873 | $tooltip-radius: $global-radius; 874 | 875 | // 55. Top Bar 876 | // ----------- 877 | 878 | $topbar-padding: 0.5rem; 879 | $topbar-background: $light-gray; 880 | $topbar-submenu-background: $topbar-background; 881 | $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; 882 | $topbar-input-width: 200px; 883 | $topbar-unstack-breakpoint: medium; 884 | 885 | // 57. Xy Grid 886 | // ----------- 887 | 888 | $xy-grid: true; 889 | $grid-container: $global-width; 890 | $grid-columns: 12; 891 | $grid-margin-gutters: ( 892 | "small": 20px, 893 | "medium": 30px 894 | ); 895 | $grid-padding-gutters: $grid-margin-gutters; 896 | $grid-container-padding: $grid-padding-gutters; 897 | $grid-container-max: $global-width; 898 | $xy-block-grid-max: 8; 899 | 900 | -------------------------------------------------------------------------------- /src/assets/scss/app.scss: -------------------------------------------------------------------------------- 1 | @charset 'utf-8'; 2 | 3 | @import 'settings'; 4 | @import 'foundation'; 5 | @import 'motion-ui'; 6 | 7 | // Global styles 8 | @include foundation-global-styles; 9 | @include foundation-forms; 10 | @include foundation-typography; 11 | 12 | // Grids (choose one) 13 | @include foundation-xy-grid-classes; 14 | // @include foundation-grid; 15 | // @include foundation-flex-grid; 16 | 17 | // Generic components 18 | @include foundation-button; 19 | @include foundation-button-group; 20 | @include foundation-close-button; 21 | @include foundation-label; 22 | @include foundation-progress-bar; 23 | @include foundation-slider; 24 | @include foundation-range-input; 25 | @include foundation-switch; 26 | @include foundation-table; 27 | // Basic components 28 | @include foundation-badge; 29 | @include foundation-breadcrumbs; 30 | @include foundation-callout; 31 | @include foundation-card; 32 | @include foundation-dropdown; 33 | @include foundation-pagination; 34 | @include foundation-tooltip; 35 | 36 | // Containers 37 | @include foundation-accordion; 38 | @include foundation-media-object; 39 | @include foundation-orbit; 40 | @include foundation-responsive-embed; 41 | @include foundation-tabs; 42 | @include foundation-thumbnail; 43 | // Menu-based containers 44 | @include foundation-menu; 45 | @include foundation-menu-icon; 46 | @include foundation-accordion-menu; 47 | @include foundation-drilldown-menu; 48 | @include foundation-dropdown-menu; 49 | 50 | // Layout components 51 | @include foundation-off-canvas; 52 | @include foundation-reveal; 53 | @include foundation-sticky; 54 | @include foundation-title-bar; 55 | @include foundation-top-bar; 56 | 57 | // Helpers 58 | @include foundation-float-classes; 59 | @include foundation-flex-classes; 60 | @include foundation-visibility-classes; 61 | // @include foundation-prototype-classes; 62 | 63 | // Motion UI 64 | @include motion-ui-transitions; 65 | @include motion-ui-animations; 66 | -------------------------------------------------------------------------------- /src/assets/scss/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foundation/foundation-zurb-template/bd20b651cbf729f28c375bfc3c64cef5cfad898b/src/assets/scss/components/.gitkeep -------------------------------------------------------------------------------- /src/assets/scss/global/_typography.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foundation/foundation-zurb-template/bd20b651cbf729f28c375bfc3c64cef5cfad898b/src/assets/scss/global/_typography.scss -------------------------------------------------------------------------------- /src/data/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foundation/foundation-zurb-template/bd20b651cbf729f28c375bfc3c64cef5cfad898b/src/data/.gitkeep -------------------------------------------------------------------------------- /src/layouts/default.html: -------------------------------------------------------------------------------- 1 | {{!-- This is the base layout for your project, and will be used on every page unless specified. --}} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Foundation for Sites 10 | 11 | 12 | 13 | 14 | {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} 15 | {{> body}} 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/pages/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Welcome to Foundation

5 |
6 |
7 | 8 |
9 |
10 |
11 |

We’re stoked you want to try Foundation!

12 |

To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.

13 |

Once you've exhausted the fun in this document, you should check out:

14 |
15 |
16 |

Foundation Documentation
Everything you need to know about using the framework.

17 |
18 |
19 |

Foundation Forum
Join the Foundation community to ask a question or show off your knowlege.

20 |
21 |
22 |
23 |
24 |

Foundation on Github
Latest code, issue reports, feature requests and more.

25 |
26 |
27 |

@FoundationCSS
Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).

28 |
29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 |
Here’s your basic grid:
37 | 38 | 39 |
40 |
41 |
42 |

This is a twelve cell section in a grid-x. Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.

43 |
44 |
45 |
46 |
47 |
48 |
49 |

Six cell

50 |
51 |
52 |
53 |
54 |

Six cell

55 |
56 |
57 |
58 |
59 |
60 |
61 |

Four cell

62 |
63 |
64 |
65 |
66 |

Four cell

67 |
68 |
69 |
70 |
71 |

Four cell

72 |
73 |
74 |
75 | 76 |
77 | 78 |
We bet you’ll need a form somewhere:
79 |
80 |
81 |
82 | 83 | 84 |
85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 | 93 | 94 |
95 |
96 |
97 | 98 |
99 | 100 | .com 101 |
102 |
103 |
104 |
105 |
106 |
107 | 108 | 114 |
115 |
116 |
117 |
118 | 119 | 120 | 121 |
122 |
123 | 124 | 125 | 126 |
127 |
128 |
129 |
130 | 131 | 132 |
133 |
134 |
135 |
136 | 137 |
138 |
Try one of these buttons:
139 |

Simple Button
140 | Success Btn
141 | Alert Btn
142 | Secondary Btn

143 |
144 |
So many components, girl!
145 |

A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.

146 | Go to Foundation Docs 147 |
148 |
149 |
150 |
151 | -------------------------------------------------------------------------------- /src/partials/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foundation/foundation-zurb-template/bd20b651cbf729f28c375bfc3c64cef5cfad898b/src/partials/.gitkeep -------------------------------------------------------------------------------- /src/styleguide/index.md: -------------------------------------------------------------------------------- 1 | # The Grid 2 | 3 |

Problem: You've got tons of content, each needing different sized cells, and don't know how to quick and easily get it all done. Solution: The awesome XY grid!

4 | 5 | --- 6 | 7 | ## Overview 8 | 9 | The grid is built around two key elements: grid-x and cells. grid-container create a max-width and contain the grid, and cells create the final structure. Everything on your page that you don't give a specific structural style to should be within a grid-x or cell. 10 | 11 | --- 12 | 13 | ## Nesting 14 | 15 | In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells. 16 | 17 | --- 18 | 19 | ## How to Use 20 | 21 | Using this framework is easy. Here's how your code will look when you use a series of `
` tags to create cells. 22 | 23 | ```html 24 |
25 |
...
26 |
...
27 |
28 | ``` 29 | 30 |
31 |
4
32 |
4
33 |
4
34 |
35 |
36 |
3
37 |
6
38 |
3
39 |
40 |
41 |
2
42 |
8
43 |
2
44 |
45 |
46 |
3
47 |
9
48 |
49 |
50 |
4
51 |
8
52 |
53 |
54 |
5
55 |
7
56 |
57 |
58 |
6
59 |
6
60 |
61 | 62 | --- 63 | 64 | ## Nesting grid-x 65 | 66 | In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells. 67 | 68 | ```html 69 |
70 |
8 71 |
72 |
8 Nested 73 |
74 |
8 Nested Again
75 |
4
76 |
77 |
78 |
4
79 |
80 |
81 |
4
82 |
83 | ``` 84 | 85 |
86 |
8 87 |
88 |
8 Nested 89 |
90 |
8 Nested Again
91 |
4
92 |
93 |
94 |
4
95 |
96 |
97 |
4
98 |
99 | 100 | --- 101 | 102 | ## Small Grid 103 | 104 | As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes. 105 | 106 | ```html 107 |
108 |
2
109 |
10, last
110 |
111 |
112 |
3
113 |
9, last
114 |
115 | ``` 116 | 117 |
118 |
2
119 |
10, last
120 |
121 |
122 |
3
123 |
9, last
124 |
125 | 126 | 127 | 128 | # Colors 129 | 130 |

Below you can find the different values we created that support the primary color variable you can change at any time in \_settings.scss

131 | 132 | --- 133 | 134 |
135 |
136 |
137 | 138 | #2199e8 139 |
140 |
141 |
142 |
143 | 144 | #3adb76 145 |
146 |
147 |
148 |
149 | 150 | #ffae00 151 |
152 |
153 |
154 |
155 | 156 | #ec5840 157 |
158 |
159 |
160 |
161 | 162 | #0a0a0a 163 |
164 |
165 |
166 | 167 | 168 | 169 | # Typography 170 | 171 |

This design uses Helvetica Neue for headings and paragraph text.

172 | 173 | --- 174 | 175 | ## Headings 176 | 177 | Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest) 178 | 179 | --- 180 | 181 | ## Paragraphs 182 | 183 | Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such. 184 | 185 | --- 186 | 187 |

Heading Level 1

188 | 189 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. 190 | 191 |

Heading Level 2

192 | 193 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. 194 | 195 |

Heading Level 3

196 | 197 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. 198 | 199 |

Heading Level 4

200 | 201 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. 202 | 203 |
Heading Level 5
204 | 205 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. 206 | 207 |
Heading Level 6
208 | 209 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. 210 | 211 | 212 | 213 | # Buttons 214 | 215 |

Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.

216 | 217 | --- 218 | 219 | ## Primary Buttons 220 | 221 | These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the `.tiny`, `.small`, and `.large` classes. 222 | 223 | ```html_example 224 | Large button 225 | Regular button 226 | Small button 227 | Tiny button 228 | ``` 229 | 230 | --- 231 | 232 | ## Secondary Buttons 233 | 234 | These buttons are used for less important, secondary actions on a page. 235 | 236 | ```html_example 237 | Large button 238 | Regular button 239 | Small button 240 | Tiny button 241 | ``` 242 | 243 | 244 | 245 | # Forms 246 | 247 |

Use forms to allow users to interact with the site and provide information to the company.

248 | 249 | --- 250 | 251 | ## Elements of a Form 252 | 253 | A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order): 254 | 255 | - Form 256 | - Label 257 | - Input 258 | - Select 259 | - Text area 260 | - Button 261 | 262 | --- 263 | 264 | ## How to Use 265 | 266 | Make forms great and easy to use with the following rules: 267 | 268 | - Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements. 269 | - Series of checkboxes and radio buttons below within a `