diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..ea61312 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["es2015", "stage-2"], + "comments": false, +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 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/.gitignore b/.gitignore index 51d5bd0..4dfe913 100644 --- 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 \ No newline at end of file +**/*.map +yarn.lock diff --git a/.gitmodules b/.gitmodules index 180aa8f..2b2cb88 100644 --- 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 index 3c2e384..42b09d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,15 +1,3 @@ # barebones changelog - -## 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 index 95c9e9b..9b71eb6 100644 --- a/README.md +++ b/README.md @@ -5,17 +5,17 @@ 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. ## Installation @@ -31,23 +31,26 @@ 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 @@ -58,11 +61,20 @@ Then run: *to watch* - gulp --production + gulp images -*to minify* +*to optimise images* -This will execute all the Gulp tasks on the gulpfile.js. + gulp build + +*to create a build (minification, removes map files and comments)* + +This will execute all the Gulp tasks on the gulpfile.babel.js. + +### Images + +Drop all your images into assets/imagess. 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,21 @@ 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 + +*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/.DS_Store b/assets/.DS_Store deleted file mode 100644 index 5008ddf..0000000 Binary files a/assets/.DS_Store and /dev/null 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 100644 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 100644 index 0000000..6575236 --- /dev/null +++ b/assets/images/logo.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/js/bootstrap.js b/assets/js/bootstrap.js deleted file mode 100644 index b58532e..0000000 --- a/assets/js/bootstrap.js +++ /dev/null @@ -1 +0,0 @@ -window.$ = window.jQuery = require('jquery'); diff --git a/assets/js/script.js b/assets/js/script.js deleted file mode 100644 index f7e4403..0000000 --- a/assets/js/script.js +++ /dev/null @@ -1,3 +0,0 @@ -require('./bootstrap'); - -console.log( 'Barebones rocks! You are running jQuery version: ' + $.fn.jquery ); diff --git a/assets/sass/.DS_Store b/assets/sass/.DS_Store deleted file mode 100644 index fcc4cd6..0000000 Binary files a/assets/sass/.DS_Store and /dev/null differ 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/utils/.DS_Store b/assets/sass/utils/.DS_Store deleted file mode 100644 index 5008ddf..0000000 Binary files a/assets/sass/utils/.DS_Store and /dev/null differ 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/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/scripts.js b/assets/scripts/scripts.js new file mode 100644 index 0000000..65fd7fb --- /dev/null +++ b/assets/scripts/scripts.js @@ -0,0 +1,3 @@ +import $ from 'jquery'; + +console.log($); diff --git a/assets/sass/base/_base.scss b/assets/styles/base/_base.scss similarity index 100% rename from assets/sass/base/_base.scss rename to assets/styles/base/_base.scss diff --git a/assets/sass/base/_fonts.scss b/assets/styles/base/_fonts.scss similarity index 100% rename from assets/sass/base/_fonts.scss rename to assets/styles/base/_fonts.scss diff --git a/assets/sass/base/_forms.scss b/assets/styles/base/_forms.scss similarity index 100% rename from assets/sass/base/_forms.scss rename to assets/styles/base/_forms.scss diff --git a/assets/sass/base/_images.scss b/assets/styles/base/_images.scss 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 similarity index 100% rename from assets/sass/base/_lists.scss rename to assets/styles/base/_lists.scss diff --git a/assets/sass/base/_typography.scss b/assets/styles/base/_typography.scss similarity index 100% rename from assets/sass/base/_typography.scss rename to assets/styles/base/_typography.scss diff --git a/assets/sass/components/_alerts.scss b/assets/styles/components/_alerts.scss similarity index 100% rename from assets/sass/components/_alerts.scss rename to assets/styles/components/_alerts.scss diff --git a/assets/sass/components/_buttons.scss b/assets/styles/components/_buttons.scss similarity index 100% rename from assets/sass/components/_buttons.scss rename to assets/styles/components/_buttons.scss diff --git a/assets/styles/components/_logo.scss b/assets/styles/components/_logo.scss new file mode 100644 index 0000000..8bf6826 --- /dev/null +++ b/assets/styles/components/_logo.scss @@ -0,0 +1,4 @@ +.logo { + width: 250px; + height: 41px; +} diff --git a/assets/sass/components/_nav.scss b/assets/styles/components/_nav.scss similarity index 100% rename from assets/sass/components/_nav.scss rename to assets/styles/components/_nav.scss diff --git a/assets/sass/config/_mixins.scss b/assets/styles/config/_mixins.scss similarity index 100% rename from assets/sass/config/_mixins.scss rename to assets/styles/config/_mixins.scss diff --git a/assets/sass/config/_variables.scss b/assets/styles/config/_variables.scss similarity index 100% rename from assets/sass/config/_variables.scss rename to assets/styles/config/_variables.scss diff --git a/assets/styles/core.scss b/assets/styles/core.scss new file mode 100755 index 0000000..f33782d --- /dev/null +++ b/assets/styles/core.scss @@ -0,0 +1,20 @@ +@import 'config/variables'; +@import 'config/mixins'; + +// Vendors +@import 'vendor/simple-grid/simple-grid'; + +// Utilities +@import 'utils/reset'; +@import 'utils/responsive'; +@import 'utils/helpers'; + +// Base stuff +@import 'base/base'; +@import 'base/fonts'; +@import 'base/images'; +@import 'base/forms'; +@import 'base/lists'; +@import 'base/typography'; + +@import 'components/logo'; diff --git a/assets/sass/layout/_footer.scss b/assets/styles/layout/_footer.scss similarity index 100% rename from assets/sass/layout/_footer.scss rename to assets/styles/layout/_footer.scss diff --git a/assets/sass/layout/_header.scss b/assets/styles/layout/_header.scss similarity index 100% rename from assets/sass/layout/_header.scss rename to assets/styles/layout/_header.scss diff --git a/assets/sass/layout/_main.scss b/assets/styles/layout/_main.scss 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 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..d4e9b40 --- /dev/null +++ b/assets/styles/styles.scss @@ -0,0 +1,15 @@ +@import 'config/variables'; +@import 'config/mixins'; + +// Layout-related sections +@import 'layout/main'; +@import 'layout/header'; +@import 'layout/footer'; + +// Components +@import 'components/buttons'; +@import 'components/nav'; +@import 'components/alerts'; + +// Page-specific styles +@import 'pages/home'; diff --git a/assets/sass/utils/_helpers.scss b/assets/styles/utils/_helpers.scss similarity index 100% rename from assets/sass/utils/_helpers.scss rename to assets/styles/utils/_helpers.scss diff --git a/assets/sass/utils/_reset.scss b/assets/styles/utils/_reset.scss similarity index 100% rename from assets/sass/utils/_reset.scss rename to assets/styles/utils/_reset.scss diff --git a/assets/sass/utils/_responsive.scss b/assets/styles/utils/_responsive.scss similarity index 100% rename from assets/sass/utils/_responsive.scss rename to assets/styles/utils/_responsive.scss diff --git a/assets/styles/vendor/simple-grid/.gitattributes b/assets/styles/vendor/simple-grid/.gitattributes new file mode 100644 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 100644 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 100644 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 100644 index 0000000..b0a99fc --- /dev/null +++ b/assets/styles/vendor/simple-grid/_mixins.scss @@ -0,0 +1,32 @@ +/** + * 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); + } + } + .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 100644 index 0000000..6aee055 --- /dev/null +++ b/assets/styles/vendor/simple-grid/simple-grid.scss @@ -0,0 +1,52 @@ +/** + * 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 { + @include clearfix; + list-style: none; + margin-left: -$grid-gutter; + &.row--gutterless { + margin-left: 0; + } +} + +.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/css/core.min.css b/css/core.min.css new file mode 100755 index 0000000..d35523f --- /dev/null +++ b/css/core.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:before,.row:after{content:" ";display:table}.row:after{clear:both}.row.row--gutterless{margin-left:0}.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%}.col--lg-offset-1{margin-left:8.33333%}.col--lg-2{width:16.66667%}.col--lg-offset-2{margin-left:16.66667%}.col--lg-3{width:25%}.col--lg-offset-3{margin-left:25%}.col--lg-4{width:33.33333%}.col--lg-offset-4{margin-left:33.33333%}.col--lg-5{width:41.66667%}.col--lg-offset-5{margin-left:41.66667%}.col--lg-6{width:50%}.col--lg-offset-6{margin-left:50%}.col--lg-7{width:58.33333%}.col--lg-offset-7{margin-left:58.33333%}.col--lg-8{width:66.66667%}.col--lg-offset-8{margin-left:66.66667%}.col--lg-9{width:75%}.col--lg-offset-9{margin-left:75%}.col--lg-10{width:83.33333%}.col--lg-offset-10{margin-left:83.33333%}.col--lg-11{width:91.66667%}.col--lg-offset-11{margin-left:91.66667%}.col--lg-12{width:100%}.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%}.col--md-offset-1{margin-left:8.33333%}.col--md-2{width:16.66667%}.col--md-offset-2{margin-left:16.66667%}.col--md-3{width:25%}.col--md-offset-3{margin-left:25%}.col--md-4{width:33.33333%}.col--md-offset-4{margin-left:33.33333%}.col--md-5{width:41.66667%}.col--md-offset-5{margin-left:41.66667%}.col--md-6{width:50%}.col--md-offset-6{margin-left:50%}.col--md-7{width:58.33333%}.col--md-offset-7{margin-left:58.33333%}.col--md-8{width:66.66667%}.col--md-offset-8{margin-left:66.66667%}.col--md-9{width:75%}.col--md-offset-9{margin-left:75%}.col--md-10{width:83.33333%}.col--md-offset-10{margin-left:83.33333%}.col--md-11{width:91.66667%}.col--md-offset-11{margin-left:91.66667%}.col--md-12{width:100%}.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%}.col--sm-offset-1{margin-left:8.33333%}.col--sm-2{width:16.66667%}.col--sm-offset-2{margin-left:16.66667%}.col--sm-3{width:25%}.col--sm-offset-3{margin-left:25%}.col--sm-4{width:33.33333%}.col--sm-offset-4{margin-left:33.33333%}.col--sm-5{width:41.66667%}.col--sm-offset-5{margin-left:41.66667%}.col--sm-6{width:50%}.col--sm-offset-6{margin-left:50%}.col--sm-7{width:58.33333%}.col--sm-offset-7{margin-left:58.33333%}.col--sm-8{width:66.66667%}.col--sm-offset-8{margin-left:66.66667%}.col--sm-9{width:75%}.col--sm-offset-9{margin-left:75%}.col--sm-10{width:83.33333%}.col--sm-offset-10{margin-left:83.33333%}.col--sm-11{width:91.66667%}.col--sm-offset-11{margin-left:91.66667%}.col--sm-12{width:100%}.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%}.col--xs-offset-1{margin-left:8.33333%}.col--xs-2{width:16.66667%}.col--xs-offset-2{margin-left:16.66667%}.col--xs-3{width:25%}.col--xs-offset-3{margin-left:25%}.col--xs-4{width:33.33333%}.col--xs-offset-4{margin-left:33.33333%}.col--xs-5{width:41.66667%}.col--xs-offset-5{margin-left:41.66667%}.col--xs-6{width:50%}.col--xs-offset-6{margin-left:50%}.col--xs-7{width:58.33333%}.col--xs-offset-7{margin-left:58.33333%}.col--xs-8{width:66.66667%}.col--xs-offset-8{margin-left:66.66667%}.col--xs-9{width:75%}.col--xs-offset-9{margin-left:75%}.col--xs-10{width:83.33333%}.col--xs-offset-10{margin-left:83.33333%}.col--xs-11{width:91.66667%}.col--xs-offset-11{margin-left:91.66667%}.col--xs-12{width:100%}.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}}body{color:#444;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;font-size:1rem;line-height:1.5;-webkit-text-size-adjust:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol,dl,address{margin-bottom:24px}a{color:#444;text-decoration:none}a:hover{color:#444;text-decoration:underline}a[href^="tel"]{color:inherit;text-decoration:none;font-family:inherit;font-size:inherit;font-style:inherit}hr{background-color:#444;height:1px}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}.checkbox,.radio{display:block;padding-left:24px}.checkbox.inline,.radio.inline{display:inline-block}.checkbox>input,.radio>input{float:left;margin-left:-24px;margin-top:4px}.form__group{display:block;margin-bottom:24px}.form__label{display:block;margin-bottom:12px}.input-group{position:relative}.input-group>input{padding:0 48px}.input-group .input-group__addon{line-height:36px;height:36px;position:absolute;text-align:center;top:0;width:36px}.input-group .input-group__addon:first-child{left:0}.input-group .input-group__addon:last-child{right:0}ul,ol{margin-left:24px}li>ul,li>ol{margin-bottom:0}.list--unstyled{list-style:none;margin-left:0}h1,h2,h3,h4,h5,h6{font-weight:bold}small{font-size:.75em}.logo{width:250px;height:41px} diff --git a/css/styles.min.css b/css/styles.min.css new file mode 100755 index 0000000..e1792b5 --- /dev/null +++ b/css/styles.min.css @@ -0,0 +1 @@ +.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:1px solid #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:1px solid transparent}.btn--block{display:block;width:100%}.btn--block+.btn--block{margin-top:6px}.btn--link{background-color:transparent;color:#444}.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}.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/functions.php b/functions.php index efdc765..5615ba9 100644 --- a/functions.php +++ b/functions.php @@ -3,21 +3,18 @@ /** * Custom functions / External files */ -require_once 'includes/functions.php'; - - +require_once 'includes/funcitons.php'; /** * Add support for useful stuff */ + if (function_exists('add_theme_support')) { // Add support for document title tag add_theme_support('title-tag'); // Add Thumbnail Theme Support add_theme_support('post-thumbnails'); - - // Add image sizes // add_image_size( 'custom-size', 700, 200, true ); // Add Support for post formats @@ -53,6 +50,7 @@ function barebones_remove_comments_rss($for_comments) { return; } + add_filter('post_comments_feed_link', 'barebones_remove_comments_rss'); @@ -64,9 +62,10 @@ add_filter('post_comments_feed_link', 'barebones_remove_comments_rss'); function barebones_scripts() { // wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' ); - // wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' ); - wp_enqueue_script('script', get_stylesheet_directory_uri() . '/js/script.min.js?' . time(), [], null, true); + // wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); + wp_enqueue_script('script', get_stylesheet_directory_uri() . '/js/script.min.js?' . filemtime(get_stylesheet_directory() . '/js/script.min.js'), [], null, true); } + add_action('wp_enqueue_scripts', 'barebones_scripts'); @@ -91,6 +90,7 @@ function barebones_nav_menu_args($args = '') return $args; } + add_filter('wp_nav_menu_args', 'barebones_nav_menu_args'); @@ -103,6 +103,7 @@ function barebones_mail_from($email) { return get_option('admin_email'); } + add_filter('wp_mail_from', 'barebones_mail_from'); @@ -110,6 +111,7 @@ function barebones_mail_from_name($name) { return get_bloginfo('name'); } + add_filter('wp_mail_from_name', 'barebones_mail_from_name'); @@ -124,6 +126,7 @@ function button_shortcode($atts, $content = null) return '' . $content . ''; } + add_shortcode('button', 'button_shortcode'); @@ -139,8 +142,10 @@ function barebones_mce_buttons_2($buttons) return $buttons; } + add_filter('mce_buttons_2', 'barebones_mce_buttons_2'); + function barebones_tiny_mce_before_init($settings) { $style_formats = [ @@ -156,16 +161,21 @@ function barebones_tiny_mce_before_init($settings) return $settings; } + add_filter('tiny_mce_before_init', 'barebones_tiny_mce_before_init'); /** * Get post thumbnail url - * - * @param int $post_id - * @return string + * @param string $size Size of the returned image + * @param int $post_id post id + * @param boolean $icon if no image found, display icon */ - -function get_post_thumbnail_url($post_id) +function get_post_thumbnail_url($size = 'full', $post_id = false, $icon = false) { - return wp_get_attachment_url(get_post_thumbnail_id($post_id)); + if (!$post_id) { + $post_id = get_the_ID(); + } + + $thumb_url_array = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), $size, $icon); + return $thumb_url_array[0]; } diff --git a/gulpfile.babel.js b/gulpfile.babel.js new file mode 100644 index 0000000..432128e --- /dev/null +++ b/gulpfile.babel.js @@ -0,0 +1,149 @@ +/* eslint-disable no-console */ +import gulp from 'gulp'; +import clean from 'gulp-clean'; +import sass from 'gulp-sass'; +import gulpif from 'gulp-if'; +import rename from 'gulp-rename'; +import autoprefixer from 'gulp-autoprefixer'; +import sourcemaps from 'gulp-sourcemaps'; +import { rollup } from 'rollup'; +import buble from 'rollup-plugin-buble'; +import nodeResolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import json from 'rollup-plugin-json'; +import replace from 'rollup-plugin-replace'; +import multiEntry from 'rollup-plugin-multi-entry'; +import uglify from 'rollup-plugin-uglify'; +import { minify } from 'uglify-js'; +import imagemin from 'gulp-imagemin'; +import runSequence from 'run-sequence'; + +const log = console.log; +let production = false; + +/** + * Config + */ +const config = { + src: './assets', + public: './', +}; + +/** + * Tasks - in order + */ +const tasks = ['styles', 'scripts', 'images']; + +/** + * Styles + */ +gulp.task('clean-styles', () => ( + gulp.src(`${config.public}/css`, { + read: false, + }) + .pipe(clean()) +)); + +gulp.task('styles', ['clean-styles'], () => ( + gulp.src([`${config.src}/styles/*.scss`]) + .pipe(gulpif(!production, sourcemaps.init())) + .pipe(sass({ + outputStyle: production ? 'compressed' : 'nested', + }).on('error', sass.logError)) + .pipe(autoprefixer({ + browsers: ['last 10 versions'], + })) + .pipe(rename({ + suffix: '.min', + })) + .pipe(gulpif(!production, sourcemaps.write('.'))) + .pipe(gulp.dest(`${config.public}/css`)) +)); + +/** + * Scripts + */ +gulp.task('clean-scripts', () => ( + gulp.src(`${config.public}/js`, { + read: false, + }) + .pipe(clean()) +)); + +gulp.task('scripts', ['clean-scripts'], () => { + let env = 'development'; + if (production) { + env = 'production'; + } + + rollup({ + entry: `${config.src}/scripts/scripts.js`, + plugins: [ + multiEntry(), + buble(), + nodeResolve({ + browser: true, + main: true, + jsnext: true, + }), + commonjs({ + include: [ + 'node_modules/**', + `${config.src}/**`, + ], + }), + json(), + replace({ + 'process.env.NODE_ENV': JSON.stringify(env), + }), + production ? uglify({}, minify) : '', + ], + }).then((bundle) => { + bundle.write({ + format: 'iife', + moduleName: 'BarebonesBundle', + sourceMap: !production, + dest: `${config.public}/js/scripts.min.js`, + }); + }).catch(err => log(err.stack)); +}); + +/** + * Watch + */ +gulp.task('watch-files', tasks, () => { + gulp.watch(`${config.src}/styles/**/*.scss`, ['styles']); + gulp.watch(`${config.src}/scripts/**/*.js`, ['scripts']); + gulp.watch(`${config.src}/images/**/*.*`, ['images']); +}); + +/** + * Images + */ +gulp.task('images', () => { + // hadle all images that are not svg + gulp.src(`${config.src}/images/**/*.*`) + .pipe(imagemin({ + progressive: true, + svgoPlugins: [{ + removeViewBox: false, + }], + })) + .pipe(gulp.dest(`${config.public}/img`)); +}); + +/** + * Main Tasks + */ +gulp.task('watch', () => ( + runSequence(tasks, 'watch-files') +)); + +gulp.task('build', () => { + production = true; + runSequence(tasks); +}); + +gulp.task('default', () => ( + runSequence(tasks) +)); diff --git a/header.php b/header.php index fdc1abf..6373691 100755 --- a/header.php +++ b/header.php @@ -7,7 +7,13 @@ - + + + +