solid v3 setup, wip
This commit is contained in:
parent
b02b2f2519
commit
7e87836ada
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"presets": ["es2015", "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
|
|
@ -1,9 +1,9 @@
|
|||
.DS_Store
|
||||
npm-debug.log
|
||||
.sass-cache
|
||||
node_modules
|
||||
bower_components
|
||||
assets/sass/vendor
|
||||
tests
|
||||
|
||||
package-lock.json
|
||||
*.map
|
||||
**/*.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
|
||||
|
|
16
CHANGELOG.md
16
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
|
||||
|
|
60
README.md
60
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*
|
||||
```
|
||||
<img src="/img/logo.svg" onerror="this.src='/img/logo.png'" alt="image" />
|
||||
```
|
||||
|
|
Binary file not shown.
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 +0,0 @@
|
|||
window.$ = window.jQuery = require('jquery');
|
|
@ -1,3 +0,0 @@
|
|||
require('./bootstrap');
|
||||
|
||||
console.log( 'Barebones rocks! You are running jQuery version: ' + $.fn.jquery );
|
Binary file not shown.
|
@ -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';
|
Binary file not shown.
|
@ -1,7 +0,0 @@
|
|||
.sr-only {
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 4aee2627e323b19a70045a84adafc9f4fee44a6f
|
|
@ -0,0 +1,3 @@
|
|||
import $ from 'jquery';
|
||||
|
||||
console.log($);
|
|
@ -0,0 +1,4 @@
|
|||
.logo {
|
||||
width: 250px;
|
||||
height: 41px;
|
||||
}
|
|
@ -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';
|
|
@ -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';
|
|
@ -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,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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
|
@ -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}
|
|
@ -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 '<a class="' . $atts['class'] . '" href="' . $atts['link'] . '">' . $content . '</a>';
|
||||
}
|
||||
|
||||
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];
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
));
|
14
header.php
14
header.php
|
@ -7,7 +7,13 @@
|
|||
<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') . '?' . time(); ?>">
|
||||
|
||||
<?php /**
|
||||
* For better peformance, core styles are inlined
|
||||
*/
|
||||
get_file_contents(sprintf('%s/css/core.min.css', get_bloginfo( 'stylesheet_url' ))); ?>
|
||||
<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>
|
||||
|
@ -25,4 +31,10 @@
|
|||
<?php wp_nav_menu(['theme_location' => 'header', 'menu_class' => 'nav nav--header']); ?>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<a href="<?php bloginfo('url'); ?>" class="logo logo--header">
|
||||
<?php if(is_front_page()) { echo '<h1>'; } ?>
|
||||
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.svg" onerror="this.src='<?php bloginfo('stylesheet_directory'); ?>/img/logo.png'" alt="<?php bloginfo('title'); ?>" />
|
||||
<?php if(is_front_page()) { echo '</h1>'; } ?>
|
||||
</a>
|
||||
</header>
|
||||
|
|
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 |
|
@ -1,4 +1,4 @@
|
|||
<?php
|
||||
/**
|
||||
* Project specific functions
|
||||
* This is file for all of your custom functions for the project
|
||||
*/
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"script.min.css": "style.css",
|
||||
"script.min.js": "js/script.min.js"
|
||||
}
|
49
package.json
49
package.json
|
@ -1,30 +1,51 @@
|
|||
{
|
||||
"name": "barebones",
|
||||
"version": "3.0.0beta",
|
||||
"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",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/benchmarkstudios/barebones.git"
|
||||
},
|
||||
"keywords": [
|
||||
"barebones",
|
||||
"boilerplate",
|
||||
"wordpress"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/benchmarkstudios/barebones/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"webpack": "cross-env NODE_ENV=development webpack --progress --hide-modules",
|
||||
"dev": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
|
||||
"hmr": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
|
||||
"production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"private": true,
|
||||
"homepage": "https://github.com/benchmarkstudios/barebones#readme",
|
||||
"devDependencies": {
|
||||
"cross-env": "^3.1.4",
|
||||
"laravel-mix": "^0.4.0"
|
||||
"babel-core": "^6.24.1",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"babel-register": "^6.24.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^4.0.0",
|
||||
"gulp-clean": "^0.3.2",
|
||||
"gulp-if": "^2.0.2",
|
||||
"gulp-imagemin": "^3.3.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-sourcemaps": "^2.6.0",
|
||||
"rollup": "^0.42.0",
|
||||
"rollup-plugin-buble": "^0.15.0",
|
||||
"rollup-plugin-commonjs": "^8.0.2",
|
||||
"rollup-plugin-json": "^2.3.0",
|
||||
"rollup-plugin-multi-entry": "^2.0.1",
|
||||
"rollup-plugin-node-resolve": "^3.0.0",
|
||||
"rollup-plugin-replace": "^1.1.1",
|
||||
"rollup-plugin-uglify": "^2.0.1",
|
||||
"run-sequence": "^1.2.2",
|
||||
"uglify-js": "^3.0.15"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^3.1.1"
|
||||
"jquery": "^3.2.1"
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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,340 +0,0 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
var Mix = require('laravel-mix').config;
|
||||
var plugins = require('laravel-mix').plugins;
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Initialization
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| As our first step, we'll require the project's Laravel Mix file
|
||||
| and record the user's requested compilation and build steps.
|
||||
| Once those steps have been recorded, we may get to work.
|
||||
|
|
||||
*/
|
||||
|
||||
Mix.initialize();
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Webpack Context
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| This prop will determine the appropriate context, when running Webpack.
|
||||
| Since you have the option of publishing this webpack.config.js file
|
||||
| to your project root, we will dynamically set the path for you.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports.context = Mix.paths.root();
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Webpack Entry
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| We'll first specify the entry point for Webpack. By default, we'll
|
||||
| assume a single bundled file, but you may call Mix.extract()
|
||||
| to make a separate bundle specifically for vendor libraries.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports.entry = Mix.entry();
|
||||
|
||||
if (Mix.js.vendor) {
|
||||
module.exports.entry.vendor = Mix.js.vendor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Webpack Output
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Webpack naturally requires us to specify our desired output path and
|
||||
| file name. We'll simply echo what you passed to with Mix.js().
|
||||
| Note that, for Mix.version(), we'll properly hash the file.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports.output = Mix.output();
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Rules
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Webpack rules allow us to register any number of loaders and options.
|
||||
| Out of the box, we'll provide a handful to get you up and running
|
||||
| as quickly as possible, though feel free to add to this list.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports.module = {
|
||||
rules: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
js: 'babel-loader' + Mix.babelConfig(),
|
||||
scss: 'vue-style-loader!css-loader!sass-loader',
|
||||
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
|
||||
},
|
||||
|
||||
postcss: [
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
loader: 'babel-loader' + Mix.babelConfig()
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.(png|jpg|gif)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.(woff2?|ttf|eot|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '/fonts/[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
if (Mix.cssPreprocessor) {
|
||||
Mix[Mix.cssPreprocessor].forEach(toCompile => {
|
||||
let extractPlugin = new plugins.ExtractTextPlugin(
|
||||
Mix.cssOutput(toCompile)
|
||||
);
|
||||
|
||||
module.exports.module.rules.push({
|
||||
test: new RegExp(toCompile.src.file),
|
||||
loader: extractPlugin.extract({
|
||||
fallbackLoader: 'style-loader',
|
||||
loader: [
|
||||
'css-loader',
|
||||
'postcss-loader',
|
||||
'resolve-url-loader',
|
||||
(Mix.cssPreprocessor == 'sass') ? 'sass-loader?sourceMap' : 'less-loader'
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
module.exports.plugins = (module.exports.plugins || []).concat(extractPlugin);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Resolve
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Here, we may set any options/aliases that affect Webpack's resolving
|
||||
| of modules. To begin, we will provide the necessary Vue alias to
|
||||
| load the Vue common library. You may delete this, if needed.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports.resolve = {
|
||||
extensions: ['*', '.js', '.jsx', '.vue'],
|
||||
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.common.js'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Stats
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| By default, Webpack spits a lot of information out to the terminal,
|
||||
| each you time you compile. Let's keep things a bit more minimal
|
||||
| and hide a few of those bits and pieces. Adjust as you wish.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports.stats = {
|
||||
hash: false,
|
||||
version: false,
|
||||
timings: false,
|
||||
children: false,
|
||||
errors: false
|
||||
};
|
||||
|
||||
module.exports.performance = { hints: false };
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Devtool
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Sourcemaps allow us to access our original source code within the
|
||||
| browser, even if we're serving a bundled script or stylesheet.
|
||||
| You may activate sourcemaps, by adding Mix.sourceMaps().
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports.devtool = Mix.sourcemaps;
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Webpack Dev Server Configuration
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| If you want to use that flashy hot module replacement feature, then
|
||||
| we've got you covered. Here, we'll set some basic initial config
|
||||
| for the Node server. You very likely won't want to edit this.
|
||||
|
|
||||
*/
|
||||
module.exports.devServer = {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
compress: true
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Plugins
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Lastly, we'll register a number of plugins to extend and configure
|
||||
| Webpack. To get you started, we've included a handful of useful
|
||||
| extensions, for versioning, OS notifications, and much more.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.ProvidePlugin({
|
||||
jQuery: 'jquery',
|
||||
$: 'jquery',
|
||||
jquery: 'jquery'
|
||||
}),
|
||||
|
||||
new plugins.FriendlyErrorsWebpackPlugin(),
|
||||
|
||||
new plugins.ManifestPlugin(),
|
||||
|
||||
new plugins.WebpackMd5HashPlugin(),
|
||||
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: Mix.inProduction,
|
||||
options: {
|
||||
postcss: [
|
||||
require('autoprefixer')
|
||||
],
|
||||
context: __dirname,
|
||||
output: { path: './' }
|
||||
}
|
||||
})
|
||||
]);
|
||||
|
||||
|
||||
|
||||
if (Mix.notifications) {
|
||||
module.exports.plugins.push(
|
||||
new plugins.WebpackNotifierPlugin({
|
||||
title: 'Laravel Mix',
|
||||
alwaysNotify: true,
|
||||
contentImage: 'node_modules/laravel-mix/icons/laravel.png'
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (Mix.versioning) {
|
||||
Mix.versioning.record();
|
||||
|
||||
module.exports.plugins.push(
|
||||
new plugins.WebpackOnBuildPlugin(() => {
|
||||
Mix.versioning.prune(Mix.publicPath);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (Mix.combine || Mix.minify) {
|
||||
module.exports.plugins.push(
|
||||
new plugins.WebpackOnBuildPlugin(() => {
|
||||
Mix.concatenateAll().minifyAll();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (Mix.copy) {
|
||||
Mix.copy.forEach(copy => {
|
||||
module.exports.plugins.push(
|
||||
new plugins.CopyWebpackPlugin([copy])
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (Mix.js.vendor) {
|
||||
module.exports.plugins.push(
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
names: ['vendor', 'manifest']
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (Mix.inProduction) {
|
||||
module.exports.plugins = module.exports.plugins.concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Finalizing
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Now that we've declared the entirety of our Webpack configuration, the
|
||||
| final step is to scan for any custom configuration in the Mix file.
|
||||
| If mix.webpackConfig() is called, we'll merge it in, and build!
|
||||
|
|
||||
*/
|
||||
Mix.finalize(module.exports);
|
|
@ -1,29 +0,0 @@
|
|||
let mix = require('laravel-mix').mix;
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Asset Management
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Mix provides a clean, fluent API for defining some Webpack build steps
|
||||
| for your Laravel application. By default, we are compiling the Sass
|
||||
| file for your application, as well as bundling up your JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
mix.js('assets/js/script.js', 'js/script.min.js')
|
||||
.sass('assets/sass/barebones.scss', 'style.css');
|
||||
|
||||
// Full API
|
||||
// mix.js(src, output);
|
||||
// mix.extract(vendorLibs);
|
||||
// mix.sass(src, output);
|
||||
// mix.less(src, output);
|
||||
// mix.combine(files, destination);
|
||||
// mix.copy(from, to);
|
||||
// mix.minify(file);
|
||||
// mix.sourceMaps(); // Enable sourcemaps
|
||||
// mix.version(); // Enable versioning.
|
||||
// mix.disableNotifications();
|
||||
// mix.setPublicPath('path/to/public'); <-- Useful for Node apps.
|
||||
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
|
Loading…
Reference in New Issue