diff --git a/.babelrc b/.babelrc new file mode 100755 index 0000000..5739731 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["env", "stage-2"], + "comments": false, +} diff --git a/.editorconfig b/.editorconfig new file mode 100755 index 0000000..4bd3bd8 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.eslintignore b/.eslintignore new file mode 100755 index 0000000..927ee99 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +js/**/*.js +node_modules/**/*.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100755 index 0000000..bb764df --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,39 @@ +module.exports = { + "root": true, + "parserOptions": { + "parser": "babel-eslint", + "ecmaVersion": 2017, + "sourceType": "module" + }, + "env": { + "browser": true, + "node": true, + "es6": true + }, + "globals": { + "window": true, + "location": true + }, + "extends": [ + "airbnb-base", + ], + // custom rules here + "rules": { + // don"t require .vue extension when importing + "import/extensions": ["error", "always", { + "js": "never", + "vue": "js", + "mjs": "never" + }], + "no-param-reassign": ["error", { + "props": true, + "ignorePropertyModificationsFor": [ + "event", // for e.returnvalue + "response", // for Express responses + "item", // for item usually within each loops + ] + }], + // allow debugger during development + "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0 + } +} diff --git a/.gitattributes b/.gitattributes old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 index c681168..4dfe913 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,9 @@ +.DS_Store npm-debug.log .sass-cache node_modules -bower_components assets/sass/vendor -tests package-lock.json *.map **/*.map +yarn.lock diff --git a/.gitmodules b/.gitmodules old mode 100644 new mode 100755 index 180aa8f..2b2cb88 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,3 @@ -[submodule "assets/sass/vendor/simple-grid"] - path = assets/sass/vendor/simple-grid +[submodule "assets/styles/vendor/simple-grid"] + path = assets/styles/vendor/simple-grid url = https://github.com/benchmarkstudios/simple-grid.git diff --git a/CHANGELOG.md b/CHANGELOG.md old mode 100644 new mode 100755 index e3b5a62..42b09d7 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,24 +1,3 @@ # barebones changelog -## 2.0.6 -* Add package-lock.json to gitignore for npm 5+ - -## 2.0.5 -* Use filetime() for asset revisions as it's more compatible and easier to support. - -## 2.0.4 -* Better static asset revisioning using randomly generated hash when running gulp tasks. - -## 2.0.3 -* update get_post_thumbnail_url function and add ability to get specific size. - -## 2.0.2 -* Add dependencies that were missing while using yarn - -## 2.0.1 -* Comment out example "add_image_size" as it can be easily forgotten which leaves you with extra unused image size. -* Add CHANGELOG.MD to track changes -* Tidy up formatting using PHP-CS-Fixer (mostly spacing) -* Update README.MD dependencies - -## 2.0.0 -* Refreshed tooling using Elixir with lots of improvements +## 3.0 +* Refreshed simplified tooling, new feaatures and improvements diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 95c9e9b..0239ca6 --- a/README.md +++ b/README.md @@ -5,17 +5,18 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The ## Features * Reset, normalisation and base font/form styles -* Sass Boilerplate - semantically named files, organised by folders, all compiled into a single file +* Scss Boilerplate - semantically named files, organised by folders, all compiled into a single file * Semantic use of HTML5 elements, includes Google HTML5 shiv * WAI-ARIA role ready -* Comes pre-bundled with cached CDN version of jQuery * jQuery plugin agnostic -* Laravel Elixir to define/customize and run basic Gulp tasks * Basic template files * Customised functions.php adding theme support for high customisation * Minimised HTTP requests for high Web Performance * Localised strings for multiple language support -* Sass compiling and watching, css minification and live reload support +* Scss compiling and watching, css minification support +* Rollup.js for js for smallest possible bundles +* Image optimisation using imagemin. +* Base mobile nav out of the box ## Installation @@ -31,38 +32,49 @@ To include all its optional submodules ([Simple Grid](https://github.com/benchma #### Dependencies -* [Node.js](http://nodejs.org) -* [Gulp](http://gulpjs.com) -* [Gulp Imagemin](https://github.com/sindresorhus/gulp-imagemin) -* [Laravel Elixir](https://github.com/laravel/elixir) +Install Dependencies: +``` + npm install +``` -### Using Gulp and Laravel Elixir +.. or with yarn: +``` + yarn +``` + +### Using Gulp Install Gulp as a global NPM package, if you don't have it already on your machine: npm install --global gulp -Install Laravel Elixir: +Install Dependencies, you have haven't done yet: npm install -Edit your gulpfile.js adding the required tasks (check the [Laravel Elixir](http://laravel.com/docs/master/elixir) documentation for further information). - Then run: - gulp +| Tasks | | +|----------------|--------------------------------------------------------------------| +| `gulp` | *to compile* (All tasks) | +| `gulp watch` | *to watch* | +| `gulp images` | *to optimise images* | +| `gulp styles` | *to compile styles* | +| `gulp scripts` | *to compile scripts* | +| `gulp build` | *to create a build (minification, removes map files and comments)* | -*to compile* +This will execute all the Gulp tasks on the gulpfile.babel.js. - gulp watch +### Configuration for Gulp -*to watch* +Some of the configuration can be done in `config.barebones.js` file, such as base source and public paths, along with scripts file paths for multiple bundles. - gulp --production +Of course, feel free to modify gulpfile itself. -*to minify* +### Images -This will execute all the Gulp tasks on the gulpfile.js. +Drop all your images into assets/images. When running gulp tasks, they will be automatically +optimised and output files will available in img folder in the root of the theme. ## WordPress Support @@ -75,3 +87,23 @@ Compatible with WordPress 3.2 and above, but always use the latest version. * Safari 4.0+ * Chrome 14.0+ * Opera 10.0+ + +## Tips & Tricks + +### SVG Fallbacks + +Most likely if you need to support IE8 + +*CSS* +``` +... +background-size: 120px 15px; +background-image: url(/img/fallback.png); +background-image: linear-gradient(transparent, transparent), url(/img/image.svg); +... +``` + +*HTML* +``` +image +``` diff --git a/assets/icons/error.png b/assets/icons/error.png new file mode 100755 index 0000000..45f441f Binary files /dev/null and b/assets/icons/error.png differ diff --git a/assets/icons/success.png b/assets/icons/success.png new file mode 100755 index 0000000..952072b Binary files /dev/null and b/assets/icons/success.png differ diff --git a/assets/images/.gitkeep b/assets/images/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100755 index 0000000..029011f Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/logo.svg b/assets/images/logo.svg new file mode 100755 index 0000000..6575236 --- /dev/null +++ b/assets/images/logo.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/sass/barebones.scss b/assets/sass/barebones.scss deleted file mode 100755 index dc5a5d2..0000000 --- a/assets/sass/barebones.scss +++ /dev/null @@ -1,48 +0,0 @@ -/** -Theme Name: Barebones -Theme URI: http://github.com/benchmarkstudios/barebones -Author: Benchmark -*/ - -@charset 'UTF-8'; - -// 1. Configuration -@import - 'config/variables', - 'config/mixins'; - -// 2. Vendors -@import - 'vendor/simple-grid/simple-grid'; - -// 3. Utilities -@import - 'utils/reset', - 'utils/a11y', - 'utils/responsive', - 'utils/helpers'; - -// 4. Base stuff -@import - 'base/base', - 'base/fonts', - 'base/images', - 'base/forms', - 'base/lists', - 'base/typography'; - -// 5. Layout-related sections -@import - 'layout/main', - 'layout/header', - 'layout/footer'; - -// 6. Components -@import - 'components/buttons', - 'components/nav', - 'components/alerts'; - -// 7. Page-specific styles -@import - 'pages/home'; diff --git a/assets/sass/base/_forms.scss b/assets/sass/base/_forms.scss deleted file mode 100644 index 5f9e5e5..0000000 --- a/assets/sass/base/_forms.scss +++ /dev/null @@ -1,122 +0,0 @@ -/** - * Blanket input styles for normalisation - */ - -*:focus { - outline: 0; -} - -input, -select, -textarea { - background-color: $base-background-colour; - border: solid 1px $base-colour; - border-radius: 0; - color: $base-colour; - line-height: ($base-spacing-unit * 1.5); - height: ($base-spacing-unit * 1.5); - padding: 0 ($base-spacing-unit / 2); - width: 100%; -} - -input[type="checkbox"], -input[type="radio"] { - background: transparent; - border: 0; - line-height: normal; - height: auto; - width: auto; -} - -input[type="file"] { - line-height: normal; - height: auto; - padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2); -} - -input[type="submit"] { - -webkit-border-radius: 0; - border-radius: 0; -} - -input[disabled] { - background-color: whitesmoke; - cursor: not-allowed; -} - -select { - line-height: normal; - padding: 0; - padding-left: ($base-spacing-unit / 2); -} - -textarea { - min-height: ($base-spacing-unit * 4); - overflow: auto; - vertical-align: top; - resize: vertical; -} - - -/** - * Form utility classes - */ - -.form--inline { - .form__group { - display: inline-block; - } -} - -.checkbox, -.radio { - display: block; - padding-left: $base-spacing-unit; - &.inline { - display: inline-block; - } - > input { - float: left; - margin-left: -($base-spacing-unit); - margin-top: 4px; - } -} - -.form__group { - display: block; - margin-bottom: $base-spacing-unit; -} - -.form__label { - display: block; - margin-bottom: ($base-spacing-unit / 2); -} - - -/** - * Input Group - * - * Allows for prepend/append of elements - * (such as icons) on an input. - */ - -.input-group { - position: relative; - > input { - padding: 0 ($base-spacing-unit * 2); - } - .input-group__addon { - line-height: ($base-spacing-unit * 1.5); - height: ($base-spacing-unit * 1.5); - position: absolute; - text-align: center; - top: 0; - width: ($base-spacing-unit * 1.5); - &:first-child { - left: 0; - } - &:last-child { - right: 0; - } - } -} diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss deleted file mode 100644 index a3845e1..0000000 --- a/assets/sass/base/_typography.scss +++ /dev/null @@ -1,12 +0,0 @@ -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: bold; -} - -small { - font-size: .75em; -} \ No newline at end of file diff --git a/assets/sass/components/_nav.scss b/assets/sass/components/_nav.scss deleted file mode 100755 index 52e267f..0000000 --- a/assets/sass/components/_nav.scss +++ /dev/null @@ -1,14 +0,0 @@ -.nav { - list-style: none; - margin: 0; - > li { - display: inline-block; - margin-right: $base-spacing-unit; - &:last-child { - margin-right: 0; - } - > a { - display: block; - } - } -} \ No newline at end of file diff --git a/assets/sass/config/_mixins.scss b/assets/sass/config/_mixins.scss deleted file mode 100755 index ccc0f26..0000000 --- a/assets/sass/config/_mixins.scss +++ /dev/null @@ -1,83 +0,0 @@ -/* - * Media query to respond to a minimum size (mobile first) - */ - -@mixin resp-min($size) { - @media screen and (min-width: $size) { - @content; - } -} - - -/* - * Media query to respond to a maximum size - */ - -@mixin resp-max($size) { - @media screen and (max-width: $size) { - @content; - } -} - - -/* - * Output font size in px/rem - */ - -@mixin font-size($px) { - font-size: $px + px; - font-size: #{$px / 16}rem; -} - - -/* - * Placeholder mixin for - */ - -@mixin placeholder { - $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; - @each $placeholder in $placeholders { - &:#{$placeholder}-placeholder { - @content; - } - } -} - - -/** - * Clearfix - */ - -@mixin clearfix { - &:before, - &:after{ - content: " "; - display: table; - } - &:after{ - clear: both; - } -} - - - -/** - * Positioning - */ - -@mixin center($horizontal: true, $vertical: true) { - position: absolute; - @if ($horizontal and $vertical) { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - @else if ($horizontal) { - left: 50%; - transform: translateX(-50%); - } - @else if ($vertical) { - top: 50%; - transform: translateY(-50%); - } -} diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss deleted file mode 100644 index e69de29..0000000 diff --git a/assets/sass/utils/_a11y.scss b/assets/sass/utils/_a11y.scss deleted file mode 100644 index c626587..0000000 --- a/assets/sass/utils/_a11y.scss +++ /dev/null @@ -1,7 +0,0 @@ -.sr-only { - font-size: 0; - height: 0; - overflow: hidden; - position: absolute; - width: 0; -} diff --git a/assets/sass/utils/_reset.scss b/assets/sass/utils/_reset.scss deleted file mode 100644 index 5714796..0000000 --- a/assets/sass/utils/_reset.scss +++ /dev/null @@ -1,42 +0,0 @@ -* { - background-color: transparent; - border: 0; - box-sizing: border-box; - font: inherit; - margin: 0; - padding: 0; -} - -html { - background-color: white; - font-size: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - text-rendering: optimizeLegibility; -} - -input, -select, -textarea, -button { - color: inherit; - display: inline-block; - &[disabled] { - cursor: not-allowed; - } -} - -button { - cursor: pointer; -} - -table { - border-collapse: collapse; - border-spacing: 0; - th, - td { - text-align: left; - } -} \ No newline at end of file diff --git a/assets/sass/vendor/simple-grid b/assets/sass/vendor/simple-grid deleted file mode 160000 index 4aee262..0000000 --- a/assets/sass/vendor/simple-grid +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 4aee2627e323b19a70045a84adafc9f4fee44a6f diff --git a/assets/scripts/script.js b/assets/scripts/script.js deleted file mode 100644 index 57ce6f4..0000000 --- a/assets/scripts/script.js +++ /dev/null @@ -1,7 +0,0 @@ -// var $ = require('jquery'); - -(function() { - - - -})($); diff --git a/assets/scripts/scripts.js b/assets/scripts/scripts.js new file mode 100755 index 0000000..d3e6416 --- /dev/null +++ b/assets/scripts/scripts.js @@ -0,0 +1,15 @@ +import $ from 'jquery'; + +/** + * Mobile navigation toggle + * @param {mixed} event + */ + +const toggleMenu = (event) => { + event.preventDefault(); + $('.js-menu-toggle, .nav--header').toggleClass('open'); + $('.header').toggleClass('menu-open'); +}; + +$('.js-menu-toggle').on('click', toggleMenu); + diff --git a/assets/sass/base/_base.scss b/assets/styles/base/_base.scss old mode 100644 new mode 100755 similarity index 79% rename from assets/sass/base/_base.scss rename to assets/styles/base/_base.scss index 86487fb..5acad70 --- a/assets/sass/base/_base.scss +++ b/assets/styles/base/_base.scss @@ -1,27 +1,28 @@ body { color: $base-colour; font-family: $base-font-family; - @include font-size($base-font-size); line-height: $base-line-height; - -webkit-text-size-adjust: none; + text-size-adjust: none; + @include font-size($base-font-size); } -h1, -h2, -h3, -h4, -h5, -h6, -p, -hr, -ul, +h1, +h2, +h3, +h4, +h5, +h6, +p, +hr, +ul, ol, -dl, -address { +dl { margin-bottom: $base-spacing-unit; + &:last-child { + margin-bottom: 0; + } } - /** * Basic styles for links */ @@ -35,20 +36,19 @@ a { } } -a[href^="tel"]{ +a[href^="tel"] { + font-size: inherit; + font-family: inherit; color: inherit; text-decoration: none; - font-family: inherit; - font-size: inherit; font-style: inherit; } - /** - * Rulers + * Rules */ hr { - background-color: $base-colour; height: 1px; -} \ No newline at end of file + background-color: $base-colour; +} diff --git a/assets/sass/base/_fonts.scss b/assets/styles/base/_fonts.scss old mode 100644 new mode 100755 similarity index 94% rename from assets/sass/base/_fonts.scss rename to assets/styles/base/_fonts.scss index f5e3b71..52f90a3 --- a/assets/sass/base/_fonts.scss +++ b/assets/styles/base/_fonts.scss @@ -1,3 +1,3 @@ /** * This file contains all @font-face declarations, if any. - */ \ No newline at end of file + */ diff --git a/assets/styles/base/_forms.scss b/assets/styles/base/_forms.scss new file mode 100755 index 0000000..0207b7f --- /dev/null +++ b/assets/styles/base/_forms.scss @@ -0,0 +1,76 @@ +*:focus { + outline: 0; +} + +input, +select, +textarea { + background-color: $base-background-colour; + border: solid 1px $base-colour; + border-radius: 0; + color: $base-colour; + line-height: $base-spacing-unit * 1.5; + height: $base-spacing-unit * 1.5; + padding: 0 #{$base-spacing-unit / 2}; + width: 100%; +} + +input[type="checkbox"], +input[type="radio"] { + background: transparent; + border: 0; + line-height: normal; + height: auto; + width: auto; +} + +input[type="file"] { + line-height: normal; + height: auto; + padding: #{$base-spacing-unit / 4} #{$base-spacing-unit / 2}; +} + +input[type="submit"] { + border-radius: 0; +} + +input[disabled] { + background-color: whitesmoke; + cursor: not-allowed; +} + +select { + line-height: normal; + padding: 0; + padding-left: $base-spacing-unit / 2; +} + +textarea { + min-height: $base-spacing-unit * 4; + overflow: auto; + vertical-align: top; + resize: vertical; +} + + + +/** + * Form utility classes + */ + +.form--inline { + .form__group { + display: inline-block; + } +} + +.form { + .form__group { + display: block; + margin-bottom: $base-spacing-unit; + .form__label { + display: block; + margin-bottom: ($base-spacing-unit / 2); + } + } +} \ No newline at end of file diff --git a/assets/sass/base/_images.scss b/assets/styles/base/_images.scss old mode 100644 new mode 100755 similarity index 100% rename from assets/sass/base/_images.scss rename to assets/styles/base/_images.scss diff --git a/assets/sass/base/_lists.scss b/assets/styles/base/_lists.scss old mode 100644 new mode 100755 similarity index 90% rename from assets/sass/base/_lists.scss rename to assets/styles/base/_lists.scss index 79d9d8f..d473793 --- a/assets/sass/base/_lists.scss +++ b/assets/styles/base/_lists.scss @@ -1,16 +1,16 @@ -ul, +ul, ol { margin-left: $base-spacing-unit; } li { - > ul, + > ul, > ol { margin-bottom: 0; } } .list--unstyled { - list-style: none; margin-left: 0; -} \ No newline at end of file + list-style: none; +} diff --git a/assets/styles/base/_typography.scss b/assets/styles/base/_typography.scss new file mode 100755 index 0000000..bb011b4 --- /dev/null +++ b/assets/styles/base/_typography.scss @@ -0,0 +1,17 @@ +h1, +h2, +h3, +h4, +h5, +h6, +strong { + font-weight: bold; +} + +em { + font-style: italic; +} + +small { + font-size: .75em; +} diff --git a/assets/sass/components/_alerts.scss b/assets/styles/components/_alerts.scss old mode 100644 new mode 100755 similarity index 99% rename from assets/sass/components/_alerts.scss rename to assets/styles/components/_alerts.scss index 5974ab1..cfc753d --- a/assets/sass/components/_alerts.scss +++ b/assets/styles/components/_alerts.scss @@ -2,25 +2,31 @@ padding: $base-spacing-unit; margin-bottom: $base-spacing-unit; border: 1px solid transparent; + > p, > ul { margin-bottom: 0; } + > p + p { margin-top: $base-spacing-unit; } + &.alert--success { color: $success-colour; border-color: $success-colour; } + &.alert--info { color: $info-colour; border-color: $info-colour; } + &.alert--warning { color: $warning-colour; border-color: $warning-colour; } + &.alert--danger { color: $danger-colour; border-color: $danger-colour; diff --git a/assets/sass/components/_buttons.scss b/assets/styles/components/_buttons.scss old mode 100644 new mode 100755 similarity index 88% rename from assets/sass/components/_buttons.scss rename to assets/styles/components/_buttons.scss index 3bcb7a7..c62fddf --- a/assets/sass/components/_buttons.scss +++ b/assets/styles/components/_buttons.scss @@ -3,7 +3,7 @@ color: $base-background-colour; border: 1px solid transparent; display: inline-block; - padding: ($base-spacing-unit / 4) $base-spacing-unit; + padding: #{$base-spacing-unit / 4} $base-spacing-unit; text-align: center; white-space: nowrap; vertical-align: middle; @@ -12,16 +12,19 @@ user-select: none; width: auto; transition: all .5s; + &::-moz-focus-inner { border: 0; padding: 0; } + &:hover { text-decoration: none; background-color: $base-background-colour; color: $brand-colour; - border: 1px solid $brand-colour; + border-color: $brand-colour; } + &.is-disabled, &:disabled { pointer-events: none; @@ -33,16 +36,18 @@ background-color: $base-background-colour; color: $brand-colour; border: 1px solid $brand-colour; + &:hover { background-color: $brand-colour; color: $base-background-colour; - border: 1px solid transparent; + border-color: transparent; } } .btn--block { display: block; width: 100%; + + .btn--block { margin-top: $base-spacing-unit / 4; } diff --git a/assets/styles/components/_nav.scss b/assets/styles/components/_nav.scss new file mode 100755 index 0000000..cd28a6f --- /dev/null +++ b/assets/styles/components/_nav.scss @@ -0,0 +1,107 @@ +/** + * Hamburger menu + */ + +.nav-burger { + position: fixed; + top: $base-spacing-unit; + right: $base-spacing-unit; + z-index: 550; + transition: all $animation-speed $animation; +} + +.nav-burger__line { + width: 35px; + height: 3px; + background-color: $brand-colour; + display: none; + margin: 8px auto; + transition: all $animation-speed $animation; + + @include resp-max($breakpoint-md) { + display: block; + } + + .nav-burger.open & { + &:nth-child(2) { + opacity: 0; + } + + &:nth-child(1) { + transform: translateY(11px) rotate(45deg); + } + + &:nth-child(3) { + transform: translateY(-11px) rotate(-45deg); + } + } +} + + +/** + * Navs + */ + +.nav { + list-style: none; + margin: 0; + + > li { + display: inline-block; + margin-right: $base-spacing-unit; + + &:last-child { + margin-right: 0; + } + > a { + display: block; + } + } +} + +.nav--header { + + // mobile nav + @include resp-max($breakpoint-md) { + position: fixed; + top: 0; + left: 0; + visibility: hidden; + width: 0; + height: 100%; + margin: 0; + transition: opacity 500ms ease; + transition: opacity .35s ease, visibility .35s ease, width .35s ease; + text-align: center; + opacity: 0; + background: $base-background-colour; + -webkit-overflow-scrolling: touch; + + &.open { + z-index: 500; + visibility: visible; + width: 100%; + opacity: 1; + + ul { + position: absolute; + top: 50%; + left: 0; + overflow: auto; + width: 100%; + max-height: 100%; + margin: 0; + padding: 0; + user-select: none; + transform: translateY(-50%); + -webkit-touch-callout: none; + -webkit-overflow-scrolling: touch; + + > li { + width: 100%; + margin: 0; + } + } + } + } +} diff --git a/assets/styles/config/_mixins.scss b/assets/styles/config/_mixins.scss new file mode 100755 index 0000000..b595d16 --- /dev/null +++ b/assets/styles/config/_mixins.scss @@ -0,0 +1,60 @@ +/* + * Media query to respond to a minimum size (mobile first) + */ + + @mixin resp-min($size) { + @media screen and (min-width: $size) { + @content; + } +} + + +/* + * Media query to respond to a maximum size + */ + +@mixin resp-max($size) { + @media screen and (max-width: $size) { + @content; + } +} + + +/* + * Output font size in px/rem + */ + +@mixin font-size($px) { + font-size: $px + px; + font-size: #{$px / 16}rem; +} + + +/* + * Placeholder mixin for + */ + +@mixin placeholder { + $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; + @each $placeholder in $placeholders { + &:#{$placeholder}-placeholder { + @content; + } + } +} + + +/** + * Clearfix + */ +@mixin clearfix { + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } +} diff --git a/assets/sass/config/_variables.scss b/assets/styles/config/_variables.scss similarity index 93% rename from assets/sass/config/_variables.scss rename to assets/styles/config/_variables.scss index de08df6..0800afd 100755 --- a/assets/sass/config/_variables.scss +++ b/assets/styles/config/_variables.scss @@ -55,3 +55,9 @@ $grid-gutter: $base-spacing-unit; */ $border-radius: 3px; + +/** + * Animations + */ +$animation-speed: 250ms; +$animation: ease-in-out; diff --git a/assets/sass/layout/_footer.scss b/assets/styles/layout/_footer.scss old mode 100644 new mode 100755 similarity index 100% rename from assets/sass/layout/_footer.scss rename to assets/styles/layout/_footer.scss diff --git a/assets/styles/layout/_header.scss b/assets/styles/layout/_header.scss new file mode 100755 index 0000000..8b13789 --- /dev/null +++ b/assets/styles/layout/_header.scss @@ -0,0 +1 @@ + diff --git a/assets/sass/layout/_main.scss b/assets/styles/layout/_main.scss old mode 100644 new mode 100755 similarity index 100% rename from assets/sass/layout/_main.scss rename to assets/styles/layout/_main.scss diff --git a/assets/sass/pages/_home.scss b/assets/styles/pages/_home.scss old mode 100644 new mode 100755 similarity index 100% rename from assets/sass/pages/_home.scss rename to assets/styles/pages/_home.scss diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss new file mode 100755 index 0000000..c251ed4 --- /dev/null +++ b/assets/styles/styles.scss @@ -0,0 +1,34 @@ +@charset 'UTF-8'; + +// 1. Configuration +@import 'config/variables'; +@import 'config/mixins'; + +// 2. Vendors +@import 'vendor/simple-grid/simple-grid'; + +// 3. Utilities +@import 'utils/reset'; +@import 'utils/responsive'; +@import 'utils/helpers'; + +// 4. Base stuff +@import 'base/base'; +@import 'base/fonts'; +@import 'base/images'; +@import 'base/forms'; +@import 'base/lists'; +@import 'base/typography'; + +// 5. Layout-related sections +@import 'layout/main'; +@import 'layout/header'; +@import 'layout/footer'; + +// 6 .Components +@import 'components/buttons'; +@import 'components/nav'; +@import 'components/alerts'; + +// 7. Page-specific styles +@import 'pages/home'; diff --git a/assets/sass/utils/_helpers.scss b/assets/styles/utils/_helpers.scss old mode 100644 new mode 100755 similarity index 76% rename from assets/sass/utils/_helpers.scss rename to assets/styles/utils/_helpers.scss index 0961469..0b00cb1 --- a/assets/sass/utils/_helpers.scss +++ b/assets/styles/utils/_helpers.scss @@ -1,10 +1,11 @@ /** - * Clearing and floating - */ +* Clearing and floating +*/ .alignleft, .float-left { float: left; + img & { margin-right: $base-spacing-unit; } @@ -13,8 +14,9 @@ .alignright, .float-right { float: right; + img & { - margin-left : $base-spacing-unit; + margin-left: $base-spacing-unit; } } @@ -25,20 +27,20 @@ left: auto; right: auto; } + img & { margin-bottom: $base-spacing-unit; } } .clearfix { - @include clearfix(); + @include clearfix; } - /** - * Text aligments - */ +* Text aligments +*/ .align-text-left { text-align: left; @@ -59,6 +61,7 @@ .visible-on-mobile { display: none !important; + @include resp-max($breakpoint-sm) { display: block !important; } @@ -66,9 +69,11 @@ .visible-on-tablet { display: none !important; + @include resp-max($breakpoint-md) { display: block !important; } + @include resp-max($breakpoint-sm) { display: none !important; } @@ -79,3 +84,19 @@ display: none !important; } } + + +/** + * Accessibility + */ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} \ No newline at end of file diff --git a/assets/styles/utils/_reset.scss b/assets/styles/utils/_reset.scss new file mode 100755 index 0000000..f3a83a0 --- /dev/null +++ b/assets/styles/utils/_reset.scss @@ -0,0 +1,44 @@ +* { + background-color: transparent; + border: 0; + box-sizing: border-box; + font: inherit; + margin: 0; + padding: 0; +} + +html { + background-color: white; + font-size: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + text-rendering: optimizeLegibility; +} + +input, +select, +textarea, +button { + color: inherit; + display: inline-block; + + &[disabled] { + cursor: not-allowed; + } +} + +button { + cursor: pointer; +} + +table { + border-collapse: collapse; + border-spacing: 0; + + th, + td { + text-align: left; + } +} diff --git a/assets/sass/utils/_responsive.scss b/assets/styles/utils/_responsive.scss old mode 100644 new mode 100755 similarity index 99% rename from assets/sass/utils/_responsive.scss rename to assets/styles/utils/_responsive.scss index 2e3b870..2af938e --- a/assets/sass/utils/_responsive.scss +++ b/assets/styles/utils/_responsive.scss @@ -1,5 +1,4 @@ @each $breakpoint in $breakpoints { - $key : nth($breakpoint, 1); $value : nth($breakpoint, 2); @@ -14,5 +13,4 @@ display: none !important; } } - -} \ No newline at end of file +} diff --git a/assets/styles/vendor/simple-grid/.gitattributes b/assets/styles/vendor/simple-grid/.gitattributes new file mode 100755 index 0000000..e394296 --- /dev/null +++ b/assets/styles/vendor/simple-grid/.gitattributes @@ -0,0 +1 @@ +README export-ignore diff --git a/assets/styles/vendor/simple-grid/README.md b/assets/styles/vendor/simple-grid/README.md new file mode 100755 index 0000000..82eef37 --- /dev/null +++ b/assets/styles/vendor/simple-grid/README.md @@ -0,0 +1,122 @@ +# Just a simple grid + +Based on existing grid systems, such as [Twitter Bootstrap Grid System](http://getbootstrap.com/css/#grid) and [csswizardry-grids](http://csswizardry.com/csswizardry-grids/), this is a fluid, flexible and responsive grid that can be scaled up to an arbitrary size, within the `$max-width` of your main `.container`. You also can easily and infinitly nest columns and rows, so you can build out complicated layouts without creating a lot of new custom elements. This is a grid system generated by Sass and it is based on [BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). + +## Setup + +The only thing you need to do to start building your grid is to adjust the number of `$grid-columns`, the desired `$gutter` and the main container `$max-width`. + +## How it works + +Grid systems, as you may know, are used for creating page layouts through a series of rows and columns that will host your content: + +* Your `.row` element(s) must be placed within a `.container`, with a fixed `$max-width` for proper alignment. This elements will split up your page horizontally and will contain groups of `.col`. +* Your content should be placed within the `.col` blocks, and only `.col` may be immediate children of `.row`. +* You can nest `.row` and `.col` how many times you need, since you follow the previous standard. +* Your `.col` width is defined by specifying the number of a single grid columns, in your total `$grid-columns`. For example, a `.col--*-4` will represent a width of 4 columns in your `$grid-columns` total. +* To control your responsive grid, there are available three class prefixes: `.col--sm-*` for small devices, `.col-md-*` for medium devices and `.col--lg-*` for large devices. All together, in your `.col` element, it will make your grid respond to each one of your default media queries. +* Finaly, you have the option to move columns to the right using `.col--*-offset-*` classes. These classes increase the left margin of a column by the number of columns you want. For example, `.col--*-offset-4` will push `.col-*-4` over four columns. + + +## Markup + +### Basic usage +Simple column set - `
` - inside a `.row`. + +```html +
+
+

Col 1

+
+
+
+
+

Col 2

+
+
+

Col 3

+
+
+
+
+

Col 4

+
+
+

Col 5

+
+
+

Col 6

+
+
+
+
+

Col 7

+
+
+

Col 8

+
+
+``` + +### Offsetting columns +Increase the left margin of a column by the number of columns you want, along with the responsive class prefixes, if you need. + +```html +
+
+

Col 9 with offset 0

+
+
+

Col 10 with offset 4

+
+
+
+
+

Col 11 with offset 3

+
+
+

Col 12 with offset 6

+
+
+
+
+

Col 13 with offset 3

+
+
+``` + +### Nesting columns +To nest your content, add a new `.row` inside a `.col`, and set of `.col-ld-*` columns within an existing `.col-ld-*` column. Nested rows should include a set of columns that add up to 12 or less. + +```html +
+
+

Col 14

+
+
+

Nested col 14.1

+
+
+

Nested col 14.2

+
+
+
+
+``` + +### Gutterless columns +To remove all the gutters from your columns just add the class `.row--gutterless` to your `.row` element. + +```html +
+
+

Col 15

+
+
+

Col 16

+
+
+``` + +## Demo +Check out the demo and play around on [Code Pen](http://codepen.io/pedroreis/pen/ituho) and/or check the compiled CSS on [SassMeister](http://sassmeister.com/gist/c6368fc9a239e1798fcd). diff --git a/assets/styles/vendor/simple-grid/_defaults.scss b/assets/styles/vendor/simple-grid/_defaults.scss new file mode 100755 index 0000000..05a566b --- /dev/null +++ b/assets/styles/vendor/simple-grid/_defaults.scss @@ -0,0 +1,35 @@ +/** + * Space between columns + */ + +$grid-gutter: 20px !default; + + +/** + * Max width of container + */ + +$grid-max-width: 1200px + ($grid-gutter * 2) !default; + + +/** + * Number of total columns + */ + +$grid-columns: 12 !default; + + +/** + * Breakpoints + */ + +$breakpoint-lg: 1200px !default; +$breakpoint-md: 768px !default; +$breakpoint-sm: 480px !default; + +$breakpoints: ( + 'lg' '(min-width: ' + $breakpoint-lg + ')', + 'md' '(min-width: ' + $breakpoint-md + ') and (max-width: ' + ($breakpoint-lg - 1) + ')', + 'sm' '(max-width:' + ($breakpoint-md - 1) + ')', + 'xs' '(max-width: ' + $breakpoint-sm + ')' +) !default; diff --git a/assets/styles/vendor/simple-grid/_mixins.scss b/assets/styles/vendor/simple-grid/_mixins.scss new file mode 100755 index 0000000..6782568 --- /dev/null +++ b/assets/styles/vendor/simple-grid/_mixins.scss @@ -0,0 +1,38 @@ +/** + * Grid loop mixin + */ + +@mixin grid-loop($name){ + @for $i from 0 through $grid-columns { + @if $i != 0 { + .col--#{$name}-#{$i} { + width: percentage($i/$grid-columns); + .row--flex & { + flex-basis: percentage($i/$grid-columns); + max-width: percentage($i/$grid-columns); + width: auto; + float: none; + } + } + } + .col--#{$name}-offset-#{$i} { + margin-left: percentage($i/$grid-columns); + } + } +} + + +/** + * Clearfix + */ + +@mixin clearfix { + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + } +} diff --git a/assets/styles/vendor/simple-grid/simple-grid.scss b/assets/styles/vendor/simple-grid/simple-grid.scss new file mode 100755 index 0000000..5098b71 --- /dev/null +++ b/assets/styles/vendor/simple-grid/simple-grid.scss @@ -0,0 +1,58 @@ +/** + * Default variables and helper mixins + */ + +@import + 'defaults', + 'mixins'; + + +/** + * Grid scaffolding + */ + +.container { + @include clearfix; + max-width: $grid-max-width; + margin: 0 auto; + padding: 0 $grid-gutter; +} + +.row { + list-style: none; + margin-left: -$grid-gutter; + &:not(.row--flex) { + @include clearfix; + } + &.row--gutterless { + margin-left: 0; + } + &.row--flex { + display: flex; + flex-wrap: wrap; + } +} + +.col { + float: left; + padding-left: $grid-gutter; + box-sizing: border-box; + .row--gutterless & { + padding-left: 0; + } +} + + + +/** + * Columns generator + */ + +@each $breakpoint in $breakpoints { + $name: nth($breakpoint, 1); + $declaration: nth($breakpoint, 2); + + @media only screen and #{$declaration} { + @include grid-loop($name); + } +} diff --git a/config.barebones.js b/config.barebones.js new file mode 100755 index 0000000..0daa27b --- /dev/null +++ b/config.barebones.js @@ -0,0 +1,35 @@ +/** + * Export configuration that is used in gulpfile + * + * For scripts and styles, each file will be a separate bundle + * + * @param base - Base configuration + * @param scripts - Array of script files to create bundles from + */ +export default { + /** + * Base + */ + base: { + src: './assets', + public: './', + }, + + /** + * Scripts + * + * Add path continuing after 'config.src' + */ + scripts: [ + 'scripts.js', + ], + + /** + * Additional styles + * + * For external stylesheets most likely outside of assets folder + */ + styles: [ + // './example.scss', - in the root barebones folder + ], +}; diff --git a/css/styles.min.css b/css/styles.min.css new file mode 100755 index 0000000..a569d97 --- /dev/null +++ b/css/styles.min.css @@ -0,0 +1 @@ +.container{max-width:1200px;margin:0 auto;padding:0 24px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}.row{list-style:none;margin-left:-24px}.row:not(.row--flex):before,.row:not(.row--flex):after{content:" ";display:table}.row:not(.row--flex):after{clear:both}.row.row--gutterless{margin-left:0}.row.row--flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.col{float:left;padding-left:24px;-webkit-box-sizing:border-box;box-sizing:border-box}.row--gutterless .col{padding-left:0}@media only screen and (min-width: 1200px){.col--lg-offset-0{margin-left:0%}.col--lg-1{width:8.33333%}.row--flex .col--lg-1{-webkit-flex-basis:8.33333%;-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%;width:auto;float:none}.col--lg-offset-1{margin-left:8.33333%}.col--lg-2{width:16.66667%}.row--flex .col--lg-2{-webkit-flex-basis:16.66667%;-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%;width:auto;float:none}.col--lg-offset-2{margin-left:16.66667%}.col--lg-3{width:25%}.row--flex .col--lg-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%;width:auto;float:none}.col--lg-offset-3{margin-left:25%}.col--lg-4{width:33.33333%}.row--flex .col--lg-4{-webkit-flex-basis:33.33333%;-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%;width:auto;float:none}.col--lg-offset-4{margin-left:33.33333%}.col--lg-5{width:41.66667%}.row--flex .col--lg-5{-webkit-flex-basis:41.66667%;-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%;width:auto;float:none}.col--lg-offset-5{margin-left:41.66667%}.col--lg-6{width:50%}.row--flex .col--lg-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;width:auto;float:none}.col--lg-offset-6{margin-left:50%}.col--lg-7{width:58.33333%}.row--flex .col--lg-7{-webkit-flex-basis:58.33333%;-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%;width:auto;float:none}.col--lg-offset-7{margin-left:58.33333%}.col--lg-8{width:66.66667%}.row--flex .col--lg-8{-webkit-flex-basis:66.66667%;-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%;width:auto;float:none}.col--lg-offset-8{margin-left:66.66667%}.col--lg-9{width:75%}.row--flex .col--lg-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%;width:auto;float:none}.col--lg-offset-9{margin-left:75%}.col--lg-10{width:83.33333%}.row--flex .col--lg-10{-webkit-flex-basis:83.33333%;-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%;width:auto;float:none}.col--lg-offset-10{margin-left:83.33333%}.col--lg-11{width:91.66667%}.row--flex .col--lg-11{-webkit-flex-basis:91.66667%;-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%;width:auto;float:none}.col--lg-offset-11{margin-left:91.66667%}.col--lg-12{width:100%}.row--flex .col--lg-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;width:auto;float:none}.col--lg-offset-12{margin-left:100%}}@media only screen and (min-width: 768px) and (max-width: 1199px){.col--md-offset-0{margin-left:0%}.col--md-1{width:8.33333%}.row--flex .col--md-1{-webkit-flex-basis:8.33333%;-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%;width:auto;float:none}.col--md-offset-1{margin-left:8.33333%}.col--md-2{width:16.66667%}.row--flex .col--md-2{-webkit-flex-basis:16.66667%;-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%;width:auto;float:none}.col--md-offset-2{margin-left:16.66667%}.col--md-3{width:25%}.row--flex .col--md-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%;width:auto;float:none}.col--md-offset-3{margin-left:25%}.col--md-4{width:33.33333%}.row--flex .col--md-4{-webkit-flex-basis:33.33333%;-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%;width:auto;float:none}.col--md-offset-4{margin-left:33.33333%}.col--md-5{width:41.66667%}.row--flex .col--md-5{-webkit-flex-basis:41.66667%;-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%;width:auto;float:none}.col--md-offset-5{margin-left:41.66667%}.col--md-6{width:50%}.row--flex .col--md-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;width:auto;float:none}.col--md-offset-6{margin-left:50%}.col--md-7{width:58.33333%}.row--flex .col--md-7{-webkit-flex-basis:58.33333%;-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%;width:auto;float:none}.col--md-offset-7{margin-left:58.33333%}.col--md-8{width:66.66667%}.row--flex .col--md-8{-webkit-flex-basis:66.66667%;-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%;width:auto;float:none}.col--md-offset-8{margin-left:66.66667%}.col--md-9{width:75%}.row--flex .col--md-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%;width:auto;float:none}.col--md-offset-9{margin-left:75%}.col--md-10{width:83.33333%}.row--flex .col--md-10{-webkit-flex-basis:83.33333%;-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%;width:auto;float:none}.col--md-offset-10{margin-left:83.33333%}.col--md-11{width:91.66667%}.row--flex .col--md-11{-webkit-flex-basis:91.66667%;-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%;width:auto;float:none}.col--md-offset-11{margin-left:91.66667%}.col--md-12{width:100%}.row--flex .col--md-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;width:auto;float:none}.col--md-offset-12{margin-left:100%}}@media only screen and (max-width: 767px){.col--sm-offset-0{margin-left:0%}.col--sm-1{width:8.33333%}.row--flex .col--sm-1{-webkit-flex-basis:8.33333%;-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%;width:auto;float:none}.col--sm-offset-1{margin-left:8.33333%}.col--sm-2{width:16.66667%}.row--flex .col--sm-2{-webkit-flex-basis:16.66667%;-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%;width:auto;float:none}.col--sm-offset-2{margin-left:16.66667%}.col--sm-3{width:25%}.row--flex .col--sm-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%;width:auto;float:none}.col--sm-offset-3{margin-left:25%}.col--sm-4{width:33.33333%}.row--flex .col--sm-4{-webkit-flex-basis:33.33333%;-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%;width:auto;float:none}.col--sm-offset-4{margin-left:33.33333%}.col--sm-5{width:41.66667%}.row--flex .col--sm-5{-webkit-flex-basis:41.66667%;-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%;width:auto;float:none}.col--sm-offset-5{margin-left:41.66667%}.col--sm-6{width:50%}.row--flex .col--sm-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;width:auto;float:none}.col--sm-offset-6{margin-left:50%}.col--sm-7{width:58.33333%}.row--flex .col--sm-7{-webkit-flex-basis:58.33333%;-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%;width:auto;float:none}.col--sm-offset-7{margin-left:58.33333%}.col--sm-8{width:66.66667%}.row--flex .col--sm-8{-webkit-flex-basis:66.66667%;-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%;width:auto;float:none}.col--sm-offset-8{margin-left:66.66667%}.col--sm-9{width:75%}.row--flex .col--sm-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%;width:auto;float:none}.col--sm-offset-9{margin-left:75%}.col--sm-10{width:83.33333%}.row--flex .col--sm-10{-webkit-flex-basis:83.33333%;-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%;width:auto;float:none}.col--sm-offset-10{margin-left:83.33333%}.col--sm-11{width:91.66667%}.row--flex .col--sm-11{-webkit-flex-basis:91.66667%;-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%;width:auto;float:none}.col--sm-offset-11{margin-left:91.66667%}.col--sm-12{width:100%}.row--flex .col--sm-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;width:auto;float:none}.col--sm-offset-12{margin-left:100%}}@media only screen and (max-width: 480px){.col--xs-offset-0{margin-left:0%}.col--xs-1{width:8.33333%}.row--flex .col--xs-1{-webkit-flex-basis:8.33333%;-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%;width:auto;float:none}.col--xs-offset-1{margin-left:8.33333%}.col--xs-2{width:16.66667%}.row--flex .col--xs-2{-webkit-flex-basis:16.66667%;-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%;width:auto;float:none}.col--xs-offset-2{margin-left:16.66667%}.col--xs-3{width:25%}.row--flex .col--xs-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%;width:auto;float:none}.col--xs-offset-3{margin-left:25%}.col--xs-4{width:33.33333%}.row--flex .col--xs-4{-webkit-flex-basis:33.33333%;-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%;width:auto;float:none}.col--xs-offset-4{margin-left:33.33333%}.col--xs-5{width:41.66667%}.row--flex .col--xs-5{-webkit-flex-basis:41.66667%;-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%;width:auto;float:none}.col--xs-offset-5{margin-left:41.66667%}.col--xs-6{width:50%}.row--flex .col--xs-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;width:auto;float:none}.col--xs-offset-6{margin-left:50%}.col--xs-7{width:58.33333%}.row--flex .col--xs-7{-webkit-flex-basis:58.33333%;-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%;width:auto;float:none}.col--xs-offset-7{margin-left:58.33333%}.col--xs-8{width:66.66667%}.row--flex .col--xs-8{-webkit-flex-basis:66.66667%;-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%;width:auto;float:none}.col--xs-offset-8{margin-left:66.66667%}.col--xs-9{width:75%}.row--flex .col--xs-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%;width:auto;float:none}.col--xs-offset-9{margin-left:75%}.col--xs-10{width:83.33333%}.row--flex .col--xs-10{-webkit-flex-basis:83.33333%;-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%;width:auto;float:none}.col--xs-offset-10{margin-left:83.33333%}.col--xs-11{width:91.66667%}.row--flex .col--xs-11{-webkit-flex-basis:91.66667%;-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%;width:auto;float:none}.col--xs-offset-11{margin-left:91.66667%}.col--xs-12{width:100%}.row--flex .col--xs-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;width:auto;float:none}.col--xs-offset-12{margin-left:100%}}*{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;font:inherit;margin:0;padding:0}html{background-color:white;font-size:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}input,select,textarea,button{color:inherit;display:inline-block}input[disabled],select[disabled],textarea[disabled],button[disabled]{cursor:not-allowed}button{cursor:pointer}table{border-collapse:collapse;border-spacing:0}table th,table td{text-align:left}@media only screen and (min-width: 1200px){.visible-lg{display:block !important}}@media only screen and (min-width: 1200px){.hidden-lg{display:none !important}}@media only screen and (min-width: 768px) and (max-width: 1199px){.visible-md{display:block !important}}@media only screen and (min-width: 768px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (max-width: 767px){.visible-sm{display:block !important}}@media only screen and (max-width: 767px){.hidden-sm{display:none !important}}@media only screen and (max-width: 480px){.visible-xs{display:block !important}}@media only screen and (max-width: 480px){.hidden-xs{display:none !important}}.alignleft,.float-left{float:left}img .alignleft,img .float-left{margin-right:24px}.alignright,.float-right{float:right}img .alignright,img .float-right{margin-left:24px}.aligncenter,.float-center{display:block;margin-left:auto;margin-right:auto}img .aligncenter,img .float-center{margin-bottom:24px}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.align-text-left{text-align:left}.align-text-right{text-align:right}.align-text-center{text-align:center}.visible-on-mobile{display:none !important}@media screen and (max-width: 480px){.visible-on-mobile{display:block !important}}.visible-on-tablet{display:none !important}@media screen and (max-width: 768px){.visible-on-tablet{display:block !important}}@media screen and (max-width: 480px){.visible-on-tablet{display:none !important}}@media screen and (max-width: 768px){.visible-on-desktop{display:none !important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}body{color:#444;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;font-size:16px;font-size:1rem}h1,h2,h3,h4,h5,h6,p,hr,ul,ol,dl{margin-bottom:24px}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,p:last-child,hr:last-child,ul:last-child,ol:last-child,dl:last-child{margin-bottom:0}a{color:#444;text-decoration:none}a:hover{color:#444;text-decoration:underline}a[href^="tel"]{font-size:inherit;font-family:inherit;color:inherit;text-decoration:none;font-style:inherit}hr{height:1px;background-color:#444}img{max-width:100%;height:auto;vertical-align:top}.is-fluid{display:block;width:100%;height:auto}*:focus{outline:0}input,select,textarea{background-color:#fff;border:solid 1px #444;-webkit-border-radius:0;border-radius:0;color:#444;line-height:36px;height:36px;padding:0 12px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;line-height:normal;height:auto;width:auto}input[type="file"]{line-height:normal;height:auto;padding:6px 12px}input[type="submit"]{-webkit-border-radius:0;border-radius:0}input[disabled]{background-color:whitesmoke;cursor:not-allowed}select{line-height:normal;padding:0;padding-left:12px}textarea{min-height:96px;overflow:auto;vertical-align:top;resize:vertical}.form--inline .form__group{display:inline-block}.form .form__group{display:block;margin-bottom:24px}.form .form__group .form__label{display:block;margin-bottom:12px}ul,ol{margin-left:24px}li>ul,li>ol{margin-bottom:0}.list--unstyled{margin-left:0;list-style:none}h1,h2,h3,h4,h5,h6,strong{font-weight:bold}em{font-style:italic}small{font-size:.75em}.btn{background-color:#444;color:#fff;border:1px solid transparent;display:inline-block;padding:6px 24px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:auto;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}.btn::-moz-focus-inner{border:0;padding:0}.btn:hover{text-decoration:none;background-color:#fff;color:#444;border-color:#444}.btn.is-disabled,.btn:disabled{pointer-events:none;opacity:.65}.btn--inverse{background-color:#fff;color:#444;border:1px solid #444}.btn--inverse:hover{background-color:#444;color:#fff;border-color:transparent}.btn--block{display:block;width:100%}.btn--block+.btn--block{margin-top:6px}.btn--link{background-color:transparent;color:#444}.nav-burger{position:fixed;top:24px;right:24px;z-index:550;-webkit-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}.nav-burger__line{width:35px;height:3px;background-color:#444;display:none;margin:8px auto;-webkit-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}@media screen and (max-width: 768px){.nav-burger__line{display:block}}.nav-burger.open .nav-burger__line:nth-child(2){opacity:0}.nav-burger.open .nav-burger__line:nth-child(1){-webkit-transform:translateY(11px) rotate(45deg);-ms-transform:translateY(11px) rotate(45deg);transform:translateY(11px) rotate(45deg)}.nav-burger.open .nav-burger__line:nth-child(3){-webkit-transform:translateY(-11px) rotate(-45deg);-ms-transform:translateY(-11px) rotate(-45deg);transform:translateY(-11px) rotate(-45deg)}.nav{list-style:none;margin:0}.nav>li{display:inline-block;margin-right:24px}.nav>li:last-child{margin-right:0}.nav>li>a{display:block}@media screen and (max-width: 768px){.nav--header{position:fixed;top:0;left:0;visibility:hidden;width:0;height:100%;margin:0;-webkit-transition:opacity 500ms ease;-o-transition:opacity 500ms ease;transition:opacity 500ms ease;-webkit-transition:opacity .35s ease, visibility .35s ease, width .35s ease;-o-transition:opacity .35s ease, visibility .35s ease, width .35s ease;transition:opacity .35s ease, visibility .35s ease, width .35s ease;text-align:center;opacity:0;background:#fff;-webkit-overflow-scrolling:touch}.nav--header.open{z-index:500;visibility:visible;width:100%;opacity:1}.nav--header.open ul{position:absolute;top:50%;left:0;overflow:auto;width:100%;max-height:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-touch-callout:none;-webkit-overflow-scrolling:touch}.nav--header.open ul>li{width:100%;margin:0}}.alert{padding:24px;margin-bottom:24px;border:1px solid transparent}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:24px}.alert.alert--success{color:#5CB85C;border-color:#5CB85C}.alert.alert--info{color:#444;border-color:#444}.alert.alert--warning{color:#F0AD4E;border-color:#F0AD4E}.alert.alert--danger{color:#D9534F;border-color:#D9534F} diff --git a/footer.php b/footer.php index 3be940b..f67f32e 100755 --- a/footer.php +++ b/footer.php @@ -1,7 +1,9 @@ diff --git a/functions.php b/functions.php old mode 100644 new mode 100755 index bfff09d..9bbb56c --- a/functions.php +++ b/functions.php @@ -4,20 +4,20 @@ * Custom functions / External files */ -require_once 'functions/example.php'; - +require_once 'includes/custom-functions.php'; /** * Add support for useful stuff */ -if (function_exists('add_theme_support')) { +if ( function_exists( 'add_theme_support' ) ) { + // Add support for document title tag - add_theme_support('title-tag'); + add_theme_support( 'title-tag' ); // Add Thumbnail Theme Support - add_theme_support('post-thumbnails'); + add_theme_support( 'post-thumbnails' ); // add_image_size( 'custom-size', 700, 200, true ); // Add Support for post formats @@ -25,20 +25,21 @@ if (function_exists('add_theme_support')) { // add_post_type_support( 'page', 'excerpt' ); // Localisation Support - load_theme_textdomain('barebones', get_template_directory() . '/languages'); + load_theme_textdomain( 'barebones', get_template_directory() . '/languages' ); } +/** + * Hide admin bar + */ + + add_filter( 'show_admin_bar', '__return_false' ); + /** * Remove junk */ -define('ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS', true); -define('ICL_DONT_LOAD_LANGUAGES_JS', true); - -add_filter('show_admin_bar', '__return_false'); - remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'wp_generator'); @@ -49,53 +50,61 @@ remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0); remove_action('wp_head', 'print_emoji_detection_script', 7); remove_action('wp_print_styles', 'print_emoji_styles'); -function barebones_remove_comments_rss($for_comments) -{ + +/** + * Remove comments feed + * + * @return void + */ + +function barebones_post_comments_feed_link() { return; } -add_filter('post_comments_feed_link', 'barebones_remove_comments_rss'); - +add_filter('post_comments_feed_link', 'barebones_post_comments_feed_link'); /** - * jQuery the right way + * Enqueue scripts */ -function barebones_scripts() -{ - /* - * For IE8 to play nice, you'll need to include your CSS here, for example: - */ +function barebones_enqueue_scripts() { // wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' ); - // wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); - wp_deregister_script('jquery'); - wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3', true); - wp_enqueue_script('jquery'); - wp_enqueue_script('script', get_stylesheet_directory_uri() . '/js/script.min.js?' . filemtime(get_stylesheet_directory() . '/js/script.min.js'), ['jquery'], null, true); + // wp_enqueue_style( 'icons', '//use.fontawesome.com/releases/v5.0.10/css/all.css' ); + wp_enqueue_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.min.js?' . filemtime( get_stylesheet_directory() . '/js/scripts.min.js' ), [], null, true ); } -add_action('wp_enqueue_scripts', 'barebones_scripts'); - +add_action( 'wp_enqueue_scripts', 'barebones_enqueue_scripts' ); /** - * Nav menus + * Register nav menus + * + * @return void */ -if (function_exists('register_nav_menus')) { +function barebones_register_nav_menus() { register_nav_menus([ 'header' => 'Header', - 'footer' => 'Footer' + 'footer' => 'Footer', ]); } -function barebones_nav_menu_args($args = '') -{ - $args['container'] = false; +add_action( 'after_setup_theme', 'barebones_register_nav_menus', 0 ); + + +/** + * Nav menu args + * + * @param array $args + * @return void + */ + +function barebones_nav_menu_args( $args ) { + $args['container'] = false; $args['container_class'] = false; - $args['menu_id'] = false; - $args['items_wrap'] = ''; + $args['menu_id'] = false; + $args['items_wrap'] = ''; return $args; } @@ -103,50 +112,31 @@ function barebones_nav_menu_args($args = '') add_filter('wp_nav_menu_args', 'barebones_nav_menu_args'); - /** - * Email + * Button Shortcode + * + * @param array $atts + * @param string $content + * @return void */ -function barebones_mail_from($email) -{ - return get_option('admin_email'); -} - -add_filter('wp_mail_from', 'barebones_mail_from'); - - -function barebones_mail_from_name($name) -{ - return get_bloginfo('name'); -} - -add_filter('wp_mail_from_name', 'barebones_mail_from_name'); - - - -/** - * Shortcodes ([button] shortcode included) - */ - -function button_shortcode($atts, $content = null) -{ - $atts['class'] = isset($atts['class']) ? $atts['class'] : 'btn'; - +function barebones_button_shortcode( $atts, $content = null ) { + $atts['class'] = isset($atts['class']) ? $atts['class'] : 'btn'; return '' . $content . ''; } -add_shortcode('button', 'button_shortcode'); - +add_shortcode('button', 'barebones_button_shortcode'); /** * TinyMCE + * + * @param array $buttons + * @return void */ -function barebones_mce_buttons_2($buttons) -{ - array_unshift($buttons, 'styleselect'); +function barebones_mce_buttons_2( $buttons ) { + array_unshift( $buttons, 'styleselect' ); $buttons[] = 'hr'; return $buttons; @@ -155,13 +145,34 @@ function barebones_mce_buttons_2($buttons) add_filter('mce_buttons_2', 'barebones_mce_buttons_2'); -function barebones_tiny_mce_before_init($settings) -{ +/** + * TinyMCE styling + * + * @param array $settings + * @return void + */ + +function barebones_tiny_mce_before_init( $settings ) { $style_formats = [ // [ // 'title' => '', // 'selector' => '', // 'classes' => '' + // ], + // [ + // 'title' => 'Buttons', + // 'items' => [ + // [ + // 'title' => 'Primary', + // 'selector' => 'a', + // 'classes' => 'btn btn--primary' + // ], + // [ + // 'title' => 'Secondary', + // 'selector' => 'a', + // 'classes' => 'btn btn--secondary' + // ] + // ] // ] ]; @@ -173,18 +184,41 @@ function barebones_tiny_mce_before_init($settings) add_filter('tiny_mce_before_init', 'barebones_tiny_mce_before_init'); + /** * Get post thumbnail url - * @param string $size Size of the returned image - * @param int $post_id post id - * @param boolean $icon if no image found, display icon + * + * @param string $size + * @param boolean $post_id + * @param boolean $icon + * @return void */ -function get_post_thumbnail_url( $size = 'full', $post_id = false, $icon = false ) -{ - if(!$post_id) { + +function get_post_thumbnail_url( $size = 'full', $post_id = false, $icon = false ) { + if ( ! $post_id ) { $post_id = get_the_ID(); } - $thumb_url_array = wp_get_attachment_image_src(get_post_thumbnail_id( $post_id ), $size, $icon); + $thumb_url_array = wp_get_attachment_image_src( + get_post_thumbnail_id( $post_id ), $size, $icon + ); return $thumb_url_array[0]; } + + +/** + * Add Front Page edit link to admin Pages menu + */ + +function front_page_on_pages_menu() { + global $submenu; + if ( get_option( 'page_on_front' ) ) { + $submenu['edit.php?post_type=page'][501] = array( + __( 'Front Page', 'barebones' ), + 'manage_options', + get_edit_post_link( get_option( 'page_on_front' ) ) + ); + } +} + +add_action( 'admin_menu' , 'front_page_on_pages_menu' ); diff --git a/functions/example.php b/functions/example.php deleted file mode 100644 index 69a6c3b..0000000 --- a/functions/example.php +++ /dev/null @@ -1,3 +0,0 @@ - ( + gulp.src([`${config.base.public}/css`, `${config.base.public}/js`], { + read: false, + }) + .pipe(clean()) +)); + +/** + * Styles + */ +gulp.task('styles', () => { + const stylesheets = config.styles; + stylesheets.push(`${config.base.src}/styles/*.scss`); + + gulp.src(stylesheets) + .pipe(gulpif(!production, sourcemaps.init())) + .pipe(sass({ + outputStyle: production ? 'compressed' : 'nested', + }).on('error', (err) => { + notification('Failed to compile styles. 😱', 'error'); + log(err.stack); + error = true; + })) + .pipe(autoprefixer({ + browsers: ['last 10 versions'], + })) + .pipe(rename({ + suffix: '.min', + })) + .pipe(gulpif(!production, sourcemaps.write('.'))) + .pipe(gulp.dest(`${config.base.public}/css`)); +}); + +const roll = (entry, dest) => { + let env = 'development'; + if (production) { + env = 'production'; + } + + return rollup({ + entry, + plugins: [ + multiEntry(), + buble(), + nodeResolve({ + browser: true, + main: true, + jsnext: true, + }), + commonjs({ + include: [ + 'node_modules/**', + `${config.base.src}/**`, + ], + }), + json(), + replace({ + 'process.env.NODE_ENV': JSON.stringify(env), + }), + production ? uglify({}, minify) : '', + ], + }).then((bundle) => { + bundle.write({ + format: 'iife', + moduleName: 'BarebonesBundle', + sourceMap: !production, + dest, + }); + }).catch((err) => { + notification('Failed to compile scripts. 😱', 'error'); + log(err.stack); + error = true; + }); +}; + +gulp.task('scripts', (cb) => { + if (config.scripts.length) { + config.scripts.forEach((filePath) => { + const formattedPath = filePath.replace(/^\/|\/$/g, ''); // remove leading forward slash + const entry = `${config.base.src}/scripts/${formattedPath}`; + const dest = `${config.base.public}/js/${formattedPath.replace('.js', '.min.js')}`; + // regex to remove duplicate forward slashes + roll(entry.replace(/([^:]\/)\/+/g, '$1'), dest.replace(/([^:]\/)\/+/g, '$1')); + }); + } + cb(); +}); + +/** + * Watch + */ +gulp.task('watch-files', tasks, () => { + gulp.watch(`${config.base.src}/styles/**/*.scss`, ['styles']); + gulp.watch(`${config.base.src}/scripts/**/*.js`, ['scripts']); + gulp.watch(`${config.base.src}/images/**/*.*`, ['images']); +}); + +/** + * Images + */ +gulp.task('images', (cb) => { + // hadle all images that are not svg + gulp.src(`${config.base.src}/images/**/*.*`) + .pipe(imagemin({ + progressive: true, + svgoPlugins: [{ + removeViewBox: false, + }], + })) + .pipe(gulp.dest(`${config.base.public}/img`)) + .on('end', () => cb()); +}); + +/** + * Main Tasks + */ +gulp.task('watch', cb => ( + runSequence('clean', () => { + runSequence(tasks, 'watch-files', () => { + if (!error) { + notification('Watching files... 👀'); + } + cb(); + }); + }) +)); + +gulp.task('build', (cb) => { + production = true; + + runSequence('clean', () => { + runSequence(tasks, () => { + if (!error) { + notification('Build complete! 🍻'); + cb(); + } + }); + }); +}); + +gulp.task('default', cb => ( + runSequence('clean', () => { + runSequence(tasks, () => { + cb(); + }); + }) +)); diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index b649bdf..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,29 +0,0 @@ -// Notifications (comment out to disable notifications) -// process.env.DISABLE_NOTIFIER = true; - -var gulp = require('gulp'); -var elixir = require('laravel-elixir'); - -// Assets path -elixir.config.assetsPath = 'assets'; - -// Make autoprefixer support older browsers -elixir.config.css.autoprefix.options.browsers = ['last 15 versions']; - -// Imagemin -var Task = elixir.Task; -elixir.extend('imagemin', function(src, dest) { - new Task('imagemin', function() { - var gulpImagemin = require('gulp-imagemin'); - return gulp.src(elixir.config.assetsPath + src) - .pipe(gulpImagemin()) - .pipe(gulp.dest(dest)); - }).watch(elixir.config.assetsPath + src); -}); - -// Run elixir tasks -elixir(function(mix) { - mix.sass('barebones.scss', 'style.css') - .scripts(['script.js'], 'js/script.min.js') - .imagemin('/images/**/*', './img'); -}); diff --git a/header.php b/header.php index 5cbcf62..ff6bf16 100755 --- a/header.php +++ b/header.php @@ -7,7 +7,8 @@ - + +