Merged v3 into master
This commit is contained in:
Pedro Reis
commit
20d55874a9
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"presets": ["env", "stage-2"],
|
||||
"comments": false,
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
js/**/*.js
|
||||
node_modules/**/*.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
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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*
|
||||
```
|
||||
<img src="/img/logo.svg" onerror="this.src='/img/logo.png'" alt="image" />
|
||||
```
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 250 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<g transform="matrix(0.118406,0,0,0.118406,0,0)">
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M2158.04,447.724L2250.15,367.986L2203.59,367.986L2129.55,431.386L2129.55,285.212L2096.71,285.212L2096.71,535.168L2129.55,535.168L2129.55,463.59L2215.64,535.168L2263.55,535.168L2158.04,447.724Z" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M862.415,381.306C874.099,381.306 885.098,384.059 892.656,392.657L806.031,447.643C801.906,411.562 824.94,381.306 862.415,381.306M863.435,504.357C842.81,504.357 826.658,493.71 815.66,476.182L938.03,398.155C919.13,367.21 897.126,350.371 860.004,350.371C813.598,350.371 773.038,390.587 773.038,438.015C773.038,493.359 809.466,535.309 865.495,535.309C892.656,535.309 920.182,518.206 941.844,503.077L928.059,474.122C910.182,488.205 887.155,504.357 863.435,504.357" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1910.33,503.991L1850.38,503.991C1833.61,503.991 1819.43,498.032 1807.83,486.127C1796.23,474.213 1790.44,459.892 1790.44,443.158C1790.44,426.435 1796.23,412.037 1807.83,399.949C1819.43,387.871 1833.61,381.826 1850.38,381.826C1867.14,381.826 1881.33,387.871 1892.93,399.949C1904.53,412.037 1910.33,426.435 1910.33,443.158L1910.33,503.991ZM1850.26,350.521C1824.7,350.521 1802.71,359.562 1784.32,377.654C1765.91,395.747 1756.71,417.578 1756.71,443.144C1756.71,468.703 1765.91,490.462 1784.32,508.402C1802.71,526.335 1824.7,535.309 1850.26,535.309L1944.05,535.309L1944.05,443.144C1944.05,417.578 1934.81,395.747 1916.33,377.654C1897.85,359.562 1875.82,350.521 1850.26,350.521" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1991.67,378.48C1972.55,397.136 1962.97,419.761 1962.97,446.328L1962.97,535.309L1997.01,535.309L1997.01,446.328C1997.01,430.471 2007.58,389.201 2060.22,382.557L2077.79,382.557L2077.79,350.521L2060.22,350.521C2033.65,350.521 2010.8,359.84 1991.67,378.48" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1666.85,350.448C1646.46,350.448 1620.03,358.731 1607.97,376.062C1595.92,358.731 1569.49,350.448 1549.08,350.448C1512.1,350.448 1478.15,378.323 1478.15,412.28L1478.15,535.309L1511.31,535.309L1511.31,419.836C1511.31,396.807 1530.22,382.093 1549.84,382.093C1571.37,382.093 1591.4,394.167 1591.4,425.114L1591.4,535.309L1624.55,535.309L1624.55,425.114C1624.55,394.167 1644.59,382.093 1666.11,382.093C1685.74,382.093 1704.64,396.807 1704.64,419.836L1704.64,535.309L1737.79,535.309L1737.79,412.28C1737.79,378.323 1703.86,350.448 1666.85,350.448" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1035.53,350.391C991.375,350.391 958.17,382.091 958.17,429.64L958.17,535.309L991.375,535.309L991.375,429.64C991.375,401.709 1011.76,382.091 1035.53,382.091C1059.31,382.091 1079.69,401.709 1079.69,429.64L1079.69,535.309L1112.89,535.309L1112.89,429.64C1112.89,382.091 1079.69,350.391 1035.53,350.391" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1384.15,350.391C1364.9,350.391 1347.92,358.691 1337.73,370.018L1337.73,286.094L1304.53,286.094L1304.53,535.309L1337.73,535.309L1337.73,429.64C1337.73,401.709 1357.74,382.091 1381.88,382.091C1405.65,382.091 1426.04,392.658 1426.04,429.64L1426.04,535.309L1459.23,535.309L1459.23,429.64C1459.23,368.497 1426.04,350.391 1384.15,350.391" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1221.43,504.258C1191.23,504.258 1164.79,474.387 1164.79,443.145C1164.79,411.201 1187.46,381.325 1220.76,381.325C1240.33,381.325 1249.96,386.485 1264.71,397.473L1284.63,374.803C1266.44,359.005 1244.46,350.425 1220.41,350.425C1168.23,350.425 1131.81,392.991 1131.81,444.177C1131.81,495.341 1174.4,535.181 1220.41,535.181C1246.18,535.181 1268.16,523.489 1285.67,505.294L1264.36,483.653C1252.34,495.341 1240,504.258 1221.43,504.258" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M169.817,346.619C178.469,346.577 187.232,346.648 196.042,346.619C195.966,368.719 195.918,390.34 195.918,410.342C195.918,479.414 252.095,535.587 321.148,535.587C390.196,535.587 446.365,479.414 446.365,410.342C446.365,341.302 390.196,285.239 321.148,285.239C303.12,285.239 280.716,285.157 257.149,285.239C257.178,276.443 257.123,267.688 257.149,259.011C280.737,258.939 303.063,259.011 321.148,259.011C404.658,259.011 472.597,326.848 472.597,410.342C472.597,493.86 404.658,561.803 321.148,561.803C237.633,561.803 169.693,493.86 169.693,410.342C169.693,390.311 169.75,368.699 169.817,346.619M169.873,302.63L196.201,302.63L196.201,328.841L169.873,328.841L169.873,302.63ZM170.05,259.012L196.369,259.012L196.369,285.246L170.05,285.246L170.05,259.012ZM213.551,346.448L239.648,346.448C239.57,368.63 239.517,390.238 239.517,410.342C239.517,455.366 276.141,491.977 321.148,491.977C366.144,491.977 402.767,455.366 402.767,410.342C402.767,365.349 366.144,328.868 321.148,328.868C302.981,328.868 280.852,328.793 257.149,328.868L257.149,302.63C280.75,302.549 303.105,302.63 321.148,302.63C380.538,302.63 428.855,350.955 428.855,410.342C428.855,469.746 380.538,518.077 321.148,518.077C261.754,518.077 213.428,469.746 213.428,410.342C213.428,390.325 213.477,368.581 213.551,346.448M213.609,302.63L239.709,302.63L239.709,328.841L213.609,328.841L213.609,302.63ZM213.777,259.012L239.981,259.012L239.981,285.246L213.777,285.246L213.777,259.012ZM257.149,346.373C280.893,346.296 302.968,346.373 321.148,346.373C356.496,346.373 385.256,375.009 385.256,410.342C385.256,445.706 356.496,474.467 321.148,474.467C285.794,474.467 257.034,445.706 257.034,410.342C257.034,390.21 257.081,368.589 257.149,346.373M152.178,410.342C152.178,503.511 227.979,579.324 321.148,579.324C414.311,579.324 490.107,503.511 490.107,410.342C490.107,317.187 414.311,241.398 321.148,241.398C303.078,241.398 152.704,241.914 152.704,241.914C152.704,241.914 152.178,390.333 152.178,410.342" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M702.996,485.881C691.395,497.959 677.211,504.004 660.447,504.004C643.68,504.004 629.493,497.959 617.899,485.881C606.299,473.793 600.498,459.395 600.498,442.672L600.498,381.839L660.447,381.839C677.211,381.839 691.395,387.798 702.996,399.703C714.597,411.617 720.388,425.938 720.388,442.672C720.388,459.395 714.597,473.793 702.996,485.881M726.502,377.428C708.118,359.495 686.128,350.521 660.561,350.521L601.122,350.521L601.122,285.212L566.776,285.212L566.776,442.686C566.776,468.252 576.014,490.083 594.493,508.176C612.973,526.268 635.003,535.309 660.561,535.309C686.128,535.309 708.118,526.268 726.502,508.176C744.913,490.083 754.118,468.252 754.118,442.686C754.118,417.127 744.913,395.368 726.502,377.428" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .75em;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <input>
|
||||
*/
|
||||
|
||||
@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%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.sr-only {
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 4aee2627e323b19a70045a84adafc9f4fee44a6f
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// var $ = require('jquery');
|
||||
|
||||
(function() {
|
||||
|
||||
|
||||
|
||||
})($);
|
||||
|
|
@ -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);
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
background-color: $base-colour;
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
/**
|
||||
* This file contains all @font-face declarations, if any.
|
||||
*/
|
||||
*/
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .75em;
|
||||
}
|
||||
6
assets/sass/components/_alerts.scss → assets/styles/components/_alerts.scss
Normal file → Executable file
6
assets/sass/components/_alerts.scss → assets/styles/components/_alerts.scss
Normal file → Executable file
|
|
@ -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;
|
||||
11
assets/sass/components/_buttons.scss → assets/styles/components/_buttons.scss
Normal file → Executable file
11
assets/sass/components/_buttons.scss → assets/styles/components/_buttons.scss
Normal file → Executable file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <input>
|
||||
*/
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -55,3 +55,9 @@ $grid-gutter: $base-spacing-unit;
|
|||
*/
|
||||
|
||||
$border-radius: 3px;
|
||||
|
||||
/**
|
||||
* Animations
|
||||
*/
|
||||
$animation-speed: 250ms;
|
||||
$animation: ease-in-out;
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -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';
|
||||
35
assets/sass/utils/_helpers.scss → assets/styles/utils/_helpers.scss
Normal file → Executable file
35
assets/sass/utils/_helpers.scss → assets/styles/utils/_helpers.scss
Normal file → Executable file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
4
assets/sass/utils/_responsive.scss → assets/styles/utils/_responsive.scss
Normal file → Executable file
4
assets/sass/utils/_responsive.scss → assets/styles/utils/_responsive.scss
Normal file → Executable file
|
|
@ -1,5 +1,4 @@
|
|||
@each $breakpoint in $breakpoints {
|
||||
|
||||
$key : nth($breakpoint, 1);
|
||||
$value : nth($breakpoint, 2);
|
||||
|
||||
|
|
@ -14,5 +13,4 @@
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
README export-ignore
|
||||
|
|
@ -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 - `<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12"></div>` - inside a `.row`.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
||||
<p>Col 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 2</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 4</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 5</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-8 col--lg-8">
|
||||
<p>Col 7</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 8</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 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
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 9 with offset 0</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4 col--xs-offset-4 col--sm-offset-0 col--md-offset-4 col--lg-offset-4">
|
||||
<p>Col 10 with offset 4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
||||
<p>Col 11 with offset 3</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-6 col--lg-offset-6">
|
||||
<p>Col 12 with offset 6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
||||
<p>Col 13 with offset 3</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 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
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
||||
<p>Col 14</p>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Nested col 14.1</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Nested col 14.2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Gutterless columns
|
||||
To remove all the gutters from your columns just add the class `.row--gutterless` to your `.row` element.
|
||||
|
||||
```html
|
||||
<div class="row row--gutterless">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 15</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 16</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 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).
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
],
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,9 @@
|
|||
<footer class="footer" role="contentinfo">
|
||||
<div class="container">
|
||||
<?php wp_nav_menu(['theme_location' => 'footer', 'menu_class' => 'nav nav--footer']); ?>
|
||||
© <?php bloginfo('name'); ?> <?php echo date('Y'); ?>
|
||||
<nav class="footer__navigation">
|
||||
<?php wp_nav_menu(['theme_location' => 'footer', 'menu_class' => 'nav nav--footer']); ?>
|
||||
</nav>
|
||||
<p class="footer__copyright">© <?php echo get_bloginfo( 'name' ); ?> <?php echo date('Y'); ?></p>
|
||||
</div>
|
||||
</footer>
|
||||
<?php wp_footer(); ?>
|
||||
|
|
|
|||
|
|
@ -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'] = '<ul class="%2$s">%3$s</ul>';
|
||||
$args['menu_id'] = false;
|
||||
$args['items_wrap'] = '<ul class="%2$s">%3$s</ul>';
|
||||
|
||||
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 '<a class="' . $atts['class'] . '" href="' . $atts['link'] . '">' . $content . '</a>';
|
||||
}
|
||||
|
||||
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' );
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<?php
|
||||
|
||||
//
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
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 notify from 'gulp-notify';
|
||||
import runSequence from 'run-sequence';
|
||||
import path from 'path';
|
||||
|
||||
/**
|
||||
* Barebones config
|
||||
*/
|
||||
import config from './config.barebones';
|
||||
|
||||
const { log } = console;
|
||||
let production = false; // = build
|
||||
let error = false;
|
||||
|
||||
/**
|
||||
* Tasks - in order
|
||||
*/
|
||||
const tasks = ['styles', 'scripts', 'images'];
|
||||
|
||||
/**
|
||||
* Notification
|
||||
*
|
||||
* @param {string} message
|
||||
* @param {string} status
|
||||
*/
|
||||
function notification(message = '', status = 'success') {
|
||||
return gulp.src('./node_modules/gulp-notify/test/fixtures/1.txt')
|
||||
.pipe(notify({
|
||||
title: 'Barebones',
|
||||
message,
|
||||
icon: path.join(__dirname, `assets/icons/${status}.png`),
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean
|
||||
*/
|
||||
gulp.task('clean', () => (
|
||||
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();
|
||||
});
|
||||
})
|
||||
));
|
||||
29
gulpfile.js
29
gulpfile.js
|
|
@ -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');
|
||||
});
|
||||
15
header.php
15
header.php
|
|
@ -7,7 +7,8 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<link rel="dns-prefetch" href="//google-analytics.com">
|
||||
<link rel="stylesheet" href="<?php echo get_bloginfo( 'stylesheet_url' ) . '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>">
|
||||
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url') . '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>">
|
||||
|
||||
<?php wp_head(); ?>
|
||||
<!--[if lt IE 10]>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
|
||||
|
|
@ -21,7 +22,17 @@
|
|||
<body <?php body_class(); ?>>
|
||||
<header class="header" role="banner">
|
||||
<div class="container">
|
||||
<nav role="navigation">
|
||||
<a href="<?php bloginfo('url'); ?>" class="header__logo">
|
||||
<?php echo is_front_page() ? '<h1>' : ''; ?>
|
||||
<img src="<?php echo get_bloginfo( 'stylesheet_directory' ); ?>/img/logo.svg" onerror="this.src='<?php echo get_bloginfo( 'stylesheet_directory' ); ?>/img/logo.png'" alt="<?php echo get_bloginfo( 'title' ); ?>" />
|
||||
<?php echo is_front_page() ? '</h1>' : ''; ?>
|
||||
</a>
|
||||
<a href="#" class="nav-burger js-menu-toggle">
|
||||
<span class="nav-burger__line"></span>
|
||||
<span class="nav-burger__line"></span>
|
||||
<span class="nav-burger__line"></span>
|
||||
</a>
|
||||
<nav role="navigation" class="header__navigation">
|
||||
<?php wp_nav_menu(['theme_location' => 'header', 'menu_class' => 'nav nav--header']); ?>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 250 41" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M237.506 24.43l10.906-9.441H242.9l-8.766 7.507V5.188h-3.889v29.596h3.889V26.31l10.193 8.475H250L237.506 24.43zm-153.41-7.864c1.384 0 2.686.326 3.581 1.344L77.42 24.42c-.488-4.272 2.24-7.854 6.676-7.854m.121 14.57c-2.442 0-4.355-1.26-5.657-3.336l14.49-9.239c-2.238-3.664-4.844-5.658-9.24-5.658-5.494 0-10.296 4.762-10.296 10.378 0 6.553 4.313 11.52 10.947 11.52 3.216 0 6.475-2.025 9.04-3.817l-1.632-3.428c-2.117 1.667-4.843 3.58-7.652 3.58m123.959-.043h-7.099c-1.985 0-3.664-.706-5.038-2.116-1.373-1.41-2.059-3.106-2.059-5.087 0-1.98.686-3.685 2.06-5.117 1.373-1.43 3.052-2.145 5.037-2.145 1.985 0 3.665.715 5.038 2.145 1.374 1.432 2.06 3.136 2.06 5.117v7.203zm-7.113-18.172c-3.026 0-5.63 1.07-7.808 3.213-2.18 2.142-3.269 4.727-3.269 7.754 0 3.026 1.09 5.603 3.27 7.727 2.177 2.123 4.78 3.186 7.807 3.186h11.105V23.888c0-3.027-1.094-5.612-3.282-7.754-2.188-2.143-4.796-3.213-7.823-3.213m16.744 3.31c-2.264 2.21-3.398 4.888-3.398 8.034V34.8h4.03V24.265c0-1.878 1.252-6.764 7.485-7.55h2.08V12.92h-2.08c-3.146 0-5.852 1.103-8.117 3.31m-38.461-3.318c-2.414 0-5.544.98-6.971 3.033-1.427-2.052-4.557-3.033-6.973-3.033-4.38 0-8.399 3.3-8.399 7.321v14.568h3.926V21.128c0-2.727 2.24-4.469 4.563-4.469 2.549 0 4.92 1.43 4.92 5.094v13.048h3.926V21.753c0-3.664 2.373-5.094 4.92-5.094 2.325 0 4.563 1.742 4.563 4.47V34.8h3.925V20.233c0-4.02-4.018-7.32-8.4-7.32m-74.752-.008c-5.228 0-9.16 3.754-9.16 9.384v12.512h3.932V22.289c0-3.307 2.414-5.63 5.228-5.63 2.816 0 5.229 2.323 5.229 5.63v12.512h3.931V22.289c0-5.63-3.931-9.384-9.16-9.384m41.279 0c-2.28 0-4.29.983-5.497 2.324V5.292h-3.93v29.509h3.93V22.289c0-3.307 2.37-5.63 5.228-5.63 2.815 0 5.229 1.251 5.229 5.63v12.512h3.93V22.289c0-7.24-3.93-9.384-8.89-9.384m-19.267 18.219c-3.576 0-6.707-3.537-6.707-7.236 0-3.782 2.685-7.32 6.628-7.32 2.317 0 3.457.611 5.203 1.912l2.36-2.684c-2.155-1.87-4.757-2.887-7.605-2.887-6.178 0-10.49 5.04-10.49 11.101 0 6.058 5.042 10.776 10.49 10.776 3.051 0 5.654-1.385 7.727-3.54l-2.523-2.562c-1.423 1.384-2.884 2.44-5.083 2.44M2.089 12.459c1.024-.005 2.062.003 3.105 0-.01 2.617-.015 5.177-.015 7.545 0 8.179 6.652 14.83 14.828 14.83 8.176 0 14.827-6.651 14.827-14.83 0-8.175-6.651-14.813-14.827-14.813-2.135 0-4.787-.01-7.578 0 .004-1.041-.003-2.078 0-3.106 2.793-.008 5.437 0 7.578 0 9.888 0 17.933 8.033 17.933 17.919 0 9.889-8.045 17.934-17.933 17.934-9.889 0-17.933-8.045-17.933-17.934 0-2.372.007-4.93.015-7.545m.006-5.209h3.118v3.104H2.095V7.25zm.021-5.164h3.116v3.106H2.116V2.086zm5.15 10.353h3.091c-.01 2.626-.016 5.185-.016 7.565 0 5.331 4.337 9.666 9.666 9.666 5.328 0 9.664-4.335 9.664-9.666 0-5.327-4.336-9.647-9.664-9.647-2.151 0-4.771-.009-7.578 0V7.25c2.795-.01 5.442 0 7.578 0 7.032 0 12.753 5.722 12.753 12.754 0 7.034-5.72 12.756-12.753 12.756S7.252 27.038 7.252 20.004c0-2.37.006-4.945.015-7.565m.007-5.189h3.09v3.104h-3.09V7.25zm.02-5.164h3.102v3.106H7.294V2.086zm5.135 10.344c2.812-.01 5.425 0 7.578 0 4.185 0 7.59 3.39 7.59 7.574 0 4.187-3.405 7.593-7.59 7.593-4.186 0-7.591-3.406-7.591-7.593 0-2.384.005-4.944.013-7.574M0 20.004c0 11.032 8.975 20.008 20.007 20.008 11.031 0 20.006-8.976 20.006-20.008C40.013 8.974 31.038 0 20.007 0 17.867 0 .062.061.062.061S0 17.635 0 20.004m65.22 8.944c-1.373 1.43-3.053 2.146-5.038 2.146-1.985 0-3.665-.716-5.038-2.146-1.373-1.431-2.06-3.136-2.06-5.116v-7.203h7.098c1.985 0 3.665.706 5.038 2.115 1.374 1.411 2.06 3.107 2.06 5.088 0 1.98-.686 3.685-2.06 5.116m2.783-12.841c-2.176-2.124-4.78-3.186-7.807-3.186h-7.038V5.188H49.09v18.646c0 3.027 1.094 5.612 3.282 7.754 2.188 2.142 4.796 3.213 7.823 3.213s5.63-1.07 7.807-3.213c2.18-2.142 3.27-4.727 3.27-7.754 0-3.027-1.09-5.603-3.27-7.727" fill="#1b1b1b" fill-rule="nonzero"/></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<?php
|
||||
/**
|
||||
* This is file for all of your custom functions for the project
|
||||
*/
|
||||
|
||||
/**
|
||||
* Enables the Link Manager that existed in WordPress until version 3.5.
|
||||
*/
|
||||
// add_filter('pre_option_link_manager_enabled', '__return_true');
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
!function(){}($);
|
||||
//# sourceMappingURL=script.min.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,30 +1,52 @@
|
|||
{
|
||||
"name": "barebones",
|
||||
"version": "2.0.6",
|
||||
"version": "3.0.0",
|
||||
"author": "Benchmark Studios",
|
||||
"description": "A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/benchmarkstudios/barebones#readme",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/benchmarkstudios/barebones.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/benchmarkstudios/barebones/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"fs": "^0.0.2",
|
||||
"gulp": "^3.8.8",
|
||||
"gulp-imagemin": "^3.0.1",
|
||||
"imagemin-gifsicle": "^5.1.0",
|
||||
"imagemin-jpegtran": "^5.0.2",
|
||||
"imagemin-optipng": "^5.2.1",
|
||||
"imagemin-svgo": "^5.2.0",
|
||||
"laravel-elixir": "^4.2.1"
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/benchmarkstudios/barebones.git"
|
||||
},
|
||||
"dependencies": {}
|
||||
"keywords": [
|
||||
"barebones",
|
||||
"boilerplate",
|
||||
"wordpress"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/benchmarkstudios/barebones/issues"
|
||||
},
|
||||
"homepage": "https://github.com/benchmarkstudios/barebones#readme",
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^4.0.0",
|
||||
"gulp-clean": "^0.3.2",
|
||||
"gulp-if": "^2.0.2",
|
||||
"gulp-imagemin": "^3.4.0",
|
||||
"gulp-notify": "^3.0.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-sourcemaps": "^2.6.1",
|
||||
"rollup": "^0.42.0",
|
||||
"rollup-plugin-buble": "^0.15.0",
|
||||
"rollup-plugin-commonjs": "^8.2.6",
|
||||
"rollup-plugin-json": "^2.3.0",
|
||||
"rollup-plugin-multi-entry": "^2.0.2",
|
||||
"rollup-plugin-node-resolve": "^3.0.0",
|
||||
"rollup-plugin-replace": "^1.2.1",
|
||||
"rollup-plugin-uglify": "^2.0.1",
|
||||
"run-sequence": "^1.2.2",
|
||||
"uglify-js": "^3.1.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^3.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
<main class="main" role="main">
|
||||
<div class="container">
|
||||
|
||||
<?php while (have_posts()) : the_post(); ?>
|
||||
<?php while ( have_posts() ) : the_post(); ?>
|
||||
|
||||
<article <?php post_class(); ?>>
|
||||
|
||||
<header role="heading">
|
||||
<h3 class="post__title"><?php the_title(); ?></h3>
|
||||
<h1 class="post__title"><?php the_title(); ?></h1>
|
||||
</header>
|
||||
|
||||
<?php the_content(); ?>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
|
@ -3,12 +3,12 @@
|
|||
<main class="main" role="main">
|
||||
<div class="container">
|
||||
|
||||
<?php while (have_posts()) : the_post(); ?>
|
||||
<?php while ( have_posts() ) : the_post(); ?>
|
||||
|
||||
<article <?php post_class(); ?>>
|
||||
|
||||
<header class="post__header" role="heading">
|
||||
<h3 class="post__title"><?php the_title(); ?></h3>
|
||||
<h1 class="post__title"><?php the_title(); ?></h1>
|
||||
</header>
|
||||
|
||||
<?php the_content(); ?>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
# Templates
|
||||
|
||||
Create a file caleld template-{template_name}.php. Make sure you include template
|
||||
name, e.g.:
|
||||
|
||||
```
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Template Name: Contact Page
|
||||
*/
|
||||
|
||||
get_header();
|
||||
|
||||
?>
|
||||
<main class="main" role="main">
|
||||
<div class="container">
|
||||
|
||||
<?php while ( have_posts() ) : the_post(); ?>
|
||||
|
||||
<div class="row flex">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-8 col--lg-8">
|
||||
<div class="content <?php the_field('colour'); ?>">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<?php get_sidebar('university'); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endwhile; ?>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
```
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Template Name: Demo page template
|
||||
*/
|
||||
|
||||
get_header();
|
||||
|
||||
?>
|
||||
|
||||
<main class="main" role="main">
|
||||
<div class="container">
|
||||
|
||||
<?php while (have_posts()) : the_post(); ?>
|
||||
|
||||
<article <?php post_class(); ?>>
|
||||
|
||||
<header role="heading">
|
||||
<h3 class="post__title"><?php the_title(); ?></h3>
|
||||
</header>
|
||||
|
||||
<?php the_content(); ?>
|
||||
|
||||
</article>
|
||||
|
||||
<?php endwhile; ?>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
Loading…
Reference in New Issue