Version 4 with Laravel Mix
This commit is contained in:
Dan Coulthard
parent
0cafd60448
commit
f0198f659b
|
|
@ -1,12 +0,0 @@
|
||||||
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,2 +0,0 @@
|
||||||
js/**/*.js
|
|
||||||
node_modules/**/*.js
|
|
||||||
39
.eslintrc.js
39
.eslintrc.js
|
|
@ -1,39 +0,0 @@
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
73
README.md
73
README.md
|
|
@ -14,8 +14,7 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The
|
||||||
* Minimised HTTP requests for high Web Performance
|
* Minimised HTTP requests for high Web Performance
|
||||||
* Localised strings for multiple language support
|
* Localised strings for multiple language support
|
||||||
* Scss compiling and watching, css minification support
|
* Scss compiling and watching, css minification support
|
||||||
* Rollup.js for js for smallest possible bundles
|
* Image optimisation
|
||||||
* Image optimisation using imagemin.
|
|
||||||
* Base mobile nav out of the box
|
* Base mobile nav out of the box
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
@ -25,85 +24,23 @@ Clone the barebones repositories into your WordPress /wp-content/themes/ directo
|
||||||
git clone https://github.com/benchmarkstudios/barebones
|
git clone https://github.com/benchmarkstudios/barebones
|
||||||
cd barebones
|
cd barebones
|
||||||
|
|
||||||
To include all its optional submodules ([Simple Grid](https://github.com/benchmarkstudios/simple-grid) included):
|
|
||||||
|
|
||||||
git submodule init
|
|
||||||
git submodule update
|
|
||||||
|
|
||||||
#### Dependencies
|
#### Dependencies
|
||||||
|
|
||||||
Install Dependencies:
|
Install Dependencies:
|
||||||
```
|
```
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
.. or with yarn:
|
|
||||||
```
|
|
||||||
yarn
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Using Gulp
|
### Using Gulp
|
||||||
|
|
||||||
Install Gulp as a global NPM package, if you don't have it already on your machine:
|
|
||||||
|
|
||||||
npm install --global gulp
|
|
||||||
|
|
||||||
Install Dependencies, you have haven't done yet:
|
Install Dependencies, you have haven't done yet:
|
||||||
|
|
||||||
npm install
|
npm install
|
||||||
|
|
||||||
Then run:
|
Then run:
|
||||||
|
|
||||||
| Tasks | |
|
| Tasks | |
|
||||||
|----------------|--------------------------------------------------------------------|
|
|---------------------------|--------------------------------------------------------------------|
|
||||||
| `gulp` | *to compile* (All tasks) |
|
| `npx mix watch` | *watch assets for changes* |
|
||||||
| `gulp watch` | *to watch* |
|
| `npx mix --production` | *compile for production* |
|
||||||
| `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)* |
|
|
||||||
|
|
||||||
This will execute all the Gulp tasks on the gulpfile.babel.js.
|
|
||||||
|
|
||||||
### Configuration for Gulp
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
Of course, feel free to modify gulpfile itself.
|
|
||||||
|
|
||||||
### Images
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
Compatible with WordPress 3.2 and above, but always use the latest version.
|
|
||||||
|
|
||||||
## Browser Support
|
|
||||||
|
|
||||||
* Internet Explorer 8.0+
|
|
||||||
* Firefox 3.0+
|
|
||||||
* 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" />
|
|
||||||
```
|
|
||||||
|
|
@ -2,13 +2,14 @@ import $ from 'jquery';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Mobile navigation toggle
|
* Mobile navigation toggle
|
||||||
* @param {mixed} event
|
* @param {mixed} event
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const toggleMenu = (event) => {
|
const toggleMenu = (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
$('.js-menu-toggle, .nav--header').toggleClass('open');
|
$('.js-menu-toggle').toggleClass('open');
|
||||||
$('.header').toggleClass('menu-open');
|
$('body').toggleClass('menu-open');
|
||||||
|
$('.header__navigation').fadeToggle();
|
||||||
};
|
};
|
||||||
|
|
||||||
$('.js-menu-toggle').on('click', toggleMenu);
|
$('.js-menu-toggle').on('click', toggleMenu);
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
body {
|
body {
|
||||||
color: $base-colour;
|
color: map-get($colors, 'base');
|
||||||
font-family: $base-font-family;
|
font-family: $base-font-family;
|
||||||
line-height: $base-line-height;
|
line-height: $base-line-height;
|
||||||
text-size-adjust: none;
|
text-size-adjust: none;
|
||||||
@include font-size($base-font-size);
|
@include font-size($base-font-size);
|
||||||
|
&.menu-open {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
|
@ -28,10 +31,10 @@ dl {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $brand-colour;
|
color: map-get($colors, 'base');
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $base-colour;
|
color: map-get($colors, 'base');
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -50,5 +53,5 @@ a[href^="tel"] {
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: $base-colour;
|
background-color: map-get($colors, 'base');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,13 @@
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
background-color: $base-background-colour;
|
background-color: map-get($colors, 'background');
|
||||||
border: solid 1px $base-colour;
|
border: solid 1px map-get($colors, 'base');
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: $base-colour;
|
color: map-get($colors, 'base');
|
||||||
line-height: $base-spacing-unit * 1.5;
|
line-height: $base-spacing-unit * 1.5;
|
||||||
height: $base-spacing-unit * 1.5;
|
height: $base-spacing-unit * 1.5;
|
||||||
padding: 0 #{$base-spacing-unit / 2};
|
padding: 0 #{$base-spacing-unit * 0.5};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -27,7 +27,7 @@ input[type="radio"] {
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: #{$base-spacing-unit / 4} #{$base-spacing-unit / 2};
|
padding: #{$base-spacing-unit * 0.25} #{$base-spacing-unit * 0.5};
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
|
|
@ -42,7 +42,7 @@ input[disabled] {
|
||||||
select {
|
select {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-left: $base-spacing-unit / 2;
|
padding-left: $base-spacing-unit * 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
|
@ -70,7 +70,7 @@ textarea {
|
||||||
margin-bottom: $base-spacing-unit;
|
margin-bottom: $base-spacing-unit;
|
||||||
.form__label {
|
.form__label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: ($base-spacing-unit / 2);
|
margin-bottom: ($base-spacing-unit * 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: $base-spacing-unit;
|
grid-gap: $base-spacing-unit;
|
||||||
@include resp-max($breakpoint-sm) {
|
@include resp-max($breakpoint-sm) {
|
||||||
grid-gap: $base-spacing-unit / 2;
|
grid-gap: $base-spacing-unit * 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $breakpoint in $breakpoints {
|
@each $breakpoint in $breakpoints {
|
||||||
|
|
|
||||||
|
|
@ -13,22 +13,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alert--success {
|
&.alert--success {
|
||||||
color: $success-colour;
|
color: map-get($colors, 'success');
|
||||||
border-color: $success-colour;
|
border-color: map-get($colors, 'success');
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alert--info {
|
&.alert--info {
|
||||||
color: $info-colour;
|
color: map-get($colors, 'info');
|
||||||
border-color: $info-colour;
|
border-color: map-get($colors, 'info');
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alert--warning {
|
&.alert--warning {
|
||||||
color: $warning-colour;
|
color: map-get($colors, 'warning');
|
||||||
border-color: $warning-colour;
|
border-color: map-get($colors, 'warning');
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alert--danger {
|
&.alert--danger {
|
||||||
color: $danger-colour;
|
color: map-get($colors, 'danger');
|
||||||
border-color: $danger-colour;
|
border-color: map-get($colors, 'danger');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
.btn {
|
.btn {
|
||||||
background-color: $brand-colour;
|
background-color: map-get($colors, 'brand');
|
||||||
color: $base-background-colour;
|
color: map-get($colors, 'background');
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: #{$base-spacing-unit / 4} $base-spacing-unit;
|
padding: #{$base-spacing-unit * 0.25} $base-spacing-unit;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -20,9 +20,9 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: $base-background-colour;
|
background-color: map-get($colors, 'background');
|
||||||
color: $brand-colour;
|
color: map-get($colors, 'brand');
|
||||||
border-color: $brand-colour;
|
border-color: map-get($colors, 'brand');
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-disabled,
|
&.is-disabled,
|
||||||
|
|
@ -33,13 +33,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn--inverse {
|
.btn--inverse {
|
||||||
background-color: $base-background-colour;
|
background-color: map-get($colors, 'background');
|
||||||
color: $brand-colour;
|
color: map-get($colors, 'brand');
|
||||||
border: 1px solid $brand-colour;
|
border: 1px solid map-get($colors, 'brand');
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $brand-colour;
|
background-color: map-get($colors, 'brand');
|
||||||
color: $base-background-colour;
|
color: map-get($colors, 'background');
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -49,11 +49,11 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
+ .btn--block {
|
+ .btn--block {
|
||||||
margin-top: $base-spacing-unit / 4;
|
margin-top: $base-spacing-unit * 0.25;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn--link {
|
.btn--link {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: $brand-colour;
|
color: map-get($colors, 'brand');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,14 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.nav-burger {
|
.nav-burger {
|
||||||
position: fixed;
|
float: right;
|
||||||
top: $base-spacing-unit;
|
|
||||||
right: $base-spacing-unit;
|
|
||||||
z-index: 550;
|
|
||||||
transition: all $animation-speed $animation;
|
transition: all $animation-speed $animation;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-burger__line {
|
.nav-burger__line {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background-color: $brand-colour;
|
background-color: map-get($colors, 'brand');
|
||||||
display: none;
|
display: none;
|
||||||
margin: 8px auto;
|
margin: 8px auto;
|
||||||
transition: all $animation-speed $animation;
|
transition: all $animation-speed $animation;
|
||||||
|
|
@ -60,48 +57,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav--header {
|
.nav--header {
|
||||||
|
|
||||||
// mobile nav
|
|
||||||
@include resp-max($breakpoint-md) {
|
@include resp-max($breakpoint-md) {
|
||||||
position: fixed;
|
ul {
|
||||||
top: 0;
|
list-style: none;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,9 @@
|
||||||
* Media query to respond to a minimum size (mobile first)
|
* Media query to respond to a minimum size (mobile first)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@mixin resp-min($size) {
|
@use "sass:math";
|
||||||
|
|
||||||
|
@mixin resp-min($size) {
|
||||||
@media screen and (min-width: $size) {
|
@media screen and (min-width: $size) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
|
|
@ -26,7 +28,7 @@
|
||||||
|
|
||||||
@mixin font-size($px) {
|
@mixin font-size($px) {
|
||||||
font-size: $px + px;
|
font-size: $px + px;
|
||||||
font-size: #{$px / 16}rem;
|
font-size: #{math.div($px, 16)}rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,3 @@
|
||||||
/**
|
|
||||||
* Colours
|
|
||||||
*/
|
|
||||||
|
|
||||||
$base-colour: #444;
|
|
||||||
$base-background-colour: #fff;
|
|
||||||
|
|
||||||
$brand-colour: #444; // Example
|
|
||||||
$success-colour: #5CB85C;
|
|
||||||
$info-colour: $brand-colour;
|
|
||||||
$warning-colour: #F0AD4E;
|
|
||||||
$danger-colour: #D9534F;
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Typography
|
|
||||||
*/
|
|
||||||
|
|
||||||
$sans-serif-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
||||||
$serif-font-family: Georgia, "Times New Roman", Times, serif;
|
|
||||||
$base-font-family: $sans-serif-font-family;
|
|
||||||
|
|
||||||
$base-font-size: 16;
|
|
||||||
$base-line-height: 1.5;
|
|
||||||
$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Breakpoints
|
* Breakpoints
|
||||||
*/
|
*/
|
||||||
|
|
@ -34,13 +7,16 @@ $breakpoint-md: 1024px;
|
||||||
$breakpoint-sm: 768px;
|
$breakpoint-sm: 768px;
|
||||||
$breakpoint-xs: 480px;
|
$breakpoint-xs: 480px;
|
||||||
|
|
||||||
$breakpoints: (
|
/**
|
||||||
'lg' '(min-width: ' + ($breakpoint-md + 1) + ')',
|
* Typography
|
||||||
'md' '(min-width: ' + ($breakpoint-sm + 1) + ') and (max-width: ' + $breakpoint-md + ')',
|
*/
|
||||||
'sm' '(min-width: ' + ($breakpoint-xs + 1) + ') and (max-width:' + $breakpoint-sm + ')',
|
|
||||||
'xs' '(max-width: ' + $breakpoint-xs + ')'
|
|
||||||
);
|
|
||||||
|
|
||||||
|
$base-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
$alt-font-family: 'Georgia', 'Times New Roman', Times, serif;
|
||||||
|
|
||||||
|
$base-font-size: 16;
|
||||||
|
$base-line-height: 1.5;
|
||||||
|
$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Grid
|
* Grid
|
||||||
|
|
@ -50,6 +26,44 @@ $grid-max-width: 1200px;
|
||||||
$grid-columns: 12;
|
$grid-columns: 12;
|
||||||
$grid-gutter: $base-spacing-unit;
|
$grid-gutter: $base-spacing-unit;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Colors
|
||||||
|
*/
|
||||||
|
|
||||||
|
$colors: (
|
||||||
|
'base': #444,
|
||||||
|
'background': #fff,
|
||||||
|
'brand': #444,
|
||||||
|
'success': #5CB85C,
|
||||||
|
'info': #444,
|
||||||
|
'warning': #F0AD4E,
|
||||||
|
'danger': #D9534F
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Spacing
|
||||||
|
*/
|
||||||
|
|
||||||
|
$spacings: (
|
||||||
|
'xl' ($base-spacing-unit * 4),
|
||||||
|
'lg' ($base-spacing-unit * 3),
|
||||||
|
'md' ($base-spacing-unit * 2),
|
||||||
|
'sm' ($base-spacing-unit * 1),
|
||||||
|
'xs' ($base-spacing-unit * 0.5),
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Font Sizes
|
||||||
|
*/
|
||||||
|
|
||||||
|
$font-sizes: (
|
||||||
|
'2xl' $base-font-size + 16,
|
||||||
|
'xl' $base-font-size + 8,
|
||||||
|
'lg' $base-font-size + 6,
|
||||||
|
'md' $base-font-size + 2,
|
||||||
|
'sm' $base-font-size,
|
||||||
|
'xs' $base-font-size - 2,
|
||||||
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Components
|
* Components
|
||||||
|
|
@ -60,5 +74,6 @@ $border-radius: 3px;
|
||||||
/**
|
/**
|
||||||
* Animations
|
* Animations
|
||||||
*/
|
*/
|
||||||
|
|
||||||
$animation-speed: 250ms;
|
$animation-speed: 250ms;
|
||||||
$animation: ease-in-out;
|
$animation: ease-in-out;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.footer {
|
||||||
|
margin-top: ($base-spacing-unit * 2);
|
||||||
|
}
|
||||||
|
|
@ -1 +1,21 @@
|
||||||
|
.header {
|
||||||
|
padding: $base-spacing-unit 0;
|
||||||
|
margin-bottom: ($base-spacing-unit * 2);
|
||||||
|
.header__navigation {
|
||||||
|
@include resp-max($breakpoint-md) {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: map-get($colors, 'background');
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ Text Domain: barebones
|
||||||
@import 'utils/reset';
|
@import 'utils/reset';
|
||||||
@import 'utils/responsive';
|
@import 'utils/responsive';
|
||||||
@import 'utils/helpers';
|
@import 'utils/helpers';
|
||||||
|
@import 'utils/defaults';
|
||||||
|
|
||||||
// 4. Base stuff
|
// 4. Base stuff
|
||||||
@import 'base/base';
|
@import 'base/base';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
/**
|
||||||
|
* Breakpoints
|
||||||
|
*/
|
||||||
|
|
||||||
|
$breakpoints: (
|
||||||
|
'lg' '(min-width: ' + ($breakpoint-md + 1) + ')',
|
||||||
|
'md' '(min-width: ' + ($breakpoint-sm + 1) + ') and (max-width: ' + $breakpoint-md + ')',
|
||||||
|
'sm' '(min-width: ' + ($breakpoint-xs + 1) + ') and (max-width:' + $breakpoint-sm + ')',
|
||||||
|
'xs' '(max-width: ' + $breakpoint-xs + ')'
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Spacing
|
||||||
|
*/
|
||||||
|
|
||||||
|
@each $spacing in $spacings {
|
||||||
|
$key : nth($spacing, 1);
|
||||||
|
$value : nth($spacing, 2);
|
||||||
|
|
||||||
|
// Padding on the Y axis
|
||||||
|
|
||||||
|
.py-#{$key} {
|
||||||
|
padding-top: $value;
|
||||||
|
padding-bottom: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-#{$key} {
|
||||||
|
padding-top: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb-#{$key} {
|
||||||
|
padding-bottom: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Padding on the X axis
|
||||||
|
|
||||||
|
.px-#{$key} {
|
||||||
|
padding-left: $value;
|
||||||
|
padding-right: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pl-#{$key} {
|
||||||
|
padding-left: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-#{$key} {
|
||||||
|
padding-right: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Margin on the Y axis
|
||||||
|
|
||||||
|
.my-#{$key} {
|
||||||
|
margin-top: $value;
|
||||||
|
margin-bottom: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-#{$key} {
|
||||||
|
margin-top: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-#{$key} {
|
||||||
|
margin-bottom: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Margin on the X axis
|
||||||
|
|
||||||
|
.mx-#{$key} {
|
||||||
|
margin-left: $value;
|
||||||
|
margin-right: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-#{$key} {
|
||||||
|
margin-left: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-#{$key} {
|
||||||
|
margin-right: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fonts
|
||||||
|
*/
|
||||||
|
|
||||||
|
.font-base {
|
||||||
|
font-family: $base-font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-alt {
|
||||||
|
font-family: $alt-font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Font Sizes
|
||||||
|
*/
|
||||||
|
|
||||||
|
@each $font-size in $font-sizes {
|
||||||
|
$key : nth($font-size, 1);
|
||||||
|
$value : nth($font-size, 2);
|
||||||
|
|
||||||
|
.text-#{$key} {
|
||||||
|
@include font-size($value);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Colors
|
||||||
|
*/
|
||||||
|
|
||||||
|
@each $color in $colors {
|
||||||
|
$key : nth($color, 1);
|
||||||
|
$value : nth($color, 2);
|
||||||
|
|
||||||
|
.text-#{$key} {
|
||||||
|
color: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-#{$key} {
|
||||||
|
background-color: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -55,6 +55,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Aligments
|
||||||
|
*/
|
||||||
|
|
||||||
|
.items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Elements visibility
|
* Elements visibility
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -2,21 +2,23 @@
|
||||||
* Grid loop mixin
|
* Grid loop mixin
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@use "sass:math";
|
||||||
|
|
||||||
@mixin grid-loop($name){
|
@mixin grid-loop($name){
|
||||||
@for $i from 0 through $grid-columns {
|
@for $i from 0 through $grid-columns {
|
||||||
@if $i != 0 {
|
@if $i != 0 {
|
||||||
.col--#{$name}-#{$i} {
|
.col--#{$name}-#{$i} {
|
||||||
width: percentage($i/$grid-columns);
|
width: percentage(math.div($i, $grid-columns));
|
||||||
.row--flex & {
|
.row--flex & {
|
||||||
flex-basis: percentage($i/$grid-columns);
|
flex-basis: percentage(math.div($i, $grid-columns));
|
||||||
max-width: percentage($i/$grid-columns);
|
max-width: percentage(math.div($i, $grid-columns));
|
||||||
width: auto;
|
width: auto;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.col--#{$name}-offset-#{$i} {
|
.col--#{$name}-offset-#{$i} {
|
||||||
margin-left: percentage($i/$grid-columns);
|
margin-left: percentage(math.div($i, $grid-columns));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
/**
|
|
||||||
* 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
|
|
||||||
],
|
|
||||||
};
|
|
||||||
14
footer.php
14
footer.php
|
|
@ -1,9 +1,15 @@
|
||||||
<footer class="footer" role="contentinfo">
|
<footer class="footer" role="contentinfo">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<nav class="footer__navigation">
|
<div class="row">
|
||||||
<?php wp_nav_menu(['theme_location' => 'footer', 'menu_class' => 'nav nav--footer']); ?>
|
<div class="col col--lg-3 col--md-3 col--sm-12 col--xs-12">
|
||||||
</nav>
|
<p class="footer__copyright">© <?php echo get_bloginfo( 'name' ); ?> <?php echo date('Y'); ?></p>
|
||||||
<p class="footer__copyright">© <?php echo get_bloginfo( 'name' ); ?> <?php echo date('Y'); ?></p>
|
</div>
|
||||||
|
<div class="col col--lg-8 col--lg-offset-1 col--md-8 col--md-offset-1 col--sm-12 col--xs-12">
|
||||||
|
<nav class="footer__navigation">
|
||||||
|
<?php wp_nav_menu(['theme_location' => 'footer', 'menu_class' => 'nav nav--footer']); ?>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<?php wp_footer(); ?>
|
<?php wp_footer(); ?>
|
||||||
|
|
|
||||||
34
header.php
34
header.php
|
|
@ -20,18 +20,26 @@
|
||||||
<body <?php body_class(); ?>>
|
<body <?php body_class(); ?>>
|
||||||
<header class="header" role="banner">
|
<header class="header" role="banner">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a href="<?php echo get_bloginfo( 'url' ); ?>" class="header__logo">
|
<div class="row row--flex items-center">
|
||||||
<?php echo is_front_page() ? '<h1>' : ''; ?>
|
<div class="col col--lg-3 col--md-3 col--sm-6 col--xs-6">
|
||||||
<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' ); ?>" />
|
<a href="<?php echo get_bloginfo( 'url' ); ?>" class="header__logo">
|
||||||
<?php echo is_front_page() ? '</h1>' : ''; ?>
|
<?php echo is_front_page() ? '<h1>' : ''; ?>
|
||||||
</a>
|
<img src="<?php echo get_bloginfo( 'stylesheet_directory' ); ?>/img/logo.svg" alt="<?php echo get_bloginfo( 'title' ); ?>" />
|
||||||
<a href="#" class="nav-burger js-menu-toggle">
|
<?php echo is_front_page() ? '</h1>' : ''; ?>
|
||||||
<span class="nav-burger__line"></span>
|
</a>
|
||||||
<span class="nav-burger__line"></span>
|
</div>
|
||||||
<span class="nav-burger__line"></span>
|
<div class="col col--lg-8 col--lg-offset-1 col--md-8 col--md-offset-1 col--sm-6 col--xs-6">
|
||||||
</a>
|
<div class="header__navigation">
|
||||||
<nav role="navigation" class="header__navigation">
|
<nav role="navigation">
|
||||||
<?php wp_nav_menu(['theme_location' => 'header', 'menu_class' => 'nav nav--header']); ?>
|
<?php wp_nav_menu(['theme_location' => 'header', 'menu_class' => 'nav nav--header']); ?>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
BIN
img/logo.png
BIN
img/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 4.4 KiB |
37
img/logo.svg
37
img/logo.svg
|
|
@ -1 +1,36 @@
|
||||||
<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>
|
<?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>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 7.5 KiB |
25
index.php
25
index.php
|
|
@ -3,21 +3,18 @@
|
||||||
<main class="main" role="main">
|
<main class="main" role="main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<?php while (have_posts()) : the_post(); ?>
|
<h1 class="text-2xl">Welcome to Barebones</h1>
|
||||||
|
|
||||||
<article <?php post_class(); ?>>
|
<div class="row">
|
||||||
|
<div class="col col--lg-12 col--md-12 col--sm-12 col--xs-12">
|
||||||
<header class="post__header" role="heading">
|
<h2>Base Font / <span class="font-alt">Alternate Font</span></h2>
|
||||||
<h3 class="post__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
|
<p class="text-xl">Text XL</p>
|
||||||
<p class="post__date"><time><?php echo human_time_diff(strtotime($post->post_date)) . ' ' . __('ago'); ?></time></p>
|
<p class="text-lg">Text LG</p>
|
||||||
<p class="post__comments"><?php comments_popup_link(__('No comments yet'), __('1 comment'), __('% comments')); ?></p>
|
<p class="text-md">Text MD</p>
|
||||||
</header>
|
<p class="text-sm">Text SM</p>
|
||||||
|
<p class="text-xs">Text XS</p>
|
||||||
<?php the_content(__('Read More')); ?>
|
</div>
|
||||||
|
</div>
|
||||||
</article>
|
|
||||||
|
|
||||||
<?php endwhile; ?>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"/js/scripts.min.js": "/js/scripts.min.js",
|
||||||
|
"/style.css": "/style.css"
|
||||||
|
}
|
||||||
|
|
@ -1,52 +1,29 @@
|
||||||
{
|
{
|
||||||
"name": "barebones",
|
"name": "barebones",
|
||||||
"version": "3.0.0",
|
"version": "4.0.0",
|
||||||
"author": "Benchmark Studios",
|
"description": "A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. There's lots of these out there but most themes include lots of bloat and files which you might not necessarily need, so we thought we would create our own which is great as a starting point with powerful features to encourage rapid development for most projects.",
|
||||||
"description": "A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond",
|
"main": "gulpfile.babel.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"private": true,
|
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/benchmarkstudios/barebones.git"
|
"url": "git+https://github.com/benchmarkstudios/barebones.git"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [],
|
||||||
"barebones",
|
"author": "",
|
||||||
"boilerplate",
|
"license": "ISC",
|
||||||
"wordpress"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/benchmarkstudios/barebones/issues"
|
"url": "https://github.com/benchmarkstudios/barebones/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/benchmarkstudios/barebones#readme",
|
"homepage": "https://github.com/benchmarkstudios/barebones#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-core": "^6.26.0",
|
"laravel-mix": "^6.0.49",
|
||||||
"babel-preset-env": "^1.6.1",
|
"laravel-mix-purgecss": "^6.0.0",
|
||||||
"babel-preset-stage-2": "^6.24.1",
|
"sass": "^1.64.2",
|
||||||
"babel-register": "^6.26.0",
|
"sass-loader": "^12.6.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": {
|
"dependencies": {
|
||||||
"jquery": "^3.2.1"
|
"jquery": "^3.7.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
// webpack.mix.js
|
||||||
|
|
||||||
|
let mix = require('laravel-mix');
|
||||||
|
require('laravel-mix-purgecss');
|
||||||
|
|
||||||
|
// Config
|
||||||
|
|
||||||
|
mix.webpackConfig({
|
||||||
|
stats: {
|
||||||
|
children: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// CSS
|
||||||
|
|
||||||
|
mix.
|
||||||
|
sass('assets/styles/style.scss', 'style.css')
|
||||||
|
.options({
|
||||||
|
processCssUrls: false
|
||||||
|
})
|
||||||
|
.purgeCss();
|
||||||
|
|
||||||
|
// JS
|
||||||
|
|
||||||
|
mix
|
||||||
|
.js([
|
||||||
|
'assets/scripts/scripts.js'
|
||||||
|
], 'js/scripts.min.js');
|
||||||
Loading…
Reference in New Issue