├── .nvmrc ├── src ├── assets │ ├── fonts │ │ └── .keep │ ├── icons │ │ └── .keep │ ├── img │ │ └── .keep │ ├── js │ │ ├── utils │ │ │ └── .kepp │ │ ├── components │ │ │ └── .keep │ │ └── app.js │ └── scss │ │ ├── pages │ │ └── .keep │ │ ├── base │ │ ├── _b_font_face.scss │ │ ├── _b_reset.scss │ │ └── _b_normalize.scss │ │ ├── utils │ │ ├── _u_width.scss │ │ ├── _u_show_hide.scss │ │ ├── _u_layout.scss │ │ ├── _u_spacing.scss │ │ ├── _u_text.scss │ │ └── _u_text_color.scss │ │ ├── molecules │ │ ├── _m_form_inline.scss │ │ ├── _m_form.scss │ │ └── _m_content.scss │ │ ├── atoms │ │ ├── _a_input_textarea.scss │ │ ├── _a_input_text.scss │ │ ├── _a_label.scss │ │ ├── _a_input_radio.scss │ │ ├── _a_input_select.scss │ │ ├── _a_input_checkbox.scss │ │ └── _a_button.scss │ │ ├── layout │ │ ├── _l_app.scss │ │ ├── _l_wrapper.scss │ │ └── _l_grid.scss │ │ ├── tools │ │ ├── _function.scss │ │ └── _mixin.scss │ │ ├── app.scss │ │ ├── _settings.scss │ │ └── styleguide.scss ├── template │ ├── partials │ │ ├── footer.pug │ │ ├── header.pug │ │ └── head.pug │ ├── config.pug │ ├── mixins │ │ └── mixins.pug │ ├── pages │ │ ├── index.pug │ │ ├── home.pug │ │ └── styleguide │ │ │ ├── atoms │ │ │ ├── a-label.pug │ │ │ ├── a-input-textarea.pug │ │ │ ├── a-input-select.pug │ │ │ ├── a-input-text.pug │ │ │ ├── a-input-radio.pug │ │ │ ├── a-input-checkbox.pug │ │ │ └── a-button.pug │ │ │ ├── utils │ │ │ ├── u-show-hide.pug │ │ │ ├── u-width.pug │ │ │ ├── u-layout.pug │ │ │ ├── u-text.pug │ │ │ ├── u-text-color.pug │ │ │ └── u-spacing.pug │ │ │ ├── index.pug │ │ │ ├── molecules │ │ │ ├── m-form-inline.pug │ │ │ ├── m-form.pug │ │ │ └── m-content.pug │ │ │ └── layout │ │ │ ├── l-wrapper.pug │ │ │ └── l-grid.pug │ └── layout │ │ ├── summary.pug │ │ ├── base.pug │ │ └── styleguide.pug └── rootfiles │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── robots.txt │ └── .htaccess ├── .babelrc ├── .browserslistrc ├── gulpfile.js ├── .prettierrc ├── gulp ├── tasks │ ├── clean.js │ ├── fonts.js │ ├── rootfiles.js │ ├── build.js │ ├── default.js │ ├── browserSync.js │ ├── utils.js │ ├── watch.js │ ├── svg.js │ ├── rev.js │ ├── images.js │ ├── styles.js │ ├── icons.js │ ├── templates.js │ └── scripts.js └── config.js ├── webpack ├── webpack.config.dev.js ├── webpack.config.prod.js └── webpack.config.base.js ├── .gitignore ├── package.json └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | v8.12.0 2 | -------------------------------------------------------------------------------- /src/assets/fonts/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/js/utils/.kepp: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/scss/pages/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/js/components/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/scss/base/_b_font_face.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/js/app.js: -------------------------------------------------------------------------------- 1 | import "what-input"; 2 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 2 version 2 | > 1% 3 | IE 10 4 | -------------------------------------------------------------------------------- /src/template/partials/footer.pug: -------------------------------------------------------------------------------- 1 | footer.footer 2 | .l-wrapper 3 | div Footer here 4 | -------------------------------------------------------------------------------- /src/rootfiles/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutter/helloFront/HEAD/src/rootfiles/favicon.ico -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var requireDir = require("require-dir"); 2 | 3 | requireDir("./gulp/tasks", { recurse: true }); 4 | -------------------------------------------------------------------------------- /src/rootfiles/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutter/helloFront/HEAD/src/rootfiles/favicon-16x16.png -------------------------------------------------------------------------------- /src/rootfiles/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutter/helloFront/HEAD/src/rootfiles/favicon-32x32.png -------------------------------------------------------------------------------- /src/rootfiles/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "useTabs": false, 4 | "printWidth": 80, 5 | "tabWidth": 2, 6 | "singleQuote": false 7 | } 8 | -------------------------------------------------------------------------------- /gulp/tasks/clean.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const del = require("del"); 3 | const config = require("../config"); 4 | 5 | gulp.task("clean", del.bind(null, [config.dist])); 6 | -------------------------------------------------------------------------------- /gulp/tasks/fonts.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config").fonts; 3 | 4 | gulp.task("fonts", () => { 5 | return gulp.src(config.src).pipe(gulp.dest(config.dist)); 6 | }); 7 | -------------------------------------------------------------------------------- /webpack/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const webpackMerge = require("webpack-merge"); 2 | const webpackConfigBase = require("./webpack.config.base.js"); 3 | 4 | module.exports = webpackMerge(webpackConfigBase, { 5 | devtool: "cheap-module-eval-source-map", 6 | }); 7 | -------------------------------------------------------------------------------- /gulp/tasks/rootfiles.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config").rootfiles; 3 | 4 | gulp.task("rootfiles", () => { 5 | return gulp 6 | .src(config.src, { 7 | dot: true, 8 | }) 9 | .pipe(gulp.dest(config.dist)); 10 | }); 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Mac OSX 2 | .DS_Store 3 | 4 | # IDE 5 | .idea 6 | *.iml 7 | *.sublime-project 8 | *.sublime-workspace 9 | 10 | # Npm & yarn 11 | /npm-debug.log 12 | node_modules 13 | yarn-error.log 14 | 15 | # Generated folder 16 | dist 17 | 18 | # Generated SVG sprite 19 | src/assets/icons/symbol 20 | -------------------------------------------------------------------------------- /gulp/tasks/build.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const runSequence = require("run-sequence"); 3 | 4 | gulp.task("build", callback => { 5 | runSequence( 6 | "clean", 7 | "svg", 8 | "icons", 9 | ["styles", "templates", "images", "rootfiles", "fonts", "scripts"], 10 | callback 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /src/assets/scss/utils/_u_width.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Utils / Width 3 | * ======================================= */ 4 | 5 | @each $width in $width-list { 6 | $prefix: nth($width, 1); 7 | $size: nth($width, 2); 8 | 9 | .u-w#{$prefix} { 10 | width: #{$size} !important; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /gulp/tasks/default.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config"); 3 | const browserSync = require("browser-sync"); 4 | const runSequence = require("run-sequence"); 5 | 6 | gulp.task("default", callback => { 7 | process.WATCH_SCRIPTS = true; 8 | runSequence("build", "browserSync", "watch", callback); 9 | }); 10 | -------------------------------------------------------------------------------- /webpack/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const webpackMerge = require("webpack-merge"); 2 | const webpackConfigBase = require("./webpack.config.base.js"); 3 | const uglifyJSPlugin = require("uglifyjs-webpack-plugin"); 4 | 5 | module.exports = webpackMerge(webpackConfigBase, { 6 | devtool: "source-map", 7 | plugins: [new uglifyJSPlugin({ sourceMap: true })], 8 | }); 9 | -------------------------------------------------------------------------------- /src/template/partials/header.pug: -------------------------------------------------------------------------------- 1 | header.header 2 | 3 | .l-wrapper 4 | 5 | h1.header-logo 6 | a.header-logo-link(href="./") App name 7 | 8 | nav.menu 9 | +menu([ 10 | { 'title':'Author', 'link': 'https://sutterlity.fr/' }, 11 | { 'title':'Repo Github', 'link': 'https://github.com/sutter/helloFront' } 12 | ]) 13 | -------------------------------------------------------------------------------- /gulp/tasks/browserSync.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config").browserSync; 3 | const browserSync = require("browser-sync"); 4 | const reload = browserSync.reload; 5 | 6 | gulp.task("browserSync", () => { 7 | browserSync(config); 8 | }); 9 | 10 | gulp.task("browserSync-reload", () => { 11 | browserSync.reload(); 12 | }); 13 | -------------------------------------------------------------------------------- /src/assets/scss/molecules/_m_form_inline.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Molecule : Form Inline 3 | * ======================================= */ 4 | 5 | .m-form-inline { 6 | display: flex; 7 | align-items: flex-start; 8 | .a-label { 9 | @include visually-hidden; 10 | } 11 | 12 | > *:not(:first-child) { 13 | margin-left: 1rem; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/template/config.pug: -------------------------------------------------------------------------------- 1 | //- Site informations 2 | - var lang = 'fr' 3 | - var path = './' 4 | 5 | - var pathStyleguide = "/styleguide/" 6 | 7 | //- Page informations 8 | - var title = title || 'Hello Front - framework SCSS' 9 | - var metaDesc = metaDesc || 'Hello Front est un framework SCSS simple compatible à partir de IE10.' 10 | 11 | //- Templates classes 12 | - var template = template || "t-base" 13 | -------------------------------------------------------------------------------- /src/template/mixins/mixins.pug: -------------------------------------------------------------------------------- 1 | mixin icon(iconHref, iconClass ) 2 | svg(class= iconClass) 3 | use(xlink:href="#spriteIcon-"+iconHref) 4 | 5 | mixin menu(menu_items) 6 | ul.menu-inner 7 | each top_item in menu_items 8 | li.menu-item(class= navLinkActive) 9 | a(href= top_item.link, class= navLinkActive == top_item.title ? 'm-menu-link is-active' : 'm-menu-link')= top_item.title 10 | -------------------------------------------------------------------------------- /src/template/pages/index.pug: -------------------------------------------------------------------------------- 1 | extends ../layout/summary 2 | 3 | append config 4 | - var title = "Sommaire" 5 | - var metaDesc = "My page description" 6 | 7 | block content 8 | .hf-wrapper 9 | .hf-content 10 | h2 Pages 11 | ul 12 | li 13 | a(href="./home.html") Accueil 14 | h2 Documentation 15 | ul 16 | li 17 | a(href="./styleguide") Styleguide 18 | 19 | -------------------------------------------------------------------------------- /src/assets/scss/atoms/_a_input_textarea.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Atom : Input Textarea 3 | * ======================================= */ 4 | 5 | .a-input-textarea { 6 | @include inputBase; 7 | min-height: $form-group-input-height * 2; 8 | padding: 0.9rem 2rem; 9 | line-height: 1.25; 10 | @include inputBaseState; 11 | } 12 | 13 | .a-input-textarea--error { 14 | border-color: $clr-error; 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/atoms/_a_input_text.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Atom : Input Text 3 | * ======================================= */ 4 | 5 | .a-input-text { 6 | @include inputBase; 7 | height: $form-group-input-height; 8 | line-height: 1; 9 | padding: 0 2rem; 10 | border: 1px solid $clr-divider; 11 | @include inputBaseState; 12 | } 13 | 14 | .a-input-text--error { 15 | border-color: $clr-error; 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/scss/utils/_u_show_hide.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Utils : Show / Hide 3 | * ======================================= */ 4 | 5 | .u-hide-mobile { 6 | display: none !important; 7 | 8 | @media #{$mobileUp} { 9 | display: block !important; 10 | } 11 | } 12 | 13 | .u-show-mobile { 14 | @media #{$mobileUp} { 15 | display: none !important; 16 | } 17 | } 18 | 19 | .u-visually-hidden { 20 | @include visually-hidden; 21 | } 22 | -------------------------------------------------------------------------------- /src/assets/scss/layout/_l_app.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Layout : app 3 | * ======================================= */ 4 | 5 | .l-app { 6 | display: flex; 7 | flex-direction: column; 8 | width: 100%; 9 | min-height: 100vh; 10 | overflow-y: scroll; 11 | overflow-x: hidden; 12 | -webkit-overflow-scrolling: touch; 13 | } 14 | 15 | .l-app__head, 16 | .l-app__footer { 17 | flex-shrink: 0; 18 | } 19 | 20 | .l-app__body { 21 | flex: 1 1 auto; 22 | } 23 | -------------------------------------------------------------------------------- /src/template/partials/head.pug: -------------------------------------------------------------------------------- 1 | meta(charset='UTF-8') 2 | title= title 3 | meta(name='description', content= metaDesc ) 4 | meta(name='viewport', content='width=device-width, initial-scale=1.0, shrink-to-fit=no') 5 | link(rel="icon", type="image/png", href= path + "favicon-32x32.png",sizes="32x32") 6 | link(rel="icon", type="image/png", href= path + "favicon-16x16.png",sizes="16x16") 7 | link(href='favicon.ico', rel='shortcut icon', type='image/x-icon') 8 | link(rel='stylesheet', href= path + 'assets/app.css') 9 | -------------------------------------------------------------------------------- /src/template/layout/summary.pug: -------------------------------------------------------------------------------- 1 | include ../config 2 | block config 3 | include ../mixins/mixins 4 | 5 | doctype 6 | html(lang= lang) 7 | head 8 | include ../partials/head 9 | link(rel='stylesheet', href= path + 'assets/styleguide.css') 10 | 11 | body(class= template) 12 | 13 | header.hf-head(role="banner") 14 | .hf-wrapper 15 | h1.hf-summaryHeader-title Sommaire 16 | main(role="main") 17 | section 18 | block content 19 | 20 | script(src= path + "assets/app.js", async) 21 | 22 | -------------------------------------------------------------------------------- /src/assets/scss/atoms/_a_label.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Atom : Label 3 | * ======================================= */ 4 | 5 | .a-label { 6 | display: block; 7 | font-weight: $font-weight-bold; 8 | color: $clr-0; 9 | 10 | &:not(:last-child) { 11 | margin-bottom: 1rem; 12 | } 13 | 14 | &.label { 15 | cursor: pointer; 16 | } 17 | 18 | &[required] { 19 | &::after { 20 | content: " *"; 21 | } 22 | } 23 | } 24 | 25 | .a-label--error { 26 | color: $clr-error; 27 | } 28 | -------------------------------------------------------------------------------- /webpack/webpack.config.base.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | watch: false, 5 | entry: { 6 | app: "./src/assets/js/app.js", 7 | }, 8 | output: { 9 | path: path.resolve(__dirname, "../dist/assets/js"), 10 | filename: "[name].js", 11 | }, 12 | externals: { 13 | jquery: "jQuery", 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.js?$/, 19 | exclude: /(node_modules|bower_components)/, 20 | use: { 21 | loader: "babel-loader", 22 | }, 23 | }, 24 | ], 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /src/assets/scss/utils/_u_layout.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Utils : Layout 3 | * ======================================= */ 4 | 5 | .u-no-bfc { 6 | overflow: hidden !important; 7 | } 8 | 9 | .u-float-left { 10 | float: left !important; 11 | } 12 | 13 | .u-float-right { 14 | float: right !important; 15 | } 16 | 17 | .u-flex-push-left { 18 | margin-left: auto !important; 19 | } 20 | 21 | .u-flex-inline-grid.u-flex-inline-grid { 22 | display: flex; 23 | align-items: center; 24 | flex-wrap: wrap; 25 | margin: -0.5rem; 26 | > * { 27 | margin: 0.5rem; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/template/layout/base.pug: -------------------------------------------------------------------------------- 1 | include ../config 2 | block config 3 | include ../mixins/mixins 4 | 5 | doctype 6 | html(lang= lang) 7 | head 8 | include ../partials/head 9 | 10 | body(class= template) 11 | //- Uncomment for active SVG Sprite 12 | .u-visuallyHidden 13 | include ../../assets/icons/symbol/icons.svg 14 | .l-app 15 | .l-app__head 16 | include ../partials/header 17 | main.l-app__body 18 | section 19 | block content 20 | .l-app__footer 21 | include ../partials/footer 22 | 23 | script(src= path + "assets/app.js", async) 24 | -------------------------------------------------------------------------------- /src/assets/scss/atoms/_a_input_radio.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Atom : inputRadio 3 | * ======================================= */ 4 | 5 | .a-input-radio { 6 | @include inputRadioCheckboxBase; 7 | 8 | [type="radio"] + label::before { 9 | border-radius: 50%; 10 | } 11 | 12 | [type="radio"]:checked + label::before { 13 | box-shadow: inset 0 0 0 $radioCheckboxSize/2 - 0.35rem $clr-1; 14 | } 15 | 16 | &:not(:first-child) { 17 | margin-top: 1rem; 18 | } 19 | } 20 | 21 | .a-input-radio--error { 22 | label::before { 23 | box-shadow: inset 0 0 0 1px $clr-error; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/scss/molecules/_m_form.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Molecule : Form 3 | * ======================================= */ 4 | 5 | .m-form { 6 | &:not(:first-child) { 7 | margin-top: $spacer-M; 8 | } 9 | } 10 | 11 | .m-form__group { 12 | &:not(:first-child) { 13 | margin-top: $spacer-M; 14 | } 15 | } 16 | 17 | .m-form__group__legend { 18 | font-size: 80%; 19 | color: tint($clr-0, 40%); 20 | line-height: 1.25; 21 | &:not(:first-child) { 22 | margin-top: 1rem; 23 | } 24 | } 25 | 26 | .m-form__footer { 27 | &:not(:first-child) { 28 | margin-top: $spacer-M; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /gulp/tasks/utils.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | 3 | module.exports.createEmptyFile = path => { 4 | fs.writeFile(path, "", error => { 5 | if (error) { 6 | return console.error(error); 7 | } 8 | }); 9 | }; 10 | 11 | /** 12 | * Check if a directory contains a specified file extension 13 | * @param {string} path A string of the path 14 | * @param {string} ext A string of the extension, ex. '.svg' 15 | * @return {boolean} 16 | */ 17 | module.exports.checkDirectoryForExt = (path, ext) => { 18 | files = fs.readdirSync(path); 19 | return files.some(file => { 20 | return file.substr(-ext.length) === ext; 21 | }); 22 | }; 23 | -------------------------------------------------------------------------------- /src/assets/scss/layout/_l_wrapper.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Layout : Wrapper 3 | * ======================================= */ 4 | 5 | .l-wrapper { 6 | padding-right: $gutter-width; 7 | padding-left: $gutter-width; 8 | } 9 | 10 | /** 11 | * Modifier : Size 12 | * --------------------------------------- */ 13 | 14 | .l-wrapper--medium { 15 | @media #{$mobileUp} { 16 | max-width: $wrap-M-max-width; 17 | margin-right: auto; 18 | margin-left: auto; 19 | } 20 | } 21 | 22 | .l-wrapper--small { 23 | @media #{$mobileUp} { 24 | max-width: $wrap-S-max-width; 25 | margin-right: auto; 26 | margin-left: auto; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /gulp/tasks/watch.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config"); 3 | const browserSync = require("browser-sync"); 4 | const watch = require("gulp-watch"); 5 | const runSequence = require("run-sequence"); 6 | 7 | gulp.task("watch", () => { 8 | watch(config.styles.files_src, "./src/assets", function() { 9 | runSequence("styles"); 10 | }); 11 | 12 | watch(config.images.files_src, () => { 13 | runSequence("images", browserSync.reload); 14 | }); 15 | 16 | watch(config.icons.src_files, () => { 17 | runSequence("icons", "templates", browserSync.reload); 18 | }); 19 | 20 | watch(config.templates.files_src, () => { 21 | runSequence("templates", browserSync.reload); 22 | }); 23 | 24 | watch(config.fonts.src, () => { 25 | runSequence("fonts", browserSync.reload); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /src/template/pages/home.pug: -------------------------------------------------------------------------------- 1 | extends ../layout/base 2 | 3 | block content 4 | .l-wrapper 5 | p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui nesciunt nisi est fugit voluptatum aspernatur magni. Voluptatibus non nemo quibusdam recusandae culpa voluptates hic, laudantium velit, labore, rerum commodi! Aliquam. 6 | p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui nesciunt nisi est fugit voluptatum aspernatur magni. Voluptatibus non nemo quibusdam recusandae culpa voluptates hic, laudantium velit, labore, rerum commodi! Aliquam. 7 | p 8 | a(href='#') Lorem ipsum dolor sit amet consectetur, 9 | | 10 | | adipisicing elit. Qui nesciunt nisi est fugit voluptatum aspernatur magni. Voluptatibus non nemo quibusdam recusandae culpa voluptates hic, laudantium velit, labore, rerum commodi! Aliquam. 11 | 12 | -------------------------------------------------------------------------------- /gulp/tasks/svg.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config").svg; 3 | const imagemin = require("gulp-imagemin"); 4 | const size = require("gulp-size"); 5 | const plumber = require("gulp-plumber"); 6 | const notify = require("gulp-notify"); 7 | 8 | gulp.task("svg", () => { 9 | return gulp 10 | .src(config.files_src) 11 | .pipe( 12 | plumber({ 13 | errorHandler: notify.onError("SVG Error: <%= error.message %>"), 14 | }) 15 | ) 16 | .pipe( 17 | imagemin( 18 | [ 19 | imagemin.svgo({ 20 | plugins: [{ removeViewBox: false }, { removeDimensions: false }], 21 | }), 22 | ], 23 | { 24 | verbose: true, 25 | } 26 | ) 27 | ) 28 | .pipe( 29 | size({ 30 | title: "svg", 31 | }) 32 | ) 33 | .pipe(gulp.dest(config.dist)); 34 | }); 35 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/atoms/a-label.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Labels" 6 | - var metaDesc = "Labels - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Labels 13 | .hf-wrapper 14 | .hf-content 15 | h2#styles Styles 16 | h3 Label de base 17 | :code 18 | 19 | 20 | .hf-content 21 | h3 Faux label 22 | :code 23 |
Label
24 |
Label
25 | .hf-content 26 | h2#styles États 27 | h3 État : error 28 | :code 29 | 30 | 31 | -------------------------------------------------------------------------------- /gulp/tasks/rev.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config"); 3 | const rev = require("gulp-rev"); 4 | const revdel = require("gulp-rev-delete-original"); 5 | const revReplace = require("gulp-rev-replace"); 6 | 7 | gulp.task("rev", () => { 8 | console.log([config.assets_dist + "/**.css", config.assets_dist + "/**.js"]); 9 | return gulp 10 | .src([config.assets_dist + "/**.css", config.assets_dist + "/**.js"], { 11 | dot: true, 12 | }) 13 | .pipe(rev()) 14 | .pipe(revdel()) 15 | .pipe(gulp.dest(config.assets_dist)) 16 | .pipe(rev.manifest()) 17 | .pipe(gulp.dest(config.assets_dist)); 18 | }); 19 | 20 | gulp.task("revreplace", () => { 21 | const manifest = gulp.src(config.assets_dist + "/rev-manifest.json"); 22 | return gulp 23 | .src(config.dist + "/**/*.html") 24 | .pipe(revReplace({ manifest: manifest })) 25 | .pipe(gulp.dest(config.dist)); 26 | }); 27 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/utils/u-show-hide.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Utils Show - hide" 6 | - var metaDesc = "Utils Show - hide - CSS" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Show - hide 13 | .hf-content.hf-wrapper 14 | h2 Show - hide 15 | p Les utilitaires Show-Hide permettent cacher ou afficher les élements. 16 | table 17 | thead 18 | tr 19 | th Class 20 | th Usage 21 | tbody 22 | tr 23 | td 24 | code .u-visually-hidden 25 | td Cache visuelement les élements, sauf pour les lecteurs d'écrans 26 | tr 27 | td 28 | code .u-hide-mobile 29 | td Cache les éléments sur les écrans de moins de 480px 30 | tr 31 | td 32 | code .u-show-mobile 33 | td Affiche les éléments seulement sur les écrans de plus de 480px 34 | -------------------------------------------------------------------------------- /gulp/tasks/images.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config").images; 3 | const imagemin = require("gulp-imagemin"); 4 | const size = require("gulp-size"); 5 | const plumber = require("gulp-plumber"); 6 | const notify = require("gulp-notify"); 7 | 8 | gulp.task("images", () => { 9 | return gulp 10 | .src(config.files_src) 11 | .pipe( 12 | plumber({ 13 | errorHandler: notify.onError("Images Error: <%= error.message %>"), 14 | }) 15 | ) 16 | .pipe( 17 | imagemin( 18 | [ 19 | imagemin.gifsicle({ interlaced: true }), 20 | imagemin.jpegtran({ progressive: true }), 21 | imagemin.optipng({ optimizationLevel: 5 }), 22 | imagemin.svgo({ 23 | plugins: [{ removeViewBox: false }, { removeDimensions: false }], 24 | }), 25 | ], 26 | { 27 | verbose: true, 28 | } 29 | ) 30 | ) 31 | .pipe( 32 | size({ 33 | title: "image", 34 | }) 35 | ) 36 | .pipe(gulp.dest(config.dist)); 37 | }); 38 | -------------------------------------------------------------------------------- /src/assets/scss/utils/_u_spacing.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Utils : Spacing 3 | * ======================================= */ 4 | 5 | $spacers: (n 0) (s $spacer-S) (m $spacer-M) (l $spacer-L); 6 | 7 | @each $spacer in $spacers { 8 | $type: nth($spacer, 1); 9 | $size: nth($spacer, 2); 10 | 11 | .u-mt#{$type}, 12 | .u-ma#{$type} { 13 | margin-top: $size !important; 14 | } 15 | 16 | .u-mb#{$type}, 17 | .u-ma#{$type} { 18 | margin-bottom: $size !important; 19 | } 20 | 21 | .u-ml#{$type}, 22 | .u-ma#{$type} { 23 | margin-left: $size !important; 24 | } 25 | 26 | .u-mr#{$type}, 27 | .u-ma#{$type} { 28 | margin-right: $size !important; 29 | } 30 | 31 | .u-pt#{$type}, 32 | .u-pa#{$type} { 33 | padding-top: $size !important; 34 | } 35 | 36 | .u-pb#{$type}, 37 | .u-pa#{$type} { 38 | padding-bottom: $size !important; 39 | } 40 | 41 | .u-pl#{$type}, 42 | .u-pa#{$type} { 43 | padding-left: $size !important; 44 | } 45 | 46 | .u-pr#{$type}, 47 | .u-pa#{$type} { 48 | padding-right: $size !important; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/index.pug: -------------------------------------------------------------------------------- 1 | extends ../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Styleguide" 6 | - var metaDesc = "Styleguide - CSS / HTML / JS" 7 | - var path = './../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Framework CSS 13 | .hf-wrapper 14 | .hf-content 15 | h2 Syntaxe SCSS 16 | ul 17 | li Indentation : 2 espaces 18 | li 80 caractères maximum par lignes 19 | li 1 déclaration par ligne 20 | h2 Convention de nommage CSS 21 | p Utilisation de la méthodologie BEM. 22 | :code(lang="css") 23 | /* Composant */ 24 | .my-component { … } 25 | 26 | /* Composant enfant */ 27 | .my-component__element { … } 28 | .my-component__element__child { … } 29 | 30 | /* Modificateur de composant */ 31 | .my-component--modifier { … } 32 | 33 | /* État du composant */ 34 | .my-component--state { … } 35 | 36 | /* Ciblage réservée au javascript */ 37 | .js-my-script { … } 38 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/atoms/a-input-textarea.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Inputs textarea" 6 | - var metaDesc = "Inputs Textarea - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Input textarea 13 | nav 14 | a(href="#types") Types 15 | a(href="#states") États 16 | .hf-wrapper 17 | .hf-content 18 | h2#types Types 19 | h3 Input textarea 20 | :code 21 | 22 | .hf-content 23 | h2#states États 24 | h3 État : disabled 25 | :code 26 | 27 | .hf-content 28 | h3 État : readOnly 29 | :code 30 | 31 | .hf-content 32 | h3 État : error 33 | :code 34 | 35 | -------------------------------------------------------------------------------- /src/assets/scss/layout/_l_grid.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Layout : Grid 3 | * ======================================= */ 4 | 5 | .l-grid { 6 | display: flex; 7 | flex-wrap: wrap; 8 | + .l-grid { 9 | margin-top: $gutter-width; 10 | @media #{$mobileUp} { 11 | margin-top: $gutter-width/2; 12 | } 13 | } 14 | @media #{$mobileUp} { 15 | margin: -$gutter-width/2; 16 | } 17 | } 18 | 19 | .l-grid__item { 20 | @media #{$mobile} { 21 | width: 100%; 22 | &:not(:first-child) { 23 | margin-top: $gutter-width; 24 | } 25 | } 26 | @media #{$mobileUp} { 27 | margin: $gutter-width/2; 28 | width: calc(100% - #{$gutter-width}); 29 | } 30 | } 31 | 32 | /** 33 | * Modifier : column 34 | * --------------------------------------- */ 35 | 36 | @media #{$mobileUp} and #{$tabletUp} { 37 | @include gridItem(s); 38 | } 39 | 40 | @media #{$mobileUp} { 41 | @include gridItem(s-up); 42 | } 43 | 44 | @media #{$tabletUp} and #{$desktop} { 45 | @include gridItem(m); 46 | } 47 | 48 | @media #{$tabletUp} { 49 | @include gridItem(m-up); 50 | } 51 | 52 | @media #{$desktopUp} { 53 | @include gridItem(l-up); 54 | } 55 | -------------------------------------------------------------------------------- /gulp/tasks/styles.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config"); 3 | const fs = require("fs"); 4 | const sass = require("gulp-sass"); 5 | const plumber = require("gulp-plumber"); 6 | const autoprefixer = require("gulp-autoprefixer"); 7 | const notify = require("gulp-notify"); 8 | const sourcemaps = require("gulp-sourcemaps"); 9 | const gutil = require("gulp-util"); 10 | const size = require("gulp-size"); 11 | const cssnano = require("gulp-cssnano"); 12 | const options = require("minimist")(process.argv.slice(2)); 13 | 14 | gulp.task("styles", () => { 15 | return gulp 16 | .src(config.styles.files_src) 17 | .pipe( 18 | plumber({ 19 | errorHandler: notify.onError("SASS Error: <%= error.message %>"), 20 | }) 21 | ) 22 | .pipe(!options.production ? sourcemaps.init() : gutil.noop()) 23 | .pipe(sass({ precision: 10 })) 24 | .pipe( 25 | autoprefixer({ 26 | cascade: false, 27 | }) 28 | ) 29 | .pipe(!options.production ? sourcemaps.write(".") : gutil.noop()) 30 | .pipe(options.production ? cssnano() : gutil.noop()) 31 | .pipe(size({ title: "style" })) 32 | .pipe(gulp.dest(config.styles.dist)); 33 | }); 34 | -------------------------------------------------------------------------------- /gulp/tasks/icons.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config").icons; 3 | const utils = require("./utils"); 4 | const imagemin = require("gulp-imagemin"); 5 | const svgSprite = require("gulp-svg-sprite"); 6 | const rename = require("gulp-rename"); 7 | 8 | gulp.task("icons", () => { 9 | if (utils.checkDirectoryForExt(config.dir, ".svg")) { 10 | return gulp 11 | .src(config.src_files) 12 | .pipe(rename({ prefix: "spriteIcon-" })) 13 | .pipe( 14 | imagemin( 15 | [ 16 | imagemin.svgo({ 17 | plugins: [{ removeViewBox: false }, { removeDimensions: false }], 18 | }), 19 | ], 20 | { 21 | verbose: true, 22 | } 23 | ) 24 | ) 25 | .pipe( 26 | svgSprite({ 27 | mode: { 28 | symbol: { 29 | dest: config.dest, 30 | sprite: "icons.svg", 31 | inline: true, 32 | }, 33 | }, 34 | }) 35 | ) 36 | .pipe(gulp.dest(config.dir)); 37 | } else 38 | console.info( 39 | "Icon source folder is empty, skipping svg sprite icon creation" 40 | ); 41 | }); 42 | -------------------------------------------------------------------------------- /src/assets/scss/atoms/_a_input_select.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Atom : inputSelect 3 | * ======================================= */ 4 | 5 | .a-input-select { 6 | @include inputBase; 7 | min-width: 6rem; 8 | height: 4rem; 9 | padding-top: 0; 10 | padding-right: 3rem; 11 | padding-left: 2rem; 12 | padding-bottom: 0; 13 | line-height: $form-group-input-height; 14 | background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+ZG93bjwvdGl0bGU+PHBhdGggZD0iTTUuMzk3IDkuMTRsMy45NyAzLjZjLjM4NC4zNDguOTMuMzQ3IDEuMzE0LS4wMDVsMy45MjctMy42Yy40NTMtLjQxNS41MjUtMS4xNy4xNi0xLjY4Ny0uMzY0LS41MTYtMS4wMjYtLjU5OC0xLjQ4LS4xODNsLTMuOTI2IDMuNiAxLjMxNy0uMDA0LTMuOTctMy42Yy0uNDU0LS40MTItMS4xMTYtLjMyNi0xLjQ3OC4xOTMtLjM2My41MTgtLjI4OCAxLjI3My4xNjcgMS42ODZ6IiBmaWxsPSIjQURBREFEIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); 15 | background-repeat: no-repeat; 16 | background-position: right 10px center; 17 | 18 | &:not(:disabled) { 19 | &:hover { 20 | border-color: shade($clr-0-light, 10%); 21 | } 22 | } 23 | } 24 | 25 | .a-input-select--error { 26 | border-color: $clr-error; 27 | } 28 | -------------------------------------------------------------------------------- /src/assets/scss/utils/_u_text.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Utils : Txt 3 | * ======================================= */ 4 | 5 | /* Style */ 6 | 7 | .u-text-upper { 8 | text-transform: uppercase !important; 9 | } 10 | 11 | .u-text-lower { 12 | text-transform: lowercase !important; 13 | } 14 | 15 | .u-text-bold { 16 | font-weight: $font-weight-bold !important; 17 | } 18 | 19 | .u-text-thin { 20 | font-weight: $font-weight-thin !important; 21 | } 22 | 23 | .u-text-center { 24 | text-align: center !important; 25 | } 26 | 27 | .u-text-left { 28 | text-align: left !important; 29 | } 30 | 31 | .u-text-right { 32 | text-align: right !important; 33 | } 34 | 35 | /* Size */ 36 | 37 | .u-text-xxl { 38 | font-size: $font-size-XXL !important; 39 | } 40 | 41 | .u-text-xl { 42 | font-size: $font-size-XL !important; 43 | } 44 | 45 | .u-text-l { 46 | font-size: $font-size-L !important; 47 | } 48 | 49 | .u-text-m { 50 | font-size: $font-size-M !important; 51 | } 52 | 53 | .u-text-s { 54 | font-size: $font-size-S !important; 55 | } 56 | 57 | .u-text-xs { 58 | font-size: $font-size-XS !important; 59 | } 60 | 61 | .u-text-xxs { 62 | font-size: $font-size-XXS !important; 63 | } 64 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/atoms/a-input-select.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Inputs select" 6 | - var metaDesc = "Inputs select - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Input select 13 | nav 14 | a(href="#types") Types 15 | a(href="#states") États 16 | .hf-wrapper 17 | .hf-content 18 | h2#types Types 19 | h3 Input select 20 | :code 21 | 25 | .hf-content 26 | h2#states États 27 | h3 État : disabled 28 | :code 29 | 33 | .hf-content 34 | h3 État : error 35 | :code 36 | 40 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/atoms/a-input-text.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Inputs text" 6 | - var metaDesc = "Inputs Text - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Input text 13 | nav 14 | a(href="#types") Types 15 | a(href="#states") États 16 | .hf-wrapper 17 | .hf-content 18 | h2#types Types 19 | h3 Input text 20 | :code 21 | 22 | .hf-content 23 | h2#states États 24 | h3 État : disabled 25 | :code 26 | 27 | .hf-content 28 | h3 État : readOnly 29 | :code 30 | 31 | .hf-content 32 | h3 État : error 33 | :code 34 | 35 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/atoms/a-input-radio.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Inputs radio" 6 | - var metaDesc = "Inputs radio - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Input radio 13 | nav 14 | a(href="#types") Types 15 | a(href="#states") États 16 | .hf-wrapper 17 | .hf-content 18 | h2#types Types 19 | h3 Input radio 20 | :code 21 |
22 | 23 | 24 |
25 | .hf-content 26 | h2#states États 27 | h3 État : disabled 28 | :code 29 |
30 | 31 | 32 |
33 | .hf-content 34 | h3 État : error 35 | :code 36 |
37 | 38 | 39 |
40 | -------------------------------------------------------------------------------- /gulp/tasks/templates.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const config = require("../config").templates; 3 | const pug = require("gulp-pug"); 4 | const plumber = require("gulp-plumber"); 5 | const notify = require("gulp-notify"); 6 | const gutil = require("gulp-util"); 7 | const htmlmin = require("gulp-htmlmin"); 8 | const size = require("gulp-size"); 9 | const cache = require("gulp-cache"); 10 | const options = require("minimist")(process.argv.slice(2)); 11 | 12 | const filters = { 13 | code(html, options) { 14 | const lang = options.lang || "html"; 15 | const preview = 16 | lang === "html" ? `
${html}
` : ""; 17 | return ` 18 |
19 | ${preview} 20 | 
${html}
21 |
`; 22 | }, 23 | }; 24 | 25 | gulp.task("templates", () => { 26 | return gulp 27 | .src(config.page_src) 28 | .pipe( 29 | plumber({ 30 | errorHandler: notify.onError("PUG Error: <%= error.message %>"), 31 | }) 32 | ) 33 | .pipe(cache(pug({ pretty: true, filters }))) 34 | .pipe( 35 | options.production ? htmlmin({ collapseWhitespace: true }) : gutil.noop() 36 | ) 37 | .pipe(size({ title: "template" })) 38 | .pipe(gulp.dest(config.dist)); 39 | }); 40 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/atoms/a-input-checkbox.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Inputs checkbox" 6 | - var metaDesc = "Inputs checkbox - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Input checkbox 13 | nav 14 | a(href="#types") Types 15 | a(href="#states") États 16 | .hf-wrapper 17 | .hf-content 18 | h2#types Types 19 | h3 Input radio 20 | :code 21 |
22 | 23 | 24 |
25 | .hf-content 26 | h2#states États 27 | h3 État : disabled 28 | :code 29 |
30 | 31 | 32 |
33 | .hf-content 34 | h3 État : error 35 | :code 36 |
37 | 38 | 39 |
40 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/molecules/m-form-inline.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Formulaires Inline" 6 | - var metaDesc = "Formulaires Inline- CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Formumaire inline 13 | nav 14 | a(href="#type") Type 15 | .hf-wrapper 16 | .hf-content 17 | h2#type Types 18 | h3 Formulaire inline simple 19 | :code 20 |
21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 | 29 |
30 | 31 |
32 |
33 |
34 | 35 |
36 |
37 | -------------------------------------------------------------------------------- /src/assets/scss/tools/_function.scss: -------------------------------------------------------------------------------- 1 | // scss-lint:disable ColorVariable 2 | 3 | // Strip units 4 | @function strip-units($value) { 5 | @return ($value / ($value * 0 + 1)); 6 | } 7 | 8 | // Base font Size 9 | $em-base: 16 !default; 10 | 11 | // PX to EM 12 | @function em($pxval, $base: $em-base) { 13 | @if not unitless($pxval) { 14 | $pxval: strip-units($pxval); 15 | } 16 | @if not unitless($base) { 17 | $base: strip-units($base); 18 | } 19 | @return ($pxval / $base) * 1em; 20 | } 21 | 22 | // Mixes a color with black 23 | @function shade($color, $percent) { 24 | @return mix(#000, $color, $percent); 25 | } 26 | 27 | // Mixes a color with white. 28 | @function tint($color, $percent) { 29 | @return mix(#fff, $color, $percent); 30 | } 31 | 32 | /// Append pseudo-classes to a selector(s). 33 | /// 34 | /// @argument {list | string} $inputs 35 | /// A selector, or list of selectors, to apply the pseudo-class to. 36 | /// 37 | /// @argument {pseudo-class} $pseudo [null] 38 | /// The pseudo-class to be appended. 39 | /// 40 | /// @return {list} 41 | /// 42 | /// @access private 43 | 44 | @function _assign( 45 | $inputs, 46 | $pseudo: null 47 | ) { 48 | $list: (); 49 | 50 | @each $input in $inputs { 51 | $input: unquote($input); 52 | $input: if($pseudo, $input + ":" + $pseudo, $input); 53 | $list: append($list, $input, comma); 54 | } 55 | 56 | @return $list; 57 | } 58 | -------------------------------------------------------------------------------- /src/assets/scss/app.scss: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | 3 | @import "tools/function"; 4 | @import "settings"; 5 | @import "tools/mixin"; 6 | 7 | // ======================================= 8 | // Base 9 | // ======================================= 10 | 11 | @import "base/b_normalize"; 12 | @import "base/b_font_face"; 13 | @import "base/b_reset"; 14 | 15 | // ======================================= 16 | // Atoms 17 | // ======================================= 18 | 19 | @import "./atoms/a_button"; 20 | @import "./atoms/a_input_checkbox"; 21 | @import "./atoms/a_input_radio"; 22 | @import "./atoms/a_input_select"; 23 | @import "./atoms/a_input_text"; 24 | @import "./atoms/a_input_textarea"; 25 | @import "./atoms/a_label"; 26 | 27 | // ======================================= 28 | // Layout 29 | // ======================================= 30 | 31 | @import "layout/l_app"; 32 | @import "layout/l_grid"; 33 | @import "layout/l_wrapper"; 34 | 35 | // ======================================= 36 | // Molecules 37 | // ======================================= 38 | 39 | @import "./molecules/m_content"; 40 | @import "./molecules/m_form_inline"; 41 | @import "./molecules/m_form"; 42 | 43 | // ======================================= 44 | // Utils 45 | // ======================================= 46 | 47 | @import "utils/u_layout"; 48 | @import "utils/u_show_hide"; 49 | @import "utils/u_spacing"; 50 | @import "utils/u_text"; 51 | @import "utils/u_text_color"; 52 | @import "utils/u_width"; 53 | -------------------------------------------------------------------------------- /src/assets/scss/atoms/_a_input_checkbox.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Atom : inputCheckbox 3 | * ======================================= */ 4 | 5 | .a-input-checkbox { 6 | @include inputRadioCheckboxBase; 7 | 8 | [type="checkbox"] + label { 9 | &::before { 10 | border-radius: $rad-S; 11 | } 12 | &::after { 13 | z-index: 2; 14 | display: block; 15 | content: ""; 16 | width: $radioCheckboxSize; 17 | height: $radioCheckboxSize; 18 | position: absolute; 19 | top: $radioCheckboxTop; 20 | left: 0; 21 | } 22 | } 23 | 24 | [type="checkbox"]:checked + label { 25 | &::before { 26 | box-shadow: inset 0 0 0 $radioCheckboxSize/2 $clr-1; 27 | } 28 | &::after { 29 | background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%228%22%20height%3D%226%22%20viewBox%3D%220%200%208%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3EShape%20Copy%3C/title%3E%3Cpath%20d%3D%22M.185%203.245L2.47%205.53c.246.246.645.246.89%200l4.455-4.454c.247-.246.247-.645%200-.89-.246-.248-.645-.248-.89%200L2.47%204.638h.89L1.077%202.353c-.246-.247-.645-.247-.89%200-.248.246-.248.645%200%20.89z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E") 30 | center no-repeat; 31 | } 32 | } 33 | 34 | &:not(:first-child) { 35 | margin-top: 1rem; 36 | } 37 | } 38 | 39 | .a-input-checkbox--error { 40 | label::before { 41 | box-shadow: inset 0 0 0 1px $clr-error; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/scss/atoms/_a_button.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Atom : Button 3 | * ======================================= */ 4 | 5 | .a-button { 6 | position: relative; 7 | display: inline-block; 8 | margin: 0; 9 | min-height: $button-base-height; 10 | padding: 1.15rem 1.8rem; 11 | font-size: $font-size-S; 12 | font-weight: $font-weight-bold; 13 | line-height: 1; 14 | text-align: center; 15 | vertical-align: middle; 16 | white-space: nowrap; 17 | text-decoration: none; 18 | color: $clr-light; 19 | border: 0; 20 | border-radius: $rad-S; 21 | background: $clr-1; 22 | cursor: pointer; 23 | user-select: none; 24 | transition: $trans-all; 25 | -webkit-user-drag: none; 26 | -webkit-appearance: none; 27 | 28 | &:hover { 29 | color: $clr-light; 30 | background: $clr-1-darker; 31 | } 32 | } 33 | 34 | .a-button--active { 35 | background: shade($clr-1, 40%); 36 | } 37 | 38 | .a-button--disabled, 39 | .a-button:disabled { 40 | opacity: 0.5; 41 | background-image: none !important; 42 | box-shadow: none !important; 43 | cursor: not-allowed; 44 | 45 | &:hover { 46 | background: $clr-1; 47 | } 48 | } 49 | 50 | /** 51 | * Modifier : Size 52 | * --------------------------------------- */ 53 | 54 | .a-button--small { 55 | padding: 0.9rem 1.5rem; 56 | font-size: $font-size-XS; 57 | min-height: $button-S-height; 58 | } 59 | 60 | .a-button--full-width { 61 | justify-content: center; 62 | width: 100%; 63 | } 64 | 65 | .a-button--full-width-mobile { 66 | @media #{$mobile} { 67 | justify-content: center; 68 | width: 100%; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/layout/l-wrapper.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Wrapper" 6 | - var metaDesc = "Wrapper - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Wrapper 13 | .hf-wrapper 14 | .hf-content 15 | h2#types Types 16 | h3 Type de base 17 | p Le composant .l-wrapper permet de center des éléments sur la grille. 18 | :code 19 |
20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis vero debitis est facilis, neque eveniet corporis sunt qui necessitatibus dolores quisquam aperiam omnis itaque laboriosam non, quaerat iure. Voluptates, exercitationem.

21 |
22 | .hf-wrapper 23 | .hf-content 24 | h2#sizes Tailles 25 | h3 Taille Medium 26 | :code 27 |
28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis vero debitis est facilis, neque eveniet corporis sunt qui necessitatibus dolores quisquam aperiam omnis itaque laboriosam non, quaerat iure. Voluptates, exercitationem.

29 |
30 | .hf-wrapper 31 | .hf-content 32 | h3 Taille Small 33 | :code 34 |
35 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis vero debitis est facilis, neque eveniet corporis sunt qui necessitatibus dolores quisquam aperiam omnis itaque laboriosam non, quaerat iure. Voluptates, exercitationem.

36 |
37 | -------------------------------------------------------------------------------- /gulp/tasks/scripts.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const webpack = require("webpack-stream"); 3 | const config = require("../config").scripts; 4 | const named = require("vinyl-named"); 5 | const browserSync = require("browser-sync"); 6 | const gutil = require("gulp-util"); 7 | const plumber = require("gulp-plumber"); 8 | const options = require("minimist")(process.argv.slice(2)); 9 | 10 | const webpackConfig = options.production 11 | ? require("../../webpack/webpack.config.prod") 12 | : require("../../webpack/webpack.config.dev"); 13 | 14 | const webpackChangeHandler = (_, stats) => { 15 | gutil.log( 16 | "[webpack]", 17 | stats.toString({ 18 | hash: false, 19 | timings: true, 20 | chunks: false, 21 | chunkModules: false, 22 | modules: false, 23 | children: false, 24 | version: false, 25 | cached: false, 26 | cachedAssets: false, 27 | reasons: false, 28 | source: false, 29 | errorDetails: false, 30 | }) 31 | ); 32 | browserSync.reload(); 33 | }; 34 | 35 | gulp.task("scripts", () => { 36 | if (process.WATCH_SCRIPTS) webpackConfig.watch = true; 37 | 38 | const webpackStream = gulp 39 | .src(config.main_src) 40 | .pipe( 41 | plumber({ 42 | errorHandler: gutil.noop, // prevent double errors in console 43 | }) 44 | ) 45 | .pipe(named()) 46 | .pipe(webpack(webpackConfig, null, webpackChangeHandler)) 47 | .pipe(gulp.dest(config.dist)); 48 | 49 | if (!process.WATCH_SCRIPTS) { 50 | return webpackStream; // return the stream if scripts watch is disabled to properly finish the script tasks 51 | } 52 | }); 53 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/atoms/a-button.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Buttons" 6 | - var metaDesc = "Buttons - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Button 13 | nav 14 | a(href="#styles") Styles 15 | a(href="#states") États 16 | a(href="#sizes") Tailles 17 | .hf-wrapper 18 | .hf-content 19 | h2#styles Styles 20 | :code 21 | Bouton 22 | 23 | 24 | 25 | .hf-content 26 | h2#states États : 27 | h3 État actif 28 | :code 29 | Bouton 30 | .hf-content 31 | h3 Style disabled 32 | :code 33 | Bouton 34 | 35 | .hf-content 36 | h2#sizes Tailles : 37 | h3 Taille Small 38 | :code 39 | Bouton 40 | 41 | 42 | .hf-content 43 | h3 Pleine largeur 44 | :code 45 | Bouton 46 | .hf-content 47 | h3 Pleine largeur uniquement sur mobile 48 | :code 49 | Bouton 50 | -------------------------------------------------------------------------------- /src/assets/scss/utils/_u_text_color.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Utils : Text color 3 | * ======================================= */ 4 | 5 | .u-text-color-light { 6 | color: $clr-light !important; 7 | } 8 | 9 | .u-text-color-success { 10 | color: $clr-success !important; 11 | } 12 | 13 | .u-text-color-warning { 14 | color: $clr-warning !important; 15 | } 16 | 17 | .u-text-color-notice { 18 | color: $clr-notice !important; 19 | } 20 | 21 | .u-text-color-error { 22 | color: $clr-error !important; 23 | } 24 | 25 | .u-text-color-0 { 26 | color: $clr-0 !important; 27 | } 28 | 29 | .u-text-color-0-light { 30 | color: $clr-0-light !important; 31 | } 32 | 33 | .u-text-color-0-lighten { 34 | color: $clr-0-lighter !important; 35 | } 36 | 37 | .u-text-color-0-dark { 38 | color: $clr-0-dark !important; 39 | } 40 | 41 | .u-text-color-0-darken { 42 | color: $clr-0-darker !important; 43 | } 44 | 45 | .u-text-color-1 { 46 | color: $clr-1 !important; 47 | } 48 | 49 | .u-text-color-1-light { 50 | color: $clr-1-light !important; 51 | } 52 | 53 | .u-text-color-1-lighten { 54 | color: $clr-1-lighter !important; 55 | } 56 | 57 | .u-text-color-1-dark { 58 | color: $clr-1-dark !important; 59 | } 60 | 61 | .u-text-color-1-darken { 62 | color: $clr-1-darker !important; 63 | } 64 | 65 | .u-text-color-2 { 66 | color: $clr-2 !important; 67 | } 68 | 69 | .u-text-color-2-light { 70 | color: $clr-2-light !important; 71 | } 72 | 73 | .u-text-color-2-lighten { 74 | color: $clr-2-lighter !important; 75 | } 76 | 77 | .u-text-color-2-dark { 78 | color: $clr-2-dark !important; 79 | } 80 | 81 | .u-text-color-2-darken { 82 | color: $clr-2-darker !important; 83 | } 84 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/utils/u-width.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Utils de taille" 6 | - var metaDesc = "Utils de taille - CSS" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Width 13 | .hf-content.hf-wrapper 14 | h2 Documentation 15 | p Les utilitaires de taille permettent modifier la taille des élements 16 | table 17 | thead 18 | tr 19 | th Class 20 | th Usage 21 | tbody 22 | tr 23 | td 24 | code .u-w20 25 | td 26 | .hf-gridItem.u-w20 27 | tr 28 | td 29 | code .u-w25 30 | td 31 | .hf-gridItem.u-w25 32 | tr 33 | td 34 | code .u-w33 35 | td 36 | .hf-gridItem.u-w33 37 | tr 38 | td 39 | code .u-w40 40 | td 41 | .hf-gridItem.u-w40 42 | tr 43 | td 44 | code .u-w50 45 | td 46 | .hf-gridItem.u-w50 47 | tr 48 | td 49 | code .u-w60 50 | td 51 | .hf-gridItem.u-w60 52 | tr 53 | td 54 | code .u-w66 55 | td 56 | .hf-gridItem.u-w66 57 | tr 58 | td 59 | code .u-w75 60 | td 61 | .hf-gridItem.u-w75 62 | tr 63 | td 64 | code .u-w80 65 | td 66 | .hf-gridItem.u-w80 67 | tr 68 | td 69 | code .u-w100 70 | td 71 | .hf-gridItem.u-w100 72 | -------------------------------------------------------------------------------- /gulp/config.js: -------------------------------------------------------------------------------- 1 | const src = "./src"; 2 | const dist = "./dist"; 3 | const fontName = "app-font"; 4 | const assets_dist = "./dist/assets"; 5 | 6 | module.exports = { 7 | src: src, 8 | dist: dist, 9 | assets_dist: assets_dist, 10 | 11 | browserSync: { 12 | notify: false, 13 | open: false, 14 | server: dist, 15 | files: [dist + "/**/*.css"], 16 | }, 17 | 18 | styles: { 19 | src: src + "/assets/scss", 20 | files_src: src + "/assets/scss/**/*.scss", 21 | dist: assets_dist, 22 | }, 23 | 24 | scripts: { 25 | files_src: src + "/assets/js/**/*.js", 26 | main_src: src + "/assets/js/main.js", 27 | main_name: "main.js", 28 | dist: assets_dist, 29 | }, 30 | 31 | templates: { 32 | src: src + "/template", 33 | files_src: [src + "/template/**/*.pug", src + "/template/**/*.md"], 34 | page_src: src + "/template/pages/**/*.pug", 35 | dist: dist, 36 | files_dist: dist + "/**/*.html", 37 | }, 38 | 39 | icons: { 40 | dir: src + "/assets/icons/", 41 | src_files: [ 42 | `${src}/assets/icons/**/*.svg`, 43 | `!${src}/assets/icons/symbol/**/*`, 44 | ], 45 | }, 46 | 47 | svg: { 48 | files_src: [ 49 | "!" + src + "/assets/img/sprite/**/*.svg", 50 | "!" + src + "/assets/img/sprite.svg", 51 | src + "/assets/img/**/*.svg", 52 | ], 53 | dist: src + "/assets/img", 54 | }, 55 | 56 | images: { 57 | files_src: [ 58 | "!" + src + "/assets/img/sprite/**/*.svg", 59 | "!" + src + "/assets/img/sprite.svg", 60 | src + "/assets/img/**/*.{jpg,png,gif, svg}", 61 | ], 62 | dist: assets_dist, 63 | }, 64 | 65 | rootfiles: { 66 | src: src + "/rootfiles/**", 67 | dist: dist, 68 | }, 69 | 70 | fonts: { 71 | src: src + "/assets/fonts/**", 72 | dist: assets_dist, 73 | }, 74 | }; 75 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/molecules/m-form.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Formulaires" 6 | - var metaDesc = "Formulaires - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Formulaire 13 | nav 14 | a(href="#type") Type 15 | .hf-wrapper 16 | .hf-content 17 | h2#type Types 18 | h3 Formulaire type 19 | :code 20 |
21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 | 29 |
30 | 31 |
32 |
33 |
34 | 35 |
36 |
37 | .hf-content 38 | h3 Formulaire avec explication 39 | :code 40 |
41 |
42 | 43 |
44 | 45 |
46 |
Doit comporter au moins 12 caractères de types de types différents.
47 |
48 |
49 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/utils/u-layout.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Utils de layout" 6 | - var metaDesc = "Utils de Layout - CSS" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Layout 13 | .hf-content.hf-wrapper 14 | h2 Documentation 15 | p Les utilitaires de Layout sont des helpers permettant de facilement appliquer certaines modifications de layout à un élément. (clearFix, floats, fix de "contexte de formattage de bloc"...) 16 | table 17 | thead 18 | tr 19 | th Classe 20 | th Usage 21 | tbody 22 | tr 23 | td 24 | code .u-float-left 25 | td 26 | | Ajoute un 27 | | 28 | strong float: left 29 | | à l'élément. 30 | tr 31 | td 32 | code .u-float-right 33 | td 34 | | Ajoute un 35 | | 36 | strong float: right 37 | | à l'élément. 38 | tr 39 | td 40 | code .u-no-bfc 41 | td 42 | | Supprime le contexte de formatage de block. Plus d'information dans 43 | | 44 | a(href='http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html', title='null') cet article d'Alsacréations 45 | | sur le contexte de formatage block en CSS. 46 | tr 47 | td 48 | code .u-flex-push-left 49 | td 50 | | Décale un enfant direct d'un parent en 51 | | 52 | strong display:flex 53 | | vers la droite 54 | tr 55 | td 56 | code .u-flex-inline-grid 57 | td 58 | | Permet d'aligner les éléments enfants directs en ajoutant un espace entre eux 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "helloFront", 3 | "version": "1.0.0", 4 | "description": "Front-end boilerplate", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "dev": "gulp", 8 | "build": "gulp build --production && gulp rev && gulp revreplace", 9 | "reset": "rm -rf dist && rm -rf node_modules", 10 | "svg": "gulp svg" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://sutter@github.com/sutter/helloFront.git" 15 | }, 16 | "author": "Sutter ", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/sutter/helloFront/issues" 20 | }, 21 | "engines": { 22 | "node": "8.12.0", 23 | "npm": "6.4.1", 24 | "yarn": "1.9.4" 25 | }, 26 | "homepage": "https://github.com/sutter/helloFront#readme", 27 | "devDependencies": { 28 | "browser-sync": "^2.24.7" 29 | }, 30 | "dependencies": { 31 | "babel-core": "^6.26.3", 32 | "babel-loader": "^7.1.4", 33 | "babel-preset-env": "^1.7.0", 34 | "del": "^3.0.0", 35 | "gulp": "^3.9.1", 36 | "gulp-autoprefixer": "^6.0.0", 37 | "gulp-cache": "^1.0.2", 38 | "gulp-cssnano": "^2.1.3", 39 | "gulp-htmlmin": "^5.0.1", 40 | "gulp-imagemin": "^4.1.0", 41 | "gulp-notify": "^3.2.0", 42 | "gulp-plumber": "^1.2.0", 43 | "gulp-pug": "^4.0.1", 44 | "gulp-rename": "^1.4.0", 45 | "gulp-rev": "^8.1.1", 46 | "gulp-rev-delete-original": "^0.2.3", 47 | "gulp-rev-replace": "^0.4.3", 48 | "gulp-sass": "^4.0.1", 49 | "gulp-size": "^3.0.0", 50 | "gulp-sourcemaps": "^2.6.4", 51 | "gulp-svg-sprite": "^1.4.0", 52 | "gulp-util": "^3.0.8", 53 | "gulp-watch": "^5.0.1", 54 | "minimist": "^1.2.0", 55 | "require-dir": "^1.0.0", 56 | "run-sequence": "^2.2.1", 57 | "size": "^1.0.0", 58 | "uglifyjs-webpack-plugin": "^1.2.5", 59 | "vinyl-named": "^1.1.0", 60 | "webpack": "^3.11.0", 61 | "webpack-merge": "^4.1.4", 62 | "webpack-stream": "^4.0.3", 63 | "what-input": "^5.1.2" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/template/layout/styleguide.pug: -------------------------------------------------------------------------------- 1 | include ../config 2 | block config 3 | include ../mixins/mixins 4 | 5 | doctype 6 | html(lang= lang) 7 | head 8 | include ../partials/head 9 | link(rel='stylesheet', href= path + 'assets/styleguide.css') 10 | 11 | body 12 | .hf-styleguide 13 | header 14 | .hf-styleguide-title Styleguide 15 | a.hf-styleguide-linkBack(href="/") Retour sommaire 16 | nav 17 | p Atoms 18 | a(href=pathStyleguide+"atoms/a-button.html") Button 19 | a(href=pathStyleguide+"atoms/a-input-checkbox.html") Input - Checkbox 20 | a(href=pathStyleguide+"atoms/a-input-radio.html") Input - Radio 21 | a(href=pathStyleguide+"atoms/a-input-select.html") Input - Select 22 | a(href=pathStyleguide+"atoms/a-input-text.html") Input - Text 23 | a(href=pathStyleguide+"atoms/a-input-textarea.html") Input - Textarea 24 | a(href=pathStyleguide+"atoms/a-label.html") Labels 25 | p Molecules 26 | a(href=pathStyleguide+"molecules/m-content.html") Content 27 | a(href=pathStyleguide+"molecules/m-form.html") Form 28 | a(href=pathStyleguide+"molecules/m-form-inline.html") Form - inline 29 | p Layout 30 | a(href=pathStyleguide+"layout/l-grid.html") Grid 31 | a(href=pathStyleguide+"layout/l-wrapper.html") Wrapper 32 | p Utils 33 | a(href=pathStyleguide+"utils/u-layout.html") Layout 34 | a(href=pathStyleguide+"utils/u-show-hide.html") Show - hide 35 | a(href=pathStyleguide+"utils/u-spacing.html") Spacing 36 | a(href=pathStyleguide+"utils/u-text.html") Text 37 | a(href=pathStyleguide+"utils/u-text-color.html") Text color 38 | a(href=pathStyleguide+"utils/u-width.html") Width 39 | main 40 | section 41 | block content 42 | script(src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js") 43 | script(src= path + "assets/app.js", async) 44 | script. 45 | var codes = document.querySelectorAll('.js-highlight') 46 | for ( var i = 0; i < codes.length; ++i) { 47 | codes[i].textContent = codes[i].innerHTML 48 | } 49 | hljs.initHighlightingOnLoad() 50 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/utils/u-text.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Utils de texte" 6 | - var metaDesc = "Utils de texte - CSS" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Text 13 | .hf-content.hf-wrapper 14 | h2 Documentation 15 | p Les utilitaires de texte permettent de modifier les styles de texte des éléments. 16 | .hf-content.hf-wrapper 17 | h3 Modification de style 18 | table 19 | thead 20 | tr 21 | th Class 22 | th Usage 23 | tbody 24 | tr 25 | td 26 | code .u-text-upper 27 | td.u-text-upper Texte tout en capitales 28 | tr 29 | td 30 | code .u-text-lower 31 | td.u-text-lower Texte tout en minuscules 32 | tr 33 | td 34 | code .u-text-bold 35 | td.u-text-bold Texte tout en gras 36 | tr 37 | td 38 | code .u-text-thin 39 | td.u-text-thin Texte tout en light 40 | tr 41 | td 42 | code .u-text-center 43 | td.u-text-center Texte centré 44 | tr 45 | td 46 | code .u-text-left 47 | td.u-text-left Texte aligné à droite 48 | tr 49 | td 50 | code .u-text-right 51 | td.u-text-right Texte aligné à gauche 52 | .hf-content.hf-wrapper 53 | h3 Modification de taille 54 | table 55 | thead 56 | tr 57 | th Class 58 | th Usage 59 | tbody 60 | tr 61 | td 62 | code .u-text-xxl 63 | td.u-text-xxl Lorem ipsum 64 | tr 65 | td 66 | code .u-text-xl 67 | td.u-text-xl Lorem ipsum 68 | tr 69 | td 70 | code .u-text-l 71 | td.u-text-l Lorem ipsum 72 | tr 73 | td 74 | code .u-text-m 75 | td.u-text-m Lorem ipsum 76 | tr 77 | td 78 | code .u-text-s 79 | td.u-text-s Lorem ipsum 80 | tr 81 | td 82 | code .u-text-xs 83 | td.u-text-xs Lorem ipsum 84 | tr 85 | td 86 | code .u-text-xxs 87 | td.u-text-xxs Lorem ipsum 88 | -------------------------------------------------------------------------------- /src/assets/scss/molecules/_m_content.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Molecule : Content 3 | * ======================================= */ 4 | 5 | .m-content { 6 | h1, 7 | h2, 8 | h3, 9 | h4, 10 | h5, 11 | p, 12 | ul, 13 | dl, 14 | blockquote, 15 | table { 16 | &:first-child { 17 | margin-top: 0; 18 | } 19 | &:last-child { 20 | margin-bottom: 0; 21 | } 22 | } 23 | 24 | /* Typography */ 25 | h1 { 26 | @include title; 27 | margin: 1.5rem 0 0.8rem; 28 | font-size: $font-size-XXL; 29 | } 30 | 31 | h2 { 32 | @include title; 33 | margin: 1rem 0 0.8rem; 34 | font-size: $font-size-XL; 35 | } 36 | 37 | h3 { 38 | @include title; 39 | margin: 1.75rem 0 0.8rem; 40 | font-size: $font-size-L; 41 | } 42 | 43 | h4 { 44 | @include title; 45 | margin: 1.5rem 0 0.8rem; 46 | font-size: $font-size-M; 47 | } 48 | 49 | h5 { 50 | @include title; 51 | margin: 1.5rem 0 0.8rem; 52 | font-size: $font-size-XS; 53 | } 54 | 55 | h6 { 56 | @include title; 57 | margin: 1.5rem 0 0.8rem; 58 | font-size: $font-size-XXS; 59 | } 60 | 61 | p { 62 | margin: 2rem 0; 63 | > code { 64 | padding: 0.25rem 0.75rem; 65 | background: #eee; 66 | border: 1px solid darken(#eee, 5%); 67 | border-radius: $rad-S; 68 | } 69 | } 70 | 71 | blockquote { 72 | margin: 2rem 0; 73 | padding-left: 2rem; 74 | color: lighten($clr-0, 15); 75 | border-left: 4px solid $clr-divider; 76 | 77 | p { 78 | margin: 0; 79 | } 80 | 81 | cite::before { 82 | content: "\2014 \00A0"; 83 | } 84 | } 85 | 86 | figcaption { 87 | font-size: $font-size-XS; 88 | font-style: italic; 89 | } 90 | 91 | code { 92 | font-family: courier, monospace; 93 | } 94 | 95 | pre { 96 | text-align: left; 97 | font-size: 100%; 98 | } 99 | 100 | /* List */ 101 | 102 | ul, 103 | ol { 104 | padding-left: 2rem; 105 | margin: 2rem 0; 106 | ol, 107 | ul { 108 | list-style: circle; 109 | margin: 0; 110 | } 111 | } 112 | 113 | ul { 114 | list-style: disc; 115 | } 116 | 117 | ol { 118 | list-style: decimal; 119 | } 120 | 121 | dl { 122 | margin: 2rem 0; 123 | } 124 | 125 | dt { 126 | font-weight: bold; 127 | &:not(:first-child) { 128 | margin-top: 1rem; 129 | } 130 | } 131 | 132 | /* Separator */ 133 | 134 | hr { 135 | height: 0; 136 | border: 1px solid $clr-divider; 137 | margin: 2rem 0 1rem; 138 | } 139 | 140 | /* Image */ 141 | 142 | img { 143 | margin: 2rem 0; 144 | } 145 | 146 | /* Table */ 147 | 148 | table { 149 | width: 100%; 150 | max-width: 100%; 151 | margin-bottom: 1rem; 152 | line-height: 1.25; 153 | } 154 | 155 | thead { 156 | th { 157 | padding: 1rem; 158 | vertical-align: bottom; 159 | border-bottom: 2px solid $clr-divider; 160 | font-weight: $font-weight-bold; 161 | } 162 | } 163 | 164 | tbody { 165 | th { 166 | font-weight: $font-weight-bold; 167 | } 168 | tr, 169 | th { 170 | padding: 1rem; 171 | border-bottom: 1px solid $clr-divider; 172 | } 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /src/assets/scss/tools/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin inputBase { 2 | display: block; 3 | width: 100%; 4 | border: 1px solid $clr-divider; 5 | border-radius: $rad-S; 6 | background-color: $clr-light; 7 | box-shadow: none; 8 | transition: border-color $trans-timing $trans-cubic; 9 | &:disabled { 10 | opacity: 0.5; 11 | cursor: not-allowed; 12 | } 13 | } 14 | 15 | @mixin inputBaseState { 16 | &:not(:read-only):not(:disabled) { 17 | &:hover { 18 | border-color: shade($clr-0-light, 10%); 19 | } 20 | } 21 | &:read-only { 22 | background-color: $clr-0-lighter; 23 | } 24 | } 25 | 26 | @mixin inputRadioCheckboxBase { 27 | position: relative; 28 | line-height: $line-height-S; 29 | [type="radio"], 30 | [type="checkbox"] { 31 | position: absolute; 32 | z-index: -1; 33 | opacity: 0; 34 | &:disabled + label { 35 | opacity: 0.5; 36 | cursor: not-allowed; 37 | &:before { 38 | cursor: not-allowed; 39 | } 40 | } 41 | &:not(:checked) + label:hover::before { 42 | box-shadow: inset 0 0 0 1px shade($clr-0-light, 10%); 43 | } 44 | } 45 | label { 46 | padding-left: $radioCheckboxSize + 0.8rem; 47 | font-weight: $font-weight-base; 48 | &::before { 49 | position: absolute; 50 | top: $radioCheckboxTop; 51 | left: 0; 52 | display: inline-block; 53 | width: $radioCheckboxSize; 54 | height: $radioCheckboxSize; 55 | margin-right: 0.8rem; 56 | vertical-align: text-bottom; 57 | box-shadow: inset 0 0 0 1px $clr-0-light; 58 | background: $clr-light center no-repeat; 59 | transition: box-shadow $trans-timing cubic-bezier(0.22, 0.68, 0, 1.71); 60 | content: ""; 61 | } 62 | } 63 | } 64 | 65 | @mixin title { 66 | font-weight: $font-weight-bold; 67 | line-height: $line-height-S; 68 | text-rendering: optimizeLegibility; 69 | color: $clr-0-darker; 70 | 71 | &:first-child { 72 | margin-top: 0; 73 | } 74 | } 75 | 76 | @mixin truncate { 77 | overflow: hidden !important; 78 | max-width: 100%; 79 | white-space: nowrap !important; 80 | text-overflow: ellipsis !important; 81 | word-wrap: normal !important; 82 | } 83 | 84 | @mixin visually-hidden { 85 | position: absolute !important; 86 | overflow: hidden !important; 87 | clip: rect(0, 0, 0, 0) !important; 88 | width: 1px !important; 89 | height: 1px !important; 90 | margin: -1px; 91 | padding: 0 !important; 92 | border: 0 !important; 93 | } 94 | 95 | @mixin buttonReset() { 96 | font: inherit; 97 | line-height: inherit; 98 | padding: 0; 99 | border: 0; 100 | background: transparent; 101 | border-radius: 0; 102 | cursor: pointer; 103 | color: inherit; 104 | } 105 | 106 | @mixin listReset { 107 | margin-top: 0; 108 | margin-bottom: 0; 109 | padding-left: 0; 110 | list-style: none; 111 | } 112 | 113 | @mixin gridItem($size) { 114 | .l-grid__item--#{$size}-20 { 115 | width: calc(20% - #{$gutter-width}); 116 | } 117 | 118 | .l-grid__item--#{$size}-25 { 119 | width: calc(25% - #{$gutter-width}); 120 | } 121 | 122 | .l-grid__item--#{$size}-33 { 123 | width: calc(33.333% - #{$gutter-width}); 124 | } 125 | 126 | .l-grid__item--#{$size}-40 { 127 | width: calc(40% - #{$gutter-width}); 128 | } 129 | 130 | .l-grid__item--#{$size}-50 { 131 | width: calc(50% - #{$gutter-width}); 132 | } 133 | 134 | .l-grid__item--#{$size}-60 { 135 | width: calc(60% - #{$gutter-width}); 136 | } 137 | 138 | .l-grid__item--#{$size}-66 { 139 | width: calc(66.666% - #{$gutter-width}); 140 | } 141 | 142 | .l-grid__item--#{$size}-75 { 143 | width: calc(75% - #{$gutter-width}); 144 | } 145 | 146 | .l-grid__item--#{$size}-80 { 147 | width: calc(80% - #{$gutter-width}); 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /src/assets/scss/base/_b_reset.scss: -------------------------------------------------------------------------------- 1 | /** ====================================== 2 | * Base : reset 3 | * ======================================= */ 4 | 5 | /** 6 | * Init 7 | * --------------------------------------- */ 8 | 9 | html { 10 | box-sizing: border-box; 11 | height: 100%; 12 | font-size: 62.5%; 13 | font-size: calc(1em * 0.625); 14 | } 15 | 16 | *, 17 | *::before, 18 | *::after { 19 | box-sizing: inherit; 20 | } 21 | 22 | body { 23 | display: flex; 24 | flex-direction: column; 25 | position: relative; 26 | height: 100%; 27 | font-family: $font-base; 28 | font-size: $font-size-base; 29 | font-weight: $font-weight-base; 30 | line-height: $line-height-M; 31 | text-rendering: optimizeLegibility; 32 | color: $clr-0-darker; 33 | background: $clr-light; 34 | overflow: hidden; 35 | -ms-text-size-adjust: 100%; 36 | -webkit-font-smoothing: antialiased; 37 | -moz-osx-font-smoothing: grayscale; 38 | min-width: $app-min-width; 39 | } 40 | 41 | [tabindex="-1"]:focus { 42 | outline: none !important; 43 | } 44 | 45 | [data-whatintent="keyboard"] *:focus { 46 | box-shadow: 0 0 0 5px #09f, 0 5px 20px #09f !important; 47 | outline: 0; 48 | } 49 | 50 | a, 51 | button, 52 | textarea, 53 | select, 54 | input { 55 | &:focus { 56 | outline: none; 57 | } 58 | } 59 | 60 | /** 61 | * Typography 62 | * --------------------------------------- */ 63 | 64 | h1, 65 | h2, 66 | h3, 67 | h4, 68 | h5, 69 | h6 { 70 | margin: 0; 71 | font-size: inherit; 72 | font-weight: inherit; 73 | line-height: inherit; 74 | } 75 | 76 | p { 77 | margin: 0; 78 | } 79 | 80 | small { 81 | font-size: inherit; 82 | } 83 | 84 | abbr[title] { 85 | text-transform: lowercase; 86 | } 87 | 88 | abbr, 89 | acronym { 90 | cursor: help; 91 | } 92 | 93 | /** 94 | * Links 95 | * --------------------------------------- */ 96 | 97 | a { 98 | text-decoration: none; 99 | color: $clr-1; 100 | transition: color $trans-timing $trans-cubic; 101 | 102 | &:active, 103 | &:hover, 104 | &:focus { 105 | color: $clr-1-light; 106 | } 107 | } 108 | 109 | /** 110 | * List 111 | * --------------------------------------- */ 112 | 113 | ul, 114 | ol, 115 | dl { 116 | margin: 0; 117 | padding: 0; 118 | } 119 | 120 | ul, 121 | ol { 122 | list-style: none; 123 | } 124 | 125 | dl dd { 126 | margin: 0; 127 | } 128 | 129 | /** 130 | * Embed 131 | * --------------------------------------- */ 132 | 133 | img { 134 | vertical-align: bottom; 135 | 136 | &:not([src$=".svg"]) { 137 | height: auto; 138 | } 139 | } 140 | 141 | img, 142 | video, 143 | svg { 144 | max-width: 100%; 145 | } 146 | 147 | iframe { 148 | border: 0; 149 | } 150 | 151 | /** 152 | * Form 153 | * --------------------------------------- */ 154 | 155 | button, 156 | input, 157 | optgroup, 158 | select, 159 | textarea { 160 | font-family: inherit; 161 | } 162 | 163 | input, 164 | select, 165 | textarea { 166 | display: block; 167 | } 168 | 169 | input:not([type="range"]), 170 | textarea, 171 | select { 172 | appearance: none; 173 | } 174 | 175 | label { 176 | display: inline-block; 177 | cursor: pointer; 178 | abbr { 179 | display: none; 180 | } 181 | } 182 | 183 | textarea { 184 | resize: vertical; 185 | } 186 | 187 | [type="checkbox"], 188 | [type="radio"] { 189 | display: inline; 190 | appearance: none; 191 | &::-ms-check { 192 | display: none; /* unstyle IE checkboxes */ 193 | } 194 | } 195 | 196 | [type="search"] { 197 | box-sizing: border-box; 198 | } 199 | 200 | select { 201 | &::-ms-expand { 202 | display: none; /* hiding IE11 arrow */ 203 | } 204 | } 205 | 206 | fieldset { 207 | margin: 0; 208 | padding: 0; 209 | border: 0; 210 | } 211 | 212 | ::placeholder { 213 | color: $clr-0-light; 214 | } 215 | 216 | /** 217 | * Table 218 | * --------------------------------------- */ 219 | 220 | table { 221 | max-width: 100%; 222 | margin: 0; 223 | border-collapse: collapse; 224 | } 225 | 226 | tr, 227 | td, 228 | th { 229 | vertical-align: middle; 230 | } 231 | 232 | th { 233 | font-weight: inherit; 234 | text-align: left; 235 | } 236 | 237 | /** 238 | * Horizontal rule 239 | * --------------------------------------- */ 240 | 241 | hr { 242 | border: 0; 243 | border-top: 1px solid $clr-0-dark; 244 | margin: 2rem 0; 245 | } 246 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/layout/l-grid.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Grille" 6 | - var metaDesc = "Grille - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Grille 13 | .hf-wrapper 14 | .hf-content 15 | h2 Grille 16 | h3 Composant de base 17 | :code 18 |
19 |
1
20 |
2
21 |
22 | .hf-content 23 | h3 Définition du nombre de colones 24 | p Ajouter le modifier .l-grid__item--X-XX à l'élément ayant la classe .l-grid__item afin de modifier son nombre de colonnes. 25 | p Le dernier nombre de la chaine de caractères (ex : -50) correspond à la largeur en pourcentage (50%). 26 | p Modifiers disponibles : 27 | .u-mtM 28 | table 29 | thead 30 | tr 31 | th Taille 32 | th Valeurs 33 | tbody 34 | tr 35 | td 36 | b Taille s - de 480px à 768px 37 | td 38 | s-20 39 | s-25 40 | s-33 41 | s-40 42 | s-50 43 | s-60 44 | s-66 45 | s-75 46 | tr 47 | td 48 | b Taille s-up - sup à 480px 49 | td 50 | s-up-20 51 | s-up-25 52 | s-up-33 53 | s-up-40 54 | s-up-50 55 | s-up-60 56 | s-up-66 57 | s-up-75 58 | s-up-80 59 | tr 60 | td 61 | b Taille m - de 768px à 1049px 62 | td 63 | m-20 64 | m-25 65 | m-33 66 | m-40 67 | m-50 68 | m-60 69 | m-66 70 | m-75 71 | m-80 72 | tr 73 | td 74 | b Taille m-up - sup à 768px 75 | td 76 | m-up-20 77 | m-up-25 78 | m-up-33 79 | m-up-40 80 | m-up-50 81 | m-up-60 82 | m-up-66 83 | m-up-75 84 | m-up-80 85 | tr 86 | td 87 | b Taille l-up - sup à 1049px 88 | td 89 | l-up-20 90 | l-up-25 91 | l-up-33 92 | l-up-40 93 | l-up-50 94 | l-up-60 95 | l-up-66 96 | l-up-75 97 | l-up-80 98 | :code 99 |
100 |
1
101 |
2
102 |
3
103 |
4
104 |
5
105 |
6
106 |
7
107 |
8
108 |
9
109 |
10
110 |
11
111 |
112 | -------------------------------------------------------------------------------- /src/assets/scss/_settings.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------- 2 | // Variables 3 | //---------------------------------------- 4 | 5 | // 1 - Color 6 | // 2 - Font 7 | // 3 - Grid and wrapper 8 | // 4 - Radius 9 | // 5 - Forms 10 | // 6 - Spacing 11 | // 7 - Breakpoints 12 | // 8 - MediaQueries 13 | // 9 - Transitions 14 | // 10 - Inputs 15 | 16 | // 17 | // 1 - Color 18 | // --------------------------------------- 19 | 20 | $clr-light: #fff; 21 | $clr-success: #61bcbd; 22 | $clr-warning: #f9b134; 23 | $clr-notice: #d9edf7; 24 | $clr-error: #d24a53; 25 | $clr-divider: #ededed; 26 | 27 | $clr-0-darker: #23292e; 28 | $clr-0-dark: #212121; 29 | $clr-0: #333; 30 | $clr-0-light: #ccc; 31 | $clr-0-lighter: #fafafa; 32 | 33 | $clr-1: #5ca1f3; 34 | $clr-1-light: tint($clr-1, 50%); 35 | $clr-1-lighter: tint($clr-1, 85%); 36 | $clr-1-dark: shade($clr-1, 15%); 37 | $clr-1-darker: shade($clr-1, 30%); 38 | 39 | $clr-2: #605ce8; 40 | $clr-2-light: tint($clr-2, 50%); 41 | $clr-2-lighter: tint($clr-2, 85%); 42 | $clr-2-dark: shade($clr-2, 15%); 43 | $clr-2-darker: shade($clr-2, 30%); 44 | 45 | // Social color 46 | $clr-facebook: #3b5998; 47 | $clr-twitter: #55acee; 48 | $clr-linkedin: #0077b5; 49 | $clr-instagram: #3f729b; 50 | $clr-youtube: #cd201f; 51 | $clr-pinterest: #bd081c; 52 | 53 | // 54 | // 2 - Font 55 | // --------------------------------------- 56 | 57 | $font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, 58 | Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 59 | $font-size-base: 1.6rem; 60 | // Don't touch this, it's for em convertion 61 | $em-base: strip-units($font-size-base) * 10; 62 | $font-weight-bold: bold; 63 | $font-weight-base: 400; 64 | $font-weight-thin: 100; 65 | $font-size-XXL: 4rem; 66 | $font-size-XL: 2.8rem; 67 | $font-size-L: 2rem; 68 | $font-size-M: 1.6rem; 69 | $font-size-S: 1.4rem; 70 | $font-size-XS: 1.2rem; 71 | $font-size-XXS: 1rem; 72 | $line-height-L: 1.625; 73 | $line-height-M: 1.5; 74 | $line-height-S: 1.25; 75 | $line-height-XS: 1; 76 | 77 | // 78 | // 3 - Grid and wrapper 79 | // --------------------------------------- 80 | 81 | $app-min-width: 30rem; 82 | $wrap-M-max-width: 100rem; 83 | $wrap-S-max-width: 60rem; 84 | $gutter-width: 2rem; 85 | 86 | $width-list: (20 20%) (25 25%) (33 33.333%) (40 40%) (50 50%) (60 60%) 87 | (66 66.666%) (75 75%) (80 80%) (100 100%); 88 | 89 | // 90 | // 4 - Radius 91 | // --------------------------------------- 92 | 93 | $rad-S: 0.3rem; 94 | $rad-M: 1rem; 95 | 96 | // 97 | // 5 - Buttons 98 | // --------------------------------------- 99 | 100 | $button-base-height: 4rem; 101 | $button-S-height: 3rem; 102 | 103 | // 104 | // 5 - Forms 105 | // --------------------------------------- 106 | 107 | $form-group-input-height: 4rem; 108 | 109 | $form-list-input: _assign( 110 | ( 111 | '[type="text"]', 112 | '[type="password"]', 113 | '[type="tel"]', 114 | '[type="url"]', 115 | '[type="email"]', 116 | '[type="search"]', 117 | '[type="date"]', 118 | '[type="month"]', 119 | '[type="number"]' 120 | ) 121 | ); 122 | 123 | // 124 | // 6 - Spacing 125 | // --------------------------------------- 126 | 127 | $spacer-N: 0; 128 | $spacer-S: 1rem; 129 | $spacer-M: 2rem; 130 | $spacer-L: 4rem; 131 | $spacer-XL: 8rem; 132 | 133 | // 134 | // 7 - Breakpoints 135 | // --------------------------------------- 136 | 137 | $mq-S: em(480, $em-base); 138 | $mq-S-up: em(481, $em-base); 139 | $mq-M: em(768, $em-base); 140 | $mq-M-up: em(769, $em-base); 141 | $mq-L: em(1024, $em-base); 142 | $mq-L-up: em(1025, $em-base); 143 | 144 | // 145 | // 8 - MediaQueries 146 | // --------------------------------------- 147 | 148 | $mobile: ( 149 | max-width: $mq-S, 150 | ); 151 | $mobileUp: ( 152 | min-width: $mq-S-up, 153 | ); 154 | $tablet: ( 155 | max-width: $mq-M, 156 | ); 157 | $tabletUp: ( 158 | min-width: $mq-M-up, 159 | ); 160 | $desktop: ( 161 | max-width: $mq-L, 162 | ); 163 | $desktopUp: ( 164 | min-width: $mq-L-up, 165 | ); 166 | 167 | // 168 | // 9 - Transitions 169 | // --------------------------------------- 170 | 171 | $trans-timing: 0.3s; 172 | $trans-cubic: cubic-bezier(0.455, 0.03, 0.515, 0.955); 173 | $trans-all: all $trans-timing $trans-cubic; 174 | 175 | // 176 | // 10 - inputs 177 | // --------------------------------------- 178 | 179 | $radioCheckboxSize: 1.6rem; 180 | $radioCheckboxTop: 0.2rem; 181 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/utils/u-text-color.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Utils de couleur de texte" 6 | - var metaDesc = "Utils de couleur de texte - CSS" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Text Color 13 | .hf-content.hf-wrapper 14 | h2 Documentation 15 | p Les utilitaires de couleurs permettent de modifier les couleurs des éléments. 16 | .hf-content.hf-wrapper 17 | h3 Couleur : Light (blanc) 18 | table 19 | thead 20 | tr 21 | th Class 22 | th Rendu 23 | tbody 24 | tr 25 | td 26 | code .u-text-color-light 27 | td.u-text-color-light lorem ipsum dolor 28 | .hf-content.hf-wrapper 29 | h3 Couleur : Clr0 (noir) 30 | table 31 | thead 32 | tr 33 | th Class 34 | th Rendu 35 | tbody 36 | tr 37 | td 38 | code .u-text-color-0-darken 39 | td 40 | .u-text-color-0-darken lorem ipsum dolor 41 | tr 42 | td 43 | code .u-text-color-0-dark 44 | td 45 | .u-text-color-0-dark lorem ipsum dolor 46 | tr 47 | td 48 | code .u-text-color-0 49 | td 50 | .u-text-color-0 lorem ipsum dolor 51 | tr 52 | td 53 | code .u-text-color-0-light 54 | td 55 | .u-text-color-0-light lorem ipsum dolor 56 | tr 57 | td 58 | code .u-text-color-0-lighten 59 | td 60 | .u-text-color-0-lighten lorem ipsum dolor 61 | .hf-content.hf-wrapper 62 | h3 Couleur : Clr1 (bleu) 63 | table 64 | thead 65 | tr 66 | th Class 67 | th Rendu 68 | tbody 69 | tr 70 | td 71 | code .u-text-color-1-darken 72 | td 73 | .u-text-color-1-darken lorem ipsum dolor 74 | tr 75 | td 76 | code .u-text-color-1-dark 77 | td 78 | .u-text-color-1-dark lorem ipsum dolor 79 | tr 80 | td 81 | code .u-text-color-1 82 | td 83 | .u-text-color-1 lorem ipsum dolor 84 | tr 85 | td 86 | code .u-text-color-1-light 87 | td 88 | .u-text-color-1-light lorem ipsum dolor 89 | tr 90 | td 91 | code .u-text-color-1-lighten 92 | td 93 | .u-text-color-1-lighten lorem ipsum dolor 94 | .hf-content.hf-wrapper 95 | h3 Couleur : Clr2 (violet) 96 | table 97 | thead 98 | tr 99 | th Class 100 | th Rendu 101 | tbody 102 | tr 103 | td 104 | code .u-text-color-2-darken 105 | td 106 | .u-text-color-2-darken lorem ipsum dolor 107 | tr 108 | td 109 | code .u-text-color-2-dark 110 | td 111 | .u-text-color-2-dark lorem ipsum dolor 112 | tr 113 | td 114 | code .u-text-color-2 115 | td 116 | .u-text-color-2 lorem ipsum dolor 117 | tr 118 | td 119 | code .u-text-color-2-light 120 | td 121 | .u-text-color-2-light lorem ipsum dolor 122 | tr 123 | td 124 | code .u-text-color-2-lighten 125 | td 126 | .u-text-color-2-lighten lorem ipsum dolor 127 | .hf-content.hf-wrapper 128 | h3 Couleur : État 129 | table 130 | thead 131 | tr 132 | th Class 133 | th Rendu 134 | tbody 135 | tr 136 | td 137 | code .u-text-color-notice 138 | td 139 | .u-text-color-notice lorem ipsum dolor 140 | tr 141 | td 142 | code .u-text-color-error 143 | td 144 | .u-text-color-error lorem ipsum dolor 145 | tr 146 | td 147 | code .u-text-color-warning 148 | td 149 | .u-text-color-warning lorem ipsum dolor 150 | tr 151 | td 152 | code .u-text-color-success 153 | td 154 | .u-text-color-success lorem ipsum dolor 155 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 1. Hello Front 2 | 3 | Boilerplate SCSS / PUG / ES6 for clean and fast Front-end project. 4 | 5 | * Démo : [https://hellofront.netlify.com/](https://hellofront.netlify.com/) 6 | 7 | 8 | Work on **src/** folder and gulp build in **dist/**. 9 | 10 | 11 | 12 | - [1. Hello Front](#1-hello-front) 13 | - [1.1. Installation](#11-installation) 14 | - [1.1.1. Node version manager](#111-node-version-manager) 15 | - [1.1.2. Install Sass](#112-install-sass) 16 | - [1.1.3. Install Yarn](#113-install-yarn) 17 | - [1.1.4. Install Gulp](#114-install-gulp) 18 | - [1.1.5. Download the dependencies NPM](#115-download-the-dependencies-npm) 19 | - [1.1.6. Install Tooling](#116-install-tooling) 20 | - [1.2. Commands](#12-commands) 21 | - [1.2.1. Run project](#121-run-project) 22 | - [1.2.2. Build project](#122-build-project) 23 | - [1.2.3. Optimize SVG](#123-optimize-svg) 24 | - [1.2.4. Clean project](#124-clean-project) 25 | - [1.3. How it works](#13-how-it-works) 26 | - [1.3.1. Works with SCSS](#131-works-with-scss) 27 | - [1.3.2. Works with Pug templating](#132-works-with-pug-templating) 28 | - [1.3.3. Works with JavaScript](#133-works-with-javascript) 29 | - [1.3.4. Working with Images](#134-working-with-images) 30 | - [1.3.5. Working with Fonts](#135-working-with-fonts) 31 | - [1.3.6. Working width SVG Sprite](#136-working-width-svg-sprite) 32 | 33 | 34 | 35 | ## 1.1. Installation 36 | 37 | ### 1.1.1. Node version manager 38 | 39 | Install [NVM](https://github.com/creationix/nvm) 40 | 41 | ```bash 42 | nvm use 43 | ``` 44 | 45 | ### 1.1.2. Install Sass 46 | 47 | Go to [sass-lang.com/install](http://sass-lang.com/install) for installation in 48 | command line. 49 | 50 | ### 1.1.3. Install Yarn 51 | 52 | Go to 53 | [https://yarnpkg.com/docs/install](https://yarnpkg.com/docs/install/#mac-tab) 54 | 55 | ### 1.1.4. Install Gulp 56 | 57 | Go to [https://gulpjs.com/](https://gulpjs.com/) 58 | 59 | ### 1.1.5. Download the dependencies NPM 60 | 61 | ```bash 62 | yarn install 63 | ``` 64 | 65 | ### 1.1.6. Install Tooling 66 | 67 | Use [Prettier](https://github.com/prettier/prettier) for clean your **JS** / 68 | **SCSS** files. 69 | 70 | Plugin for IDE : 71 | 72 | - [Visual Code Studio](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 73 | - [Atom](https://atom.io/packages/prettier-atom) 74 | - [Sublime text](https://github.com/danreeves/sublime-prettier) 75 | 76 | ## 1.2. Commands 77 | 78 | ### 1.2.1. Run project 79 | 80 | ```bash 81 | yarn dev 82 | ``` 83 | 84 | ### 1.2.2. Build project 85 | 86 | ```bash 87 | yarn build 88 | ``` 89 | 90 | ### 1.2.3. Optimize SVG 91 | 92 | ```bash 93 | yarn svg 94 | ``` 95 | 96 | ### 1.2.4. Clean project 97 | 98 | ```bash 99 | yarn reset 100 | ``` 101 | 102 | ## 1.3. How it works 103 | 104 | ### 1.3.1. Works with SCSS 105 | 106 | Use [atomic design](http://bradfrost.com/blog/post/atomic-web-design/) design for orgaznise components 107 | 108 | The SCSS files are located in `./src/assets/scss`. 109 | 110 | Example SCSS hierarchy : 111 | 112 | - **base/** : Unclassed HTML elements (type selector) 113 | - **atoms/** : Atoms are the basic building blocks of matter (button, input, etc.) 114 | - **molecules/** : Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound (from, cards, etc.) 115 | - **layout/** : Layout are the basic elment for build layout. 116 | - **page/** : Pages are specific instances of templates 117 | - **tools/** : Default mixin and functions 118 | - **utils/** : Helpers and overrides 119 | - **\_settings.scss** : Global variables 120 | - **app.scss** : Main stylesheet 121 | 122 | Use the [BEM](http://getbem.com/introduction/) namming convention. 123 | 124 | ### 1.3.2. Works with Pug templating 125 | 126 | The PUG files are located in `./src/template` 127 | 128 | - **layout** : layout of html files generated 129 | - **mixin** : for reusable pattern 130 | - **pages** : the content of html files generated 131 | - **partial** : includes of html pattern 132 | - **config.pug** : global variables 133 | 134 | ### 1.3.3. Works with JavaScript 135 | 136 | The Javascript files are located in `./src/assets/js`. 137 | 138 | **Use the ES6 syntaxe** Babel convert it in ES5 for you via webpack. 139 | 140 | ### 1.3.4. Working with Images 141 | 142 | The Image files are located in `./src/assets/img` 143 | 144 | Accepted file formats : - jpg - png - gif - svg 145 | 146 | ### 1.3.5. Working with Fonts 147 | 148 | The font files are located in `./src/assets/font` 149 | 150 | ### 1.3.6. Working width SVG Sprite 151 | 152 | The svg files for sprite are located in `./src/assets/icons`. 153 | 154 | Uncomment the line 11 of the file `./src/template/layout/base.pug` to include them in the basic layout. 155 | 156 | A PUG mixin is planned for use: 157 | 158 | ```pug 159 | +icon('name-of-file', 'my-css-class') 160 | ``` 161 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/utils/u-spacing.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Utils d'espacement" 6 | - var metaDesc = "Utils d'espacement - CSS" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Spacing 13 | .hf-content.hf-wrapper 14 | h2 Documentation 15 | p Les utilitaires d'espacement permettent facilement d'appliquer des margin / padding sur un élément. A utiliser pour assembler différents composants sans avoir à définir une nouvelle classe de wrapper. 16 | .hf-content.hf-wrapper 17 | h3 Définition 18 | ul 19 | li p, m = padding, margin 20 | li a, t, r, b, l = all, top, right, bottom, left 21 | li s, m, l, n = Small (10 px), Medium (20 px), Large (40 px) , None (0) 22 | .hf-content.hf-wrapper 23 | h3 Margin 24 | table 25 | thead 26 | tr 27 | th Class 28 | th Usage 29 | tbody 30 | tr 31 | td 32 | code .u-mas 33 | td margin: 10 px; 34 | tr 35 | td 36 | code .u-mam 37 | td margin: 20 px; 38 | tr 39 | td 40 | code .u-mal 41 | td margin: 40 px; 42 | tr 43 | td 44 | code .u-man 45 | td margin: 0; 46 | tr 47 | td 48 | code .u-mts 49 | td margin-top: 10 px; 50 | tr 51 | td 52 | code .u-mtm 53 | td margin-top: 20 px; 54 | tr 55 | td 56 | code .u-mtl 57 | td margin-top: 40 px; 58 | tr 59 | td 60 | code .u-mtn 61 | td margin-top: 0; 62 | tr 63 | td 64 | code .u-mrs 65 | td margin-right: 10 px; 66 | tr 67 | td 68 | code .u-mrm 69 | td margin-right: 20 px; 70 | tr 71 | td 72 | code .u-mrl 73 | td margin-right: 40 px; 74 | tr 75 | td 76 | code .u-mrn 77 | td margin-right: 0; 78 | tr 79 | td 80 | code .u-mbs 81 | td margin-bottom: 10 px; 82 | tr 83 | td 84 | code .u-mbm 85 | td margin-bottom: 20 px; 86 | tr 87 | td 88 | code .u-mbl 89 | td margin-bottom: 40 px; 90 | tr 91 | td 92 | code .u-mbn 93 | td margin-bottom: 0; 94 | tr 95 | td 96 | code .u-mls 97 | td margin-left: 10 px; 98 | tr 99 | td 100 | code .u-mlm 101 | td margin-left: 20 px; 102 | tr 103 | td 104 | code .u-mll 105 | td margin-left: 40 px; 106 | tr 107 | td 108 | code .u-mln 109 | td margin-left: 0; 110 | .hf-content.hf-wrapper 111 | h3 Padding 112 | table 113 | thead 114 | tr 115 | th Class 116 | th Usage 117 | tbody 118 | tr 119 | td 120 | code .u-pas 121 | td padding: 10 px; 122 | tr 123 | td 124 | code .u-pam 125 | td padding: 20 px; 126 | tr 127 | td 128 | code .u-pal 129 | td padding: 40 px; 130 | tr 131 | td 132 | code .u-pan 133 | td padding: 0; 134 | tr 135 | td 136 | code .u-pts 137 | td padding-top: 10 px; 138 | tr 139 | td 140 | code .u-ptm 141 | td padding-top: 20 px; 142 | tr 143 | td 144 | code .u-ptl 145 | td padding-top: 40 px; 146 | tr 147 | td 148 | code .u-ptn 149 | td padding-top: 0; 150 | tr 151 | td 152 | code .u-prs 153 | td padding-right: 10 px; 154 | tr 155 | td 156 | code .u-prm 157 | td padding-right: 20 px; 158 | tr 159 | td 160 | code .u-prl 161 | td padding-right: 40 px; 162 | tr 163 | td 164 | code .u-prn 165 | td padding-right: 0; 166 | tr 167 | td 168 | code .u-pbs 169 | td padding-bottom: 10 px; 170 | tr 171 | td 172 | code .u-pbm 173 | td padding-bottom: 20 px; 174 | tr 175 | td 176 | code .u-pbl 177 | td padding-bottom: 40 px; 178 | tr 179 | td 180 | code .u-pbn 181 | td padding-bottom: 0; 182 | tr 183 | td 184 | code .u-pls 185 | td padding-left: 10 px; 186 | tr 187 | td 188 | code .u-plm 189 | td padding-left: 20 px; 190 | tr 191 | td 192 | code .u-pll 193 | td padding-left: 40 px; 194 | tr 195 | td 196 | code .u-pln 197 | td padding-left: 0; 198 | -------------------------------------------------------------------------------- /src/assets/scss/base/_b_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type="button"], 199 | [type="reset"], 200 | [type="submit"] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type="button"]::-moz-focus-inner, 210 | [type="reset"]::-moz-focus-inner, 211 | [type="submit"]::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type="button"]:-moz-focusring, 222 | [type="reset"]:-moz-focusring, 223 | [type="submit"]:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type="checkbox"], 273 | [type="radio"] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type="number"]::-webkit-inner-spin-button, 283 | [type="number"]::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type="search"] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type="search"]::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | -------------------------------------------------------------------------------- /src/assets/scss/styleguide.scss: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | 3 | @import "tools/function"; 4 | @import "settings"; 5 | @import "tools/mixin"; 6 | 7 | // ======================================= 8 | // Styleguide 9 | // ======================================= 10 | 11 | $styleguideSidebar: 20rem; 12 | 13 | .hf-styleguide { 14 | min-height: 100vh; 15 | position: relative; 16 | overflow-y: scroll; 17 | > header { 18 | position: fixed; 19 | overflow-y: auto; 20 | top: 0; 21 | left: 0; 22 | bottom: 0; 23 | width: $styleguideSidebar; 24 | padding: 4rem 2rem; 25 | background: $clr-0-darker; 26 | 27 | nav { 28 | display: flex; 29 | flex-direction: column; 30 | margin-top: 3rem; 31 | font-size: 14px; 32 | p { 33 | color: #fff; 34 | font-size: 1.8rem; 35 | margin-bottom: 1rem; 36 | &:not(:first-child) { 37 | margin-top: 3rem; 38 | } 39 | } 40 | a { 41 | color: rgba(255, 255, 255, 0.5); 42 | &:not(:first-child) { 43 | margin-top: 1rem; 44 | } 45 | } 46 | } 47 | } 48 | 49 | > main { 50 | padding: 0 2rem 2rem $styleguideSidebar + 2rem; 51 | background: #fff; 52 | counter-reset: section; 53 | } 54 | } 55 | 56 | .hf-styleguide-title { 57 | color: #fff; 58 | text-transform: uppercase; 59 | font-size: 2.2rem; 60 | } 61 | 62 | .hf-styleguide-linkBack { 63 | color: $clr-1; 64 | display: inline-flex; 65 | margin: 2rem 0; 66 | align-items: center; 67 | font-size: 1.4rem; 68 | transition: color 0.3s ease-in-out; 69 | &:before { 70 | content: ""; 71 | display: block; 72 | width: 0.8rem; 73 | height: 0.8rem; 74 | margin-right: 0.2rem; 75 | background: $clr-0-darker; 76 | box-shadow: -2px 2px 0 $clr-1; 77 | transform: rotate(45deg); 78 | transition: box-shadow 0.3s ease-in-out; 79 | } 80 | 81 | &:hover { 82 | color: $clr-1-light; 83 | &:before { 84 | box-shadow: -2px 2px 0 $clr-1-light; 85 | } 86 | } 87 | } 88 | 89 | // ======================================= 90 | // hf 91 | // ======================================= 92 | 93 | .hf-content { 94 | margin-top: 4rem; 95 | * { 96 | line-height: 1.5; 97 | } 98 | h2 { 99 | font-size: 2.6rem; 100 | font-weight: $font-weight-bold; 101 | border-bottom: 1px solid #ededed; 102 | padding: 0 0 15px; 103 | + * { 104 | margin-top: 3rem; 105 | } 106 | } 107 | 108 | h3 { 109 | font-size: 2rem; 110 | font-weight: $font-weight-bold; 111 | margin-bottom: 20px; 112 | 113 | &:before { 114 | display: inline-block; 115 | margin-right: 6px; 116 | font-weight: 400; 117 | color: complement($clr-1); 118 | content: counter(section) " -"; 119 | counter-increment: section; 120 | } 121 | } 122 | 123 | ul { 124 | margin: 2rem 0; 125 | } 126 | 127 | li { 128 | list-style-type: none; 129 | &:before { 130 | content: "- "; 131 | } 132 | } 133 | 134 | a { 135 | color: $clr-1; 136 | transition: color 0.3s ease-in-out; 137 | 138 | &:hover { 139 | color: $clr-1-light; 140 | } 141 | } 142 | 143 | code { 144 | color: darken(complement($clr-1), 30%); 145 | background-color: lighten(complement($clr-1), 25%); 146 | padding: 2px 6px; 147 | font-size: 90%; 148 | vertical-align: middle; 149 | border-radius: 3px; 150 | border: 1px solid lighten(complement($clr-1), 15%); 151 | } 152 | 153 | pre code { 154 | background: $clr-0-darker; 155 | display: block; 156 | color: #fff; 157 | padding: 20px; 158 | border-radius: 3px; 159 | } 160 | 161 | table { 162 | margin: 30px 0; 163 | width: 100%; 164 | border: 1px solid #f2f2f2; 165 | background: #fff; 166 | tr:nth-child(even) { 167 | background: #fafafa; 168 | } 169 | th { 170 | padding: 10px 20px; 171 | border-bottom: 2px solid #f2f2f2; 172 | font-weight: $font-weight-bold; 173 | } 174 | td { 175 | padding: 10px 20px; 176 | font-size: 14px; 177 | border-bottom: 1px solid #f2f2f2; 178 | &:not(:first-child) { 179 | border-left: 1px solid #f2f2f2; 180 | } 181 | &:first-child { 182 | width: 300px; 183 | } 184 | code { 185 | white-space: nowrap; 186 | } 187 | } 188 | } 189 | } 190 | 191 | .hf-bullet { 192 | display: inline-block; 193 | width: 60px; 194 | height: 20px; 195 | margin-right: 10px; 196 | vertical-align: middle; 197 | border: 1px solid #ededed; 198 | border-radius: 20px; 199 | } 200 | 201 | .hf-gridItem { 202 | height: 20px; 203 | background: #ccc; 204 | } 205 | 206 | .hf-wrapper { 207 | max-width: 900px; 208 | margin-right: auto; 209 | margin-left: auto; 210 | padding-left: 20px; 211 | padding-right: 20px; 212 | } 213 | 214 | .hf-head { 215 | margin: 0 -2rem; 216 | padding: 3.5rem 0; 217 | background: $clr-1; 218 | color: #fff; 219 | 220 | .hf-wrapper { 221 | display: flex; 222 | justify-content: space-between; 223 | } 224 | 225 | h1 { 226 | font-size: 2.4rem; 227 | margin: 0.5rem 0; 228 | text-transform: uppercase; 229 | letter-spacing: 1px; 230 | font-weight: $font-weight-bold; 231 | } 232 | 233 | nav { 234 | a { 235 | font-size: 14px; 236 | letter-spacing: 1px; 237 | display: inline-block; 238 | padding: 8px 20px; 239 | color: #fff; 240 | background: rgba(#fff, 0.1); 241 | border-radius: 666px; 242 | transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 243 | &:hover { 244 | background: #fff; 245 | color: $clr-1; 246 | } 247 | + a { 248 | margin-left: 10px; 249 | } 250 | } 251 | } 252 | } 253 | 254 | .hf-box { 255 | background: $clr-1; 256 | padding: 2rem; 257 | } 258 | 259 | .hf-exemple { 260 | &:not(:first-child) { 261 | margin-top: 2rem; 262 | } 263 | } 264 | 265 | .hf-preview { 266 | margin-top: 20px; 267 | padding: 20px; 268 | border-left: 2px solid #282a36; 269 | border-right: 2px solid #282a36; 270 | border-top: 2px solid #282a36; 271 | background: #fff; 272 | border-radius: 0.3rem 0.3rem 0 0; 273 | 274 | &:last-child { 275 | margin-bottom: 0.2rem; 276 | border-radius: 0.3rem; 277 | border-bottom: 2px solid #f7f7f9; 278 | border-radius: 0.3rem; 279 | } 280 | 281 | .l-grid__item { 282 | background: $clr-0-lighter; 283 | padding: 10px; 284 | text-align: center; 285 | font-weight: bold; 286 | box-shadow: inset 0 0 0 1px $clr-0-light; 287 | } 288 | 289 | & + .hf-code { 290 | border-radius: 0 0 0.3rem 0.3rem; 291 | } 292 | } 293 | 294 | .hf-code { 295 | font-size: 80%; 296 | background: #282a36; 297 | margin: 0; 298 | padding: 2rem; 299 | overflow: auto; 300 | line-height: 1.5; 301 | border-radius: 0.3rem; 302 | white-space: pre-wrap; 303 | .hljs { 304 | color: #f2f6f2; 305 | } 306 | 307 | .hljs-comment, 308 | .hljs-quote { 309 | color: #5c6370; 310 | font-style: italic; 311 | } 312 | 313 | .hljs-doctag, 314 | .hljs-keyword, 315 | .hljs-formula { 316 | color: #c678dd; 317 | } 318 | 319 | .hljs-section, 320 | .hljs-name, 321 | .hljs-selector-tag, 322 | .hljs-deletion, 323 | .hljs-subst { 324 | color: #ff6ec6; 325 | } 326 | 327 | .hljs-literal { 328 | color: #56b6c2; 329 | } 330 | 331 | .hljs-string, 332 | .hljs-regexp, 333 | .hljs-addition, 334 | .hljs-attribute, 335 | .hljs-meta-string { 336 | color: #eeee69; 337 | } 338 | 339 | .hljs-built_in, 340 | .hljs-class .hljs-title { 341 | color: #00fa58; 342 | } 343 | 344 | .hljs-attr, 345 | .hljs-variable, 346 | .hljs-template-variable, 347 | .hljs-type, 348 | .hljs-selector-class, 349 | .hljs-selector-attr, 350 | .hljs-selector-pseudo, 351 | .hljs-number { 352 | color: #00fa58; 353 | } 354 | 355 | .hljs-symbol, 356 | .hljs-bullet, 357 | .hljs-link, 358 | .hljs-meta, 359 | .hljs-selector-id, 360 | .hljs-title { 361 | color: #61aeee; 362 | } 363 | 364 | .hljs-emphasis { 365 | font-style: italic; 366 | } 367 | 368 | .hljs-strong { 369 | font-weight: bold; 370 | } 371 | 372 | .hljs-link { 373 | text-decoration: underline; 374 | } 375 | } 376 | -------------------------------------------------------------------------------- /src/template/pages/styleguide/molecules/m-content.pug: -------------------------------------------------------------------------------- 1 | extends ../../../layout/styleguide 2 | 3 | append config 4 | - var template = 't-styleguide' 5 | - var title = "Contenu" 6 | - var metaDesc = "Contenu - CSS / HTML" 7 | - var path = './../../' 8 | 9 | block content 10 | .hf-head 11 | .hf-wrapper 12 | h1 Content 13 | .hf-wrapper 14 | .hf-content 15 | h2 Styles de base 16 | p La molecule .m-content permet de styliser tout les éléments HTML de base pour un contenu éditorial. 17 | :code 18 |
19 |

The Earth : the Starting Point

20 |

One night when I had tasted bitterness I went out on to the hill. Dark heather checked my feet. Below marched the suburban lamps.

21 |

Windows, their curtains drawn, were shut eyes, inwardly watching the lives of dreams. Beyond the sea’s level darkness a lighthouse pulsed. Overhead, obscurity. I distinguished our own house, our islet in the tumultuous and bitter currents of the world. 22 | There, for a decade and a half, we two, so different in quality, had grown in and in to one another, for mutual support and nourishment, in intricate symbiosis. There daily we planned our several undertakings, and recounted the day’s oddities 23 | and vexations. There letters piled up to be answered, socks to be darned. There the children were born, those sudden new lives. There, under that roof, our own two lives, recalcitrant sometimes to one another, were all the while thankfully one, 24 | one larger, more conscious life than either alone.

25 |

All This, Surely, Was Good

26 |

Yet there was bitterness. And bitterness not only invaded us from the world; it welled up also within our own magic circle. For horror at our futility, at our own unreality, and not only at the world’s delirium, had driven me out on to the hill.

27 |

We were always hurrying from one little urgent task to another, but the upshot was insubstantial. Had we, perhaps, misconceived our whole existence? Were we, as it were, living from false premises? And in particular, this partnership of ours, this 28 | seemingly so well-based fulcrum for activity in the world, was it after all nothing but a little eddy of complacent and ingrown domesticity, ineffectively whirling on the surface of the great flux, having in itself no depth of being, and no significance? 29 | Had we perhaps after all deceived ourselves? Behind those rapt windows did we, like so many others, indeed live only a dream? In a sick world even the hale are sick. And we two, spinning our little life mostly by rote, seldom with clear cognizance, 30 | seldom with firm intent, were products of a sick world.

31 |

Yet this life of ours was not all sheer and barren fantasy. Was it not spun from the actual fibres of reality, which we gathered in with all the comings and goings through our door, all our traffic with the suburb and the city and with remoter cities, 32 | and with the ends of the earth? And were we not spinning together an authentic expression of our own nature? Did not our life issue daily as more or less firm threads of active living, and mesh itself into the growing web, the intricate, ever-proliferating 33 | pattern of mankind?

34 |

I Considered “Us” With Quiet Interest

35 |

And a kind of amused awe. How could I describe our relationship even to myself without either disparaging it or insulting it with the tawdry decoration of sentimentality? For this our delicate balance of dependence and independence, this coolly critical, 36 | shrewdly ridiculing, but loving mutual contact, was surely a microcosm of true community, was after all in its simple style an actual and living example of that high goal which the world seeks.

37 |
38 |

I reflected that not one of the visible features of this celestial and living gem revealed the presence of man. Displayed before me, though invisible, were some of the most congested centers of human population. There below me lay huge industrial 39 | regions, blackening the air with smoke. Yet all this thronging life and humanly momentous enterprise had made no mark whatever on the features of the planet. From this high look-out the Earth would have appeared no different before the dawn 40 | of man. No visiting angel, or explorer from another planet, could have guessed that this bland orb teemed with vermin, with world-mastering, self-torturing, incipiently angelic beasts. — Olaf Stapledon, Star Maker

41 |
42 |

The whole world? The whole universe? Overhead, obscurity unveiled a star. One tremulous arrow of light, projected how many thousands of years ago, now stung my nerves with vision, and my heart with fear. For in such a universe as this what significance 43 | could there be in our fortuitous, our frail, our evanescent community?

44 |

But Now Irrationally I Was Seized

45 |

With a strange worship, not, surely of the star, that mere furnace which mere distance falsely sanctified, but of something other, which the dire contrast of the star and us signified to the heart. Yet what, what could thus be signified? Intellect, 46 | peering beyond the star, discovered no Star Maker, but only darkness; no Love, no Power even, but only Nothing.

47 |
And Yet the Heart Praised
48 |

Impatiently I shook off this folly, and reverted from the inscrutable to the familiar and the concrete. Thrusting aside worship, and fear also and bitterness, I determined to examine more coldly this remarkable “us,” this surprisingly impressive datum, 49 | which to ourselves remained basic to the universe, though in relation to the stars it appeared so slight a thing.

50 |
Considered Even Without Reference to Our Belittling Cosmical Background
51 |

We were after all insignificant, perhaps ridiculous. We were such a commonplace occurrence, so trite, so respectable. We were just a married couple, making shift to live together without undue strain. Marriage in our time was suspect. And ours, with 52 | its trivial romantic origin, was doubly suspect.

53 | 65 |

Yes! How predestinate had seemed our union! Yet now, in retrospect, how accidental. True, of course, that as a long-married couple we fitted rather neatly, like two close trees whose trunks have grown upwards together as a single shaft, mutually distorting, but mutually supporting. ABC

66 |
    67 |
  1. The Diversity of Worlds
    2. 68 |
  2. Strange Mankinds
    3. 69 |
  3. Nautiloids
    4. 70 |
  4. The Earth 71 |
      72 |
    • The Starting Point
      • 73 |
    • Earth Among the Stars
      • 74 |
    75 |
    5. 76 |
  5. More Worlds
    6. 77 |
78 |

Here's some code: e = mc2

79 | 
\n
80 |
81 |
Coldly
82 |
I now assessed her as merely a useful, but often infuriating adjunct to my personal life.
We
83 |
Were on the whole sensible companions.
84 |
We left one another a certain freedom, and so we were able to endure our proximity.
Such
85 |
Was our relationship.
86 |
87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
117 |
118 | -------------------------------------------------------------------------------- /src/rootfiles/.htaccess: -------------------------------------------------------------------------------- 1 | # Apache Server Configs v2.14.0 | MIT License 2 | # https://github.com/h5bp/server-configs-apache 3 | 4 | # (!) Using `.htaccess` files slows down Apache, therefore, if you have 5 | # access to the main server configuration file (which is usually called 6 | # `httpd.conf`), you should add this logic there. 7 | # 8 | # https://httpd.apache.org/docs/current/howto/htaccess.html. 9 | 10 | # ###################################################################### 11 | # # CROSS-ORIGIN # 12 | # ###################################################################### 13 | 14 | # ---------------------------------------------------------------------- 15 | # | Cross-origin requests | 16 | # ---------------------------------------------------------------------- 17 | 18 | # Allow cross-origin requests. 19 | # 20 | # https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 21 | # http://enable-cors.org/ 22 | # http://www.w3.org/TR/cors/ 23 | 24 | # 25 | # Header set Access-Control-Allow-Origin "*" 26 | # 27 | 28 | # ---------------------------------------------------------------------- 29 | # | Cross-origin images | 30 | # ---------------------------------------------------------------------- 31 | 32 | # Send the CORS header for images when browsers request it. 33 | # 34 | # https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image 35 | # https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 36 | 37 | 38 | 39 | 40 | SetEnvIf Origin ":" IS_CORS 41 | Header set Access-Control-Allow-Origin "*" env=IS_CORS 42 | 43 | 44 | 45 | 46 | # ---------------------------------------------------------------------- 47 | # | Cross-origin web fonts | 48 | # ---------------------------------------------------------------------- 49 | 50 | # Allow cross-origin access to web fonts. 51 | 52 | 53 | 54 | Header set Access-Control-Allow-Origin "*" 55 | 56 | 57 | 58 | # ---------------------------------------------------------------------- 59 | # | Cross-origin resource timing | 60 | # ---------------------------------------------------------------------- 61 | 62 | # Allow cross-origin access to the timing information for all resources. 63 | # 64 | # If a resource isn't served with a `Timing-Allow-Origin` header that 65 | # would allow its timing information to be shared with the document, 66 | # some of the attributes of the `PerformanceResourceTiming` object will 67 | # be set to zero. 68 | # 69 | # http://www.w3.org/TR/resource-timing/ 70 | # http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/ 71 | 72 | # 73 | # Header set Timing-Allow-Origin: "*" 74 | # 75 | 76 | 77 | # ###################################################################### 78 | # # ERRORS # 79 | # ###################################################################### 80 | 81 | # ---------------------------------------------------------------------- 82 | # | Custom error messages/pages | 83 | # ---------------------------------------------------------------------- 84 | 85 | # Customize what Apache returns to the client in case of an error. 86 | # https://httpd.apache.org/docs/current/mod/core.html#errordocument 87 | 88 | ErrorDocument 404 /404.html 89 | 90 | # ---------------------------------------------------------------------- 91 | # | Error prevention | 92 | # ---------------------------------------------------------------------- 93 | 94 | # Disable the pattern matching based on filenames. 95 | # 96 | # This setting prevents Apache from returning a 404 error as the result 97 | # of a rewrite when the directory with the same name does not exist. 98 | # 99 | # https://httpd.apache.org/docs/current/content-negotiation.html#multiviews 100 | 101 | Options -MultiViews 102 | 103 | 104 | # ###################################################################### 105 | # # INTERNET EXPLORER # 106 | # ###################################################################### 107 | 108 | # ---------------------------------------------------------------------- 109 | # | Document modes | 110 | # ---------------------------------------------------------------------- 111 | 112 | # Force Internet Explorer 8/9/10 to render pages in the highest mode 113 | # available in the various cases when it may not. 114 | # 115 | # https://hsivonen.fi/doctype/#ie8 116 | # 117 | # (!) Starting with Internet Explorer 11, document modes are deprecated. 118 | # If your business still relies on older web apps and services that were 119 | # designed for older versions of Internet Explorer, you might want to 120 | # consider enabling `Enterprise Mode` throughout your company. 121 | # 122 | # https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode 123 | # http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx 124 | 125 | 126 | 127 | Header set X-UA-Compatible "IE=edge" 128 | 129 | # `mod_headers` cannot match based on the content-type, however, 130 | # the `X-UA-Compatible` response header should be send only for 131 | # HTML documents and not for the other resources. 132 | 133 | 134 | Header unset X-UA-Compatible 135 | 136 | 137 | 138 | 139 | # ---------------------------------------------------------------------- 140 | # | Iframes cookies | 141 | # ---------------------------------------------------------------------- 142 | 143 | # Allow cookies to be set from iframes in Internet Explorer. 144 | # 145 | # https://msdn.microsoft.com/en-us/library/ms537343.aspx 146 | # http://www.w3.org/TR/2000/CR-P3P-20001215/ 147 | 148 | # 149 | # Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" 150 | # 151 | 152 | 153 | # ###################################################################### 154 | # # MEDIA TYPES AND CHARACTER ENCODINGS # 155 | # ###################################################################### 156 | 157 | # ---------------------------------------------------------------------- 158 | # | Media types | 159 | # ---------------------------------------------------------------------- 160 | 161 | # Serve resources with the proper media types (f.k.a. MIME types). 162 | # 163 | # https://www.iana.org/assignments/media-types/media-types.xhtml 164 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype 165 | 166 | 167 | 168 | # Data interchange 169 | 170 | AddType application/atom+xml atom 171 | AddType application/json json map topojson 172 | AddType application/ld+json jsonld 173 | AddType application/rss+xml rss 174 | AddType application/vnd.geo+json geojson 175 | AddType application/xml rdf xml 176 | 177 | 178 | # JavaScript 179 | 180 | # Normalize to standard type. 181 | # https://tools.ietf.org/html/rfc4329#section-7.2 182 | 183 | AddType application/javascript js 184 | 185 | 186 | # Manifest files 187 | 188 | AddType application/manifest+json webmanifest 189 | AddType application/x-web-app-manifest+json webapp 190 | AddType text/cache-manifest appcache 191 | 192 | 193 | # Media files 194 | 195 | AddType audio/mp4 f4a f4b m4a 196 | AddType audio/ogg oga ogg opus 197 | AddType image/bmp bmp 198 | AddType image/svg+xml svg svgz 199 | AddType image/webp webp 200 | AddType video/mp4 f4v f4p m4v mp4 201 | AddType video/ogg ogv 202 | AddType video/webm webm 203 | AddType video/x-flv flv 204 | 205 | # Serving `.ico` image files with a different media type 206 | # prevents Internet Explorer from displaying then as images: 207 | # https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee 208 | 209 | AddType image/x-icon cur ico 210 | 211 | 212 | # Web fonts 213 | 214 | AddType application/font-woff woff 215 | AddType application/font-woff2 woff2 216 | AddType application/vnd.ms-fontobject eot 217 | 218 | # Browsers usually ignore the font media types and simply sniff 219 | # the bytes to figure out the font type. 220 | # https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern 221 | # 222 | # However, Blink and WebKit based browsers will show a warning 223 | # in the console if the following font types are served with any 224 | # other media types. 225 | 226 | AddType application/x-font-ttf ttc ttf 227 | AddType font/opentype otf 228 | 229 | 230 | # Other 231 | 232 | AddType application/octet-stream safariextz 233 | AddType application/x-bb-appworld bbaw 234 | AddType application/x-chrome-extension crx 235 | AddType application/x-opera-extension oex 236 | AddType application/x-xpinstall xpi 237 | AddType text/vcard vcard vcf 238 | AddType text/vnd.rim.location.xloc xloc 239 | AddType text/vtt vtt 240 | AddType text/x-component htc 241 | 242 | 243 | 244 | # ---------------------------------------------------------------------- 245 | # | Character encodings | 246 | # ---------------------------------------------------------------------- 247 | 248 | # Serve all resources labeled as `text/html` or `text/plain` 249 | # with the media type `charset` parameter set to `UTF-8`. 250 | # 251 | # https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset 252 | 253 | AddDefaultCharset utf-8 254 | 255 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 256 | 257 | # Serve the following file types with the media type `charset` 258 | # parameter set to `UTF-8`. 259 | # 260 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset 261 | 262 | 263 | AddCharset utf-8 .atom \ 264 | .bbaw \ 265 | .css \ 266 | .geojson \ 267 | .js \ 268 | .json \ 269 | .jsonld \ 270 | .manifest \ 271 | .rdf \ 272 | .rss \ 273 | .topojson \ 274 | .vtt \ 275 | .webapp \ 276 | .webmanifest \ 277 | .xloc \ 278 | .xml 279 | 280 | 281 | 282 | # ###################################################################### 283 | # # REWRITES # 284 | # ###################################################################### 285 | 286 | # ---------------------------------------------------------------------- 287 | # | Rewrite engine | 288 | # ---------------------------------------------------------------------- 289 | 290 | # (1) Turn on the rewrite engine (this is necessary in order for 291 | # the `RewriteRule` directives to work). 292 | # 293 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#RewriteEngine 294 | # 295 | # (2) Enable the `FollowSymLinks` option if it isn't already. 296 | # 297 | # https://httpd.apache.org/docs/current/mod/core.html#options 298 | # 299 | # (3) If your web host doesn't allow the `FollowSymlinks` option, 300 | # you need to comment it out or remove it, and then uncomment 301 | # the `Options +SymLinksIfOwnerMatch` line (4), but be aware 302 | # of the performance impact. 303 | # 304 | # https://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks 305 | # 306 | # (4) Some cloud hosting services will require you set `RewriteBase`. 307 | # 308 | # https://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site 309 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase 310 | # 311 | # (5) Depending on how your server is set up, you may also need to 312 | # use the `RewriteOptions` directive to enable some options for 313 | # the rewrite engine. 314 | # 315 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions 316 | # 317 | # (6) Set %{ENV:PROTO} variable, to allow rewrites to redirect with the 318 | # appropriate schema automatically (http or https). 319 | 320 | 321 | 322 | # (1) 323 | RewriteEngine On 324 | 325 | # (2) 326 | Options +FollowSymlinks 327 | 328 | # (3) 329 | # Options +SymLinksIfOwnerMatch 330 | 331 | # (4) 332 | # RewriteBase / 333 | 334 | # (5) 335 | # RewriteOptions 336 | 337 | # (6) 338 | RewriteCond %{HTTPS} =on 339 | RewriteRule ^ - [env=proto:https] 340 | RewriteCond %{HTTPS} !=on 341 | RewriteRule ^ - [env=proto:http] 342 | 343 | 344 | 345 | # ---------------------------------------------------------------------- 346 | # | Forcing `https://` | 347 | # ---------------------------------------------------------------------- 348 | 349 | # Redirect from the `http://` to the `https://` version of the URL. 350 | # https://wiki.apache.org/httpd/RewriteHTTPToHTTPS 351 | 352 | # 353 | # RewriteEngine On 354 | # RewriteCond %{HTTPS} !=on 355 | # RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] 356 | # 357 | 358 | # ---------------------------------------------------------------------- 359 | # | Suppressing / Forcing the `www.` at the beginning of URLs | 360 | # ---------------------------------------------------------------------- 361 | 362 | # The same content should never be available under two different 363 | # URLs, especially not with and without `www.` at the beginning. 364 | # This can cause SEO problems (duplicate content), and therefore, 365 | # you should choose one of the alternatives and redirect the other 366 | # one. 367 | # 368 | # By default `Option 1` (no `www.`) is activated. 369 | # http://no-www.org/faq.php?q=class_b 370 | # 371 | # If you would prefer to use `Option 2`, just comment out all the 372 | # lines from `Option 1` and uncomment the ones from `Option 2`. 373 | # 374 | # (!) NEVER USE BOTH RULES AT THE SAME TIME! 375 | 376 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 377 | 378 | # Option 1: rewrite www.example.com → example.com 379 | 380 | 381 | RewriteEngine On 382 | RewriteCond %{HTTPS} !=on 383 | RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] 384 | RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L] 385 | 386 | 387 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 388 | 389 | # Option 2: rewrite example.com → www.example.com 390 | # 391 | # Be aware that the following might not be a good idea if you use "real" 392 | # subdomains for certain parts of your website. 393 | 394 | # 395 | # RewriteEngine On 396 | # RewriteCond %{HTTPS} !=on 397 | # RewriteCond %{HTTP_HOST} !^www\. [NC] 398 | # RewriteCond %{SERVER_ADDR} !=127.0.0.1 399 | # RewriteCond %{SERVER_ADDR} !=::1 400 | # RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 401 | # 402 | 403 | # ###################################################################### 404 | # # SECURITY # 405 | # ###################################################################### 406 | 407 | # ---------------------------------------------------------------------- 408 | # | Clickjacking | 409 | # ---------------------------------------------------------------------- 410 | 411 | # Protect website against clickjacking. 412 | # 413 | # The example below sends the `X-Frame-Options` response header with 414 | # the value `DENY`, informing browsers not to display the content of 415 | # the web page in any frame. 416 | # 417 | # This might not be the best setting for everyone. You should read 418 | # about the other two possible values the `X-Frame-Options` header 419 | # field can have: `SAMEORIGIN` and `ALLOW-FROM`. 420 | # https://tools.ietf.org/html/rfc7034#section-2.1. 421 | # 422 | # Keep in mind that while you could send the `X-Frame-Options` header 423 | # for all of your website’s pages, this has the potential downside that 424 | # it forbids even non-malicious framing of your content (e.g.: when 425 | # users visit your website using a Google Image Search results page). 426 | # 427 | # Nonetheless, you should ensure that you send the `X-Frame-Options` 428 | # header for all pages that allow a user to make a state changing 429 | # operation (e.g: pages that contain one-click purchase links, checkout 430 | # or bank-transfer confirmation pages, pages that make permanent 431 | # configuration changes, etc.). 432 | # 433 | # Sending the `X-Frame-Options` header can also protect your website 434 | # against more than just clickjacking attacks: 435 | # https://cure53.de/xfo-clickjacking.pdf. 436 | # 437 | # https://tools.ietf.org/html/rfc7034 438 | # http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx 439 | # https://www.owasp.org/index.php/Clickjacking 440 | 441 | # 442 | 443 | # Header set X-Frame-Options "DENY" 444 | 445 | # # `mod_headers` cannot match based on the content-type, however, 446 | # # the `X-Frame-Options` response header should be send only for 447 | # # HTML documents and not for the other resources. 448 | 449 | # 450 | # Header unset X-Frame-Options 451 | # 452 | 453 | # 454 | 455 | # ---------------------------------------------------------------------- 456 | # | Content Security Policy (CSP) | 457 | # ---------------------------------------------------------------------- 458 | 459 | # Mitigate the risk of cross-site scripting and other content-injection 460 | # attacks. 461 | # 462 | # This can be done by setting a `Content Security Policy` which 463 | # whitelists trusted sources of content for your website. 464 | # 465 | # The example header below allows ONLY scripts that are loaded from 466 | # the current website's origin (no inline scripts, no CDN, etc). 467 | # That almost certainly won't work as-is for your website! 468 | # 469 | # To make things easier, you can use an online CSP header generator 470 | # such as: http://cspisawesome.com/. 471 | # 472 | # http://content-security-policy.com/ 473 | # http://www.html5rocks.com/en/tutorials/security/content-security-policy/ 474 | # http://www.w3.org/TR/CSP11/). 475 | 476 | # 477 | 478 | # Header set Content-Security-Policy "script-src 'self'; object-src 'self'" 479 | 480 | # # `mod_headers` cannot match based on the content-type, however, 481 | # # the `Content-Security-Policy` response header should be send 482 | # # only for HTML documents and not for the other resources. 483 | 484 | # 485 | # Header unset Content-Security-Policy 486 | # 487 | 488 | # 489 | 490 | # ---------------------------------------------------------------------- 491 | # | File access | 492 | # ---------------------------------------------------------------------- 493 | 494 | # Block access to directories without a default document. 495 | # 496 | # You should leave the following uncommented, as you shouldn't allow 497 | # anyone to surf through every directory on your server (which may 498 | # includes rather private places such as the CMS's directories). 499 | 500 | 501 | Options -Indexes 502 | 503 | 504 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 505 | 506 | # Block access to all hidden files and directories with the exception of 507 | # the visible content from within the `/.well-known/` hidden directory. 508 | # 509 | # These types of files usually contain user preferences or the preserved 510 | # state of an utility, and can include rather private places like, for 511 | # example, the `.git` or `.svn` directories. 512 | # 513 | # The `/.well-known/` directory represents the standard (RFC 5785) path 514 | # prefix for "well-known locations" (e.g.: `/.well-known/manifest.json`, 515 | # `/.well-known/keybase.txt`), and therefore, access to its visible 516 | # content should not be blocked. 517 | # 518 | # https://www.mnot.net/blog/2010/04/07/well-known 519 | # https://tools.ietf.org/html/rfc5785 520 | 521 | 522 | RewriteEngine On 523 | RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC] 524 | RewriteCond %{SCRIPT_FILENAME} -d [OR] 525 | RewriteCond %{SCRIPT_FILENAME} -f 526 | RewriteRule "(^|/)\." - [F] 527 | 528 | 529 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 530 | 531 | # Block access to files that can expose sensitive information. 532 | # 533 | # By default, block access to backup and source files that may be 534 | # left by some text editors and can pose a security risk when anyone 535 | # has access to them. 536 | # 537 | # http://feross.org/cmsploit/ 538 | # 539 | # (!) Update the `` regular expression from below to 540 | # include any files that might end up on your production server and 541 | # can expose sensitive information about your website. These files may 542 | # include: configuration files, files that contain metadata about the 543 | # project (e.g.: project dependencies), build scripts, etc.. 544 | 545 | 546 | 547 | # Apache < 2.3 548 | 549 | Order allow,deny 550 | Deny from all 551 | Satisfy All 552 | 553 | 554 | # Apache ≥ 2.3 555 | 556 | Require all denied 557 | 558 | 559 | 560 | 561 | # ---------------------------------------------------------------------- 562 | # | HTTP Strict Transport Security (HSTS) | 563 | # ---------------------------------------------------------------------- 564 | 565 | # Force client-side SSL redirection. 566 | # 567 | # If a user types `example.com` in their browser, even if the server 568 | # redirects them to the secure version of the website, that still leaves 569 | # a window of opportunity (the initial HTTP connection) for an attacker 570 | # to downgrade or redirect the request. 571 | # 572 | # The following header ensures that browser will ONLY connect to your 573 | # server via HTTPS, regardless of what the users type in the browser's 574 | # address bar. 575 | # 576 | # (!) Remove the `includeSubDomains` optional directive if the website's 577 | # subdomains are not using HTTPS. 578 | # 579 | # http://www.html5rocks.com/en/tutorials/security/transport-layer-security/ 580 | # https://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1 581 | # http://blogs.msdn.com/b/ieinternals/archive/2014/08/18/hsts-strict-transport-security-attacks-mitigations-deployment-https.aspx 582 | 583 | # 584 | # Header always set Strict-Transport-Security "max-age=16070400; includeSubDomains" 585 | # 586 | 587 | # ---------------------------------------------------------------------- 588 | # | Reducing MIME type security risks | 589 | # ---------------------------------------------------------------------- 590 | 591 | # Prevent some browsers from MIME-sniffing the response. 592 | # 593 | # This reduces exposure to drive-by download attacks and cross-origin 594 | # data leaks, and should be left uncommented, especially if the server 595 | # is serving user-uploaded content or content that could potentially be 596 | # treated as executable by the browser. 597 | # 598 | # http://www.slideshare.net/hasegawayosuke/owasp-hasegawa 599 | # http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx 600 | # https://msdn.microsoft.com/en-us/library/ie/gg622941.aspx 601 | # https://mimesniff.spec.whatwg.org/ 602 | 603 | 604 | Header set X-Content-Type-Options "nosniff" 605 | 606 | 607 | # ---------------------------------------------------------------------- 608 | # | Reflected Cross-Site Scripting (XSS) attacks | 609 | # ---------------------------------------------------------------------- 610 | 611 | # (1) Try to re-enable the cross-site scripting (XSS) filter built 612 | # into most web browsers. 613 | # 614 | # The filter is usually enabled by default, but in some cases it 615 | # may be disabled by the user. However, in Internet Explorer for 616 | # example, it can be re-enabled just by sending the 617 | # `X-XSS-Protection` header with the value of `1`. 618 | # 619 | # (2) Prevent web browsers from rendering the web page if a potential 620 | # reflected (a.k.a non-persistent) XSS attack is detected by the 621 | # filter. 622 | # 623 | # By default, if the filter is enabled and browsers detect a 624 | # reflected XSS attack, they will attempt to block the attack 625 | # by making the smallest possible modifications to the returned 626 | # web page. 627 | # 628 | # Unfortunately, in some browsers (e.g.: Internet Explorer), 629 | # this default behavior may allow the XSS filter to be exploited, 630 | # thereby, it's better to inform browsers to prevent the rendering 631 | # of the page altogether, instead of attempting to modify it. 632 | # 633 | # https://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities 634 | # 635 | # (!) Do not rely on the XSS filter to prevent XSS attacks! Ensure that 636 | # you are taking all possible measures to prevent XSS attacks, the 637 | # most obvious being: validating and sanitizing your website's inputs. 638 | # 639 | # http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx 640 | # http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx 641 | # https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 642 | 643 | # 644 | 645 | # # (1) (2) 646 | # Header set X-XSS-Protection "1; mode=block" 647 | 648 | # # `mod_headers` cannot match based on the content-type, however, 649 | # # the `X-XSS-Protection` response header should be send only for 650 | # # HTML documents and not for the other resources. 651 | 652 | # 653 | # Header unset X-XSS-Protection 654 | # 655 | 656 | # 657 | 658 | # ---------------------------------------------------------------------- 659 | # | Server-side technology information | 660 | # ---------------------------------------------------------------------- 661 | 662 | # Remove the `X-Powered-By` response header that: 663 | # 664 | # * is set by some frameworks and server-side languages 665 | # (e.g.: ASP.NET, PHP), and its value contains information 666 | # about them (e.g.: their name, version number) 667 | # 668 | # * doesn't provide any value as far as users are concern, 669 | # and in some cases, the information provided by it can 670 | # be used by attackers 671 | # 672 | # (!) If you can, you should disable the `X-Powered-By` header from the 673 | # language / framework level (e.g.: for PHP, you can do that by setting 674 | # `expose_php = off` in `php.ini`) 675 | # 676 | # https://php.net/manual/en/ini.core.php#ini.expose-php 677 | 678 | 679 | Header unset X-Powered-By 680 | 681 | 682 | # ---------------------------------------------------------------------- 683 | # | Server software information | 684 | # ---------------------------------------------------------------------- 685 | 686 | # Prevent Apache from adding a trailing footer line containing 687 | # information about the server to the server-generated documents 688 | # (e.g.: error messages, directory listings, etc.) 689 | # 690 | # https://httpd.apache.org/docs/current/mod/core.html#serversignature 691 | 692 | ServerSignature Off 693 | 694 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 695 | 696 | # Prevent Apache from sending in the `Server` response header its 697 | # exact version number, the description of the generic OS-type or 698 | # information about its compiled-in modules. 699 | # 700 | # (!) The `ServerTokens` directive will only work in the main server 701 | # configuration file, so don't try to enable it in the `.htaccess` file! 702 | # 703 | # https://httpd.apache.org/docs/current/mod/core.html#servertokens 704 | 705 | #ServerTokens Prod 706 | 707 | 708 | # ###################################################################### 709 | # # WEB PERFORMANCE # 710 | # ###################################################################### 711 | 712 | # ---------------------------------------------------------------------- 713 | # | Compression | 714 | # ---------------------------------------------------------------------- 715 | 716 | 717 | 718 | # Force compression for mangled `Accept-Encoding` request headers 719 | # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html 720 | 721 | 722 | 723 | SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding 724 | RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding 725 | 726 | 727 | 728 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 729 | 730 | # Compress all output labeled with one of the following media types. 731 | # 732 | # (!) For Apache versions below version 2.3.7 you don't need to 733 | # enable `mod_filter` and can remove the `` 734 | # and `` lines as `AddOutputFilterByType` is still in 735 | # the core directives. 736 | # 737 | # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype 738 | 739 | 740 | AddOutputFilterByType DEFLATE "application/atom+xml" \ 741 | "application/javascript" \ 742 | "application/json" \ 743 | "application/ld+json" \ 744 | "application/manifest+json" \ 745 | "application/rdf+xml" \ 746 | "application/rss+xml" \ 747 | "application/schema+json" \ 748 | "application/vnd.geo+json" \ 749 | "application/vnd.ms-fontobject" \ 750 | "application/x-font-ttf" \ 751 | "application/x-javascript" \ 752 | "application/x-web-app-manifest+json" \ 753 | "application/xhtml+xml" \ 754 | "application/xml" \ 755 | "font/eot" \ 756 | "font/opentype" \ 757 | "image/bmp" \ 758 | "image/svg+xml" \ 759 | "image/vnd.microsoft.icon" \ 760 | "image/x-icon" \ 761 | "text/cache-manifest" \ 762 | "text/css" \ 763 | "text/html" \ 764 | "text/javascript" \ 765 | "text/plain" \ 766 | "text/vcard" \ 767 | "text/vnd.rim.location.xloc" \ 768 | "text/vtt" \ 769 | "text/x-component" \ 770 | "text/x-cross-domain-policy" \ 771 | "text/xml" 772 | 773 | 774 | 775 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 776 | 777 | # Map the following filename extensions to the specified 778 | # encoding type in order to make Apache serve the file types 779 | # with the appropriate `Content-Encoding` response header 780 | # (do note that this will NOT make Apache compress them!). 781 | # 782 | # If these files types would be served without an appropriate 783 | # `Content-Enable` response header, client applications (e.g.: 784 | # browsers) wouldn't know that they first need to uncompress 785 | # the response, and thus, wouldn't be able to understand the 786 | # content. 787 | # 788 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding 789 | 790 | 791 | AddEncoding gzip svgz 792 | 793 | 794 | 795 | 796 | # ---------------------------------------------------------------------- 797 | # | Content transformation | 798 | # ---------------------------------------------------------------------- 799 | 800 | # Prevent intermediate caches or proxies (e.g.: such as the ones 801 | # used by mobile network providers) from modifying the website's 802 | # content. 803 | # 804 | # https://tools.ietf.org/html/rfc2616#section-14.9.5 805 | # 806 | # (!) If you are using `mod_pagespeed`, please note that setting 807 | # the `Cache-Control: no-transform` response header will prevent 808 | # `PageSpeed` from rewriting `HTML` files, and, if the 809 | # `ModPagespeedDisableRewriteOnNoTransform` directive isn't set 810 | # to `off`, also from rewriting other resources. 811 | # 812 | # https://developers.google.com/speed/pagespeed/module/configuration#notransform 813 | 814 | # 815 | # Header merge Cache-Control "no-transform" 816 | # 817 | 818 | # ---------------------------------------------------------------------- 819 | # | ETags | 820 | # ---------------------------------------------------------------------- 821 | 822 | # Remove `ETags` as resources are sent with far-future expires headers. 823 | # 824 | # https://developer.yahoo.com/performance/rules.html#etags 825 | # https://tools.ietf.org/html/rfc7232#section-2.3 826 | 827 | # `FileETag None` doesn't work in all cases. 828 | 829 | Header unset ETag 830 | 831 | 832 | FileETag None 833 | 834 | # ---------------------------------------------------------------------- 835 | # | Expires headers | 836 | # ---------------------------------------------------------------------- 837 | 838 | # Serve resources with far-future expires headers. 839 | # 840 | # (!) If you don't control versioning with filename-based 841 | # cache busting, you should consider lowering the cache times 842 | # to something like one week. 843 | # 844 | # https://httpd.apache.org/docs/current/mod/mod_expires.html 845 | 846 | 847 | 848 | ExpiresActive on 849 | ExpiresDefault "access plus 1 month" 850 | 851 | # CSS 852 | 853 | ExpiresByType text/css "access plus 1 year" 854 | 855 | 856 | # Data interchange 857 | 858 | ExpiresByType application/atom+xml "access plus 1 hour" 859 | ExpiresByType application/rdf+xml "access plus 1 hour" 860 | ExpiresByType application/rss+xml "access plus 1 hour" 861 | 862 | ExpiresByType application/json "access plus 0 seconds" 863 | ExpiresByType application/ld+json "access plus 0 seconds" 864 | ExpiresByType application/schema+json "access plus 0 seconds" 865 | ExpiresByType application/vnd.geo+json "access plus 0 seconds" 866 | ExpiresByType application/xml "access plus 0 seconds" 867 | ExpiresByType text/xml "access plus 0 seconds" 868 | 869 | 870 | # Favicon (cannot be renamed!) and cursor images 871 | 872 | ExpiresByType image/vnd.microsoft.icon "access plus 1 week" 873 | ExpiresByType image/x-icon "access plus 1 week" 874 | 875 | # HTML 876 | 877 | ExpiresByType text/html "access plus 0 seconds" 878 | 879 | 880 | # JavaScript 881 | 882 | ExpiresByType application/javascript "access plus 1 year" 883 | ExpiresByType application/x-javascript "access plus 1 year" 884 | ExpiresByType text/javascript "access plus 1 year" 885 | 886 | 887 | # Manifest files 888 | 889 | ExpiresByType application/manifest+json "access plus 1 week" 890 | ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 891 | ExpiresByType text/cache-manifest "access plus 0 seconds" 892 | 893 | 894 | # Media files 895 | 896 | ExpiresByType audio/ogg "access plus 1 month" 897 | ExpiresByType image/bmp "access plus 1 month" 898 | ExpiresByType image/gif "access plus 1 month" 899 | ExpiresByType image/jpeg "access plus 1 month" 900 | ExpiresByType image/png "access plus 1 month" 901 | ExpiresByType image/svg+xml "access plus 1 month" 902 | ExpiresByType image/webp "access plus 1 month" 903 | ExpiresByType video/mp4 "access plus 1 month" 904 | ExpiresByType video/ogg "access plus 1 month" 905 | ExpiresByType video/webm "access plus 1 month" 906 | 907 | 908 | # Web fonts 909 | 910 | # Embedded OpenType (EOT) 911 | ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 912 | ExpiresByType font/eot "access plus 1 month" 913 | 914 | # OpenType 915 | ExpiresByType font/opentype "access plus 1 month" 916 | 917 | # TrueType 918 | ExpiresByType application/x-font-ttf "access plus 1 month" 919 | 920 | # Web Open Font Format (WOFF) 1.0 921 | ExpiresByType application/font-woff "access plus 1 month" 922 | ExpiresByType application/x-font-woff "access plus 1 month" 923 | ExpiresByType font/woff "access plus 1 month" 924 | 925 | # Web Open Font Format (WOFF) 2.0 926 | ExpiresByType application/font-woff2 "access plus 1 month" 927 | 928 | 929 | # Other 930 | 931 | ExpiresByType text/x-cross-domain-policy "access plus 1 week" 932 | 933 | 934 | 935 | # ---------------------------------------------------------------------- 936 | # | File concatenation | 937 | # ---------------------------------------------------------------------- 938 | 939 | # Allow concatenation from within specific files. 940 | # 941 | # e.g.: 942 | # 943 | # If you have the following lines in a file called, for 944 | # example, `main.combined.js`: 945 | # 946 | # 947 | # 948 | # 949 | # Apache will replace those lines with the content of the 950 | # specified files. 951 | 952 | # 953 | # 954 | # Options +Includes 955 | # AddOutputFilterByType INCLUDES application/javascript \ 956 | # application/x-javascript \ 957 | # text/javascript 958 | # SetOutputFilter INCLUDES 959 | # 960 | # 961 | # Options +Includes 962 | # AddOutputFilterByType INCLUDES text/css 963 | # SetOutputFilter INCLUDES 964 | # 965 | # 966 | 967 | # ---------------------------------------------------------------------- 968 | # | Filename-based cache busting | 969 | # ---------------------------------------------------------------------- 970 | 971 | # If you're not using a build process to manage your filename version 972 | # revving, you might want to consider enabling the following directives 973 | # to route all requests such as `/style.12345.css` to `/style.css`. 974 | # 975 | # To understand why this is important and even a better solution than 976 | # using something like `*.css?v231`, please see: 977 | # http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ 978 | 979 | # 980 | # RewriteEngine On 981 | # RewriteCond %{REQUEST_FILENAME} !-f 982 | # RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp|webmanifest)$ $1.$3 [L] 983 | # 984 | --------------------------------------------------------------------------------