Welcome to Barebones
-Base Font / Alternate Font
+Text XL
+Text LG
+Text MD
+Text SM
+Text XS
+diff --git a/.babelrc b/.babelrc
deleted file mode 100755
index 5739731..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ["env", "stage-2"],
- "comments": false,
-}
diff --git a/.editorconfig b/.editorconfig
deleted file mode 100755
index 4bd3bd8..0000000
--- a/.editorconfig
+++ /dev/null
@@ -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
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100755
index 927ee99..0000000
--- a/.eslintignore
+++ /dev/null
@@ -1,2 +0,0 @@
-js/**/*.js
-node_modules/**/*.js
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100755
index bb764df..0000000
--- a/.eslintrc.js
+++ /dev/null
@@ -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
- }
-}
diff --git a/README.md b/README.md
index 0239ca6..53a9917 100755
--- a/README.md
+++ b/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
* Localised strings for multiple language support
* Scss compiling and watching, css minification support
-* Rollup.js for js for smallest possible bundles
-* Image optimisation using imagemin.
+* Image optimisation
* Base mobile nav out of the box
## Installation
@@ -25,85 +24,23 @@ Clone the barebones repositories into your WordPress /wp-content/themes/ directo
git clone https://github.com/benchmarkstudios/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
Install Dependencies:
```
npm install
```
-
-.. 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 Dependencies, you have haven't done yet:
npm install
Then run:
-| Tasks | |
-|----------------|--------------------------------------------------------------------|
-| `gulp` | *to compile* (All tasks) |
-| `gulp watch` | *to watch* |
-| `gulp images` | *to optimise images* |
-| `gulp styles` | *to compile styles* |
-| `gulp scripts` | *to compile scripts* |
-| `gulp build` | *to create a build (minification, removes map files and comments)* |
-
-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*
-```
-
-```
+| Tasks | |
+|---------------------------|--------------------------------------------------------------------|
+| `npx mix watch` | *watch assets for changes* |
+| `npx mix --production` | *compile for production* |
\ No newline at end of file
diff --git a/assets/scripts/scripts.js b/assets/scripts/scripts.js
index d3e6416..29a9b85 100755
--- a/assets/scripts/scripts.js
+++ b/assets/scripts/scripts.js
@@ -2,13 +2,14 @@ import $ from 'jquery';
/**
* Mobile navigation toggle
- * @param {mixed} event
+ * @param {mixed} event
*/
const toggleMenu = (event) => {
event.preventDefault();
- $('.js-menu-toggle, .nav--header').toggleClass('open');
- $('.header').toggleClass('menu-open');
+ $('.js-menu-toggle').toggleClass('open');
+ $('body').toggleClass('menu-open');
+ $('.header__navigation').fadeToggle();
};
$('.js-menu-toggle').on('click', toggleMenu);
diff --git a/assets/styles/base/_base.scss b/assets/styles/base/_base.scss
index 5acad70..9b8ff6d 100755
--- a/assets/styles/base/_base.scss
+++ b/assets/styles/base/_base.scss
@@ -1,9 +1,12 @@
body {
- color: $base-colour;
+ color: map-get($colors, 'base');
font-family: $base-font-family;
line-height: $base-line-height;
text-size-adjust: none;
@include font-size($base-font-size);
+ &.menu-open {
+ overflow: hidden;
+ }
}
h1,
@@ -28,10 +31,10 @@ dl {
*/
a {
- color: $brand-colour;
+ color: map-get($colors, 'base');
text-decoration: none;
&:hover {
- color: $base-colour;
+ color: map-get($colors, 'base');
text-decoration: underline;
}
}
@@ -50,5 +53,5 @@ a[href^="tel"] {
hr {
height: 1px;
- background-color: $base-colour;
+ background-color: map-get($colors, 'base');
}
diff --git a/assets/styles/base/_forms.scss b/assets/styles/base/_forms.scss
index 0207b7f..9190fec 100755
--- a/assets/styles/base/_forms.scss
+++ b/assets/styles/base/_forms.scss
@@ -5,13 +5,13 @@
input,
select,
textarea {
- background-color: $base-background-colour;
- border: solid 1px $base-colour;
+ background-color: map-get($colors, 'background');
+ border: solid 1px map-get($colors, 'base');
border-radius: 0;
- color: $base-colour;
+ color: map-get($colors, 'base');
line-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%;
}
@@ -27,7 +27,7 @@ input[type="radio"] {
input[type="file"] {
line-height: normal;
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"] {
@@ -42,7 +42,7 @@ input[disabled] {
select {
line-height: normal;
padding: 0;
- padding-left: $base-spacing-unit / 2;
+ padding-left: $base-spacing-unit * 0.5;
}
textarea {
@@ -70,7 +70,7 @@ textarea {
margin-bottom: $base-spacing-unit;
.form__label {
display: block;
- margin-bottom: ($base-spacing-unit / 2);
+ margin-bottom: ($base-spacing-unit * 0.5);
}
}
}
\ No newline at end of file
diff --git a/assets/styles/base/_grid.scss b/assets/styles/base/_grid.scss
index 337fdd3..3d91e1b 100644
--- a/assets/styles/base/_grid.scss
+++ b/assets/styles/base/_grid.scss
@@ -2,7 +2,7 @@
display: grid;
grid-gap: $base-spacing-unit;
@include resp-max($breakpoint-sm) {
- grid-gap: $base-spacing-unit / 2;
+ grid-gap: $base-spacing-unit * 0.5;
}
@each $breakpoint in $breakpoints {
diff --git a/assets/styles/components/_alerts.scss b/assets/styles/components/_alerts.scss
index cfc753d..28292fc 100755
--- a/assets/styles/components/_alerts.scss
+++ b/assets/styles/components/_alerts.scss
@@ -13,22 +13,22 @@
}
&.alert--success {
- color: $success-colour;
- border-color: $success-colour;
+ color: map-get($colors, 'success');
+ border-color: map-get($colors, 'success');
}
&.alert--info {
- color: $info-colour;
- border-color: $info-colour;
+ color: map-get($colors, 'info');
+ border-color: map-get($colors, 'info');
}
&.alert--warning {
- color: $warning-colour;
- border-color: $warning-colour;
+ color: map-get($colors, 'warning');
+ border-color: map-get($colors, 'warning');
}
&.alert--danger {
- color: $danger-colour;
- border-color: $danger-colour;
+ color: map-get($colors, 'danger');
+ border-color: map-get($colors, 'danger');
}
}
diff --git a/assets/styles/components/_buttons.scss b/assets/styles/components/_buttons.scss
index c62fddf..3d9fe73 100755
--- a/assets/styles/components/_buttons.scss
+++ b/assets/styles/components/_buttons.scss
@@ -1,9 +1,9 @@
.btn {
- background-color: $brand-colour;
- color: $base-background-colour;
+ background-color: map-get($colors, 'brand');
+ color: map-get($colors, 'background');
border: 1px solid transparent;
display: inline-block;
- padding: #{$base-spacing-unit / 4} $base-spacing-unit;
+ padding: #{$base-spacing-unit * 0.25} $base-spacing-unit;
text-align: center;
white-space: nowrap;
vertical-align: middle;
@@ -20,9 +20,9 @@
&:hover {
text-decoration: none;
- background-color: $base-background-colour;
- color: $brand-colour;
- border-color: $brand-colour;
+ background-color: map-get($colors, 'background');
+ color: map-get($colors, 'brand');
+ border-color: map-get($colors, 'brand');
}
&.is-disabled,
@@ -33,13 +33,13 @@
}
.btn--inverse {
- background-color: $base-background-colour;
- color: $brand-colour;
- border: 1px solid $brand-colour;
+ background-color: map-get($colors, 'background');
+ color: map-get($colors, 'brand');
+ border: 1px solid map-get($colors, 'brand');
&:hover {
- background-color: $brand-colour;
- color: $base-background-colour;
+ background-color: map-get($colors, 'brand');
+ color: map-get($colors, 'background');
border-color: transparent;
}
}
@@ -49,11 +49,11 @@
width: 100%;
+ .btn--block {
- margin-top: $base-spacing-unit / 4;
+ margin-top: $base-spacing-unit * 0.25;
}
}
.btn--link {
background-color: transparent;
- color: $brand-colour;
+ color: map-get($colors, 'brand');
}
diff --git a/assets/styles/components/_nav.scss b/assets/styles/components/_nav.scss
index cd28a6f..35252bc 100755
--- a/assets/styles/components/_nav.scss
+++ b/assets/styles/components/_nav.scss
@@ -3,17 +3,14 @@
*/
.nav-burger {
- position: fixed;
- top: $base-spacing-unit;
- right: $base-spacing-unit;
- z-index: 550;
+ float: right;
transition: all $animation-speed $animation;
}
.nav-burger__line {
width: 35px;
height: 3px;
- background-color: $brand-colour;
+ background-color: map-get($colors, 'brand');
display: none;
margin: 8px auto;
transition: all $animation-speed $animation;
@@ -60,48 +57,9 @@
}
.nav--header {
-
- // mobile nav
@include resp-max($breakpoint-md) {
- position: fixed;
- top: 0;
- left: 0;
- visibility: hidden;
- width: 0;
- height: 100%;
- margin: 0;
- transition: opacity 500ms ease;
- transition: opacity .35s ease, visibility .35s ease, width .35s ease;
- text-align: center;
- opacity: 0;
- background: $base-background-colour;
- -webkit-overflow-scrolling: touch;
-
- &.open {
- z-index: 500;
- visibility: visible;
- width: 100%;
- opacity: 1;
-
- ul {
- position: absolute;
- top: 50%;
- left: 0;
- overflow: auto;
- width: 100%;
- max-height: 100%;
- margin: 0;
- padding: 0;
- user-select: none;
- transform: translateY(-50%);
- -webkit-touch-callout: none;
- -webkit-overflow-scrolling: touch;
-
- > li {
- width: 100%;
- margin: 0;
- }
- }
+ ul {
+ list-style: none;
}
}
}
diff --git a/assets/styles/config/_mixins.scss b/assets/styles/config/_mixins.scss
index b595d16..858a5d5 100755
--- a/assets/styles/config/_mixins.scss
+++ b/assets/styles/config/_mixins.scss
@@ -2,7 +2,9 @@
* 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) {
@content;
}
@@ -26,7 +28,7 @@
@mixin font-size($px) {
font-size: $px + px;
- font-size: #{$px / 16}rem;
+ font-size: #{math.div($px, 16)}rem;
}
diff --git a/assets/styles/config/_variables.scss b/assets/styles/config/_variables.scss
index dcf700c..089db4a 100755
--- a/assets/styles/config/_variables.scss
+++ b/assets/styles/config/_variables.scss
@@ -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
*/
@@ -34,13 +7,16 @@ $breakpoint-md: 1024px;
$breakpoint-sm: 768px;
$breakpoint-xs: 480px;
-$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 + ')'
-);
+/**
+ * Typography
+ */
+$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
@@ -50,6 +26,44 @@ $grid-max-width: 1200px;
$grid-columns: 12;
$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
@@ -60,5 +74,6 @@ $border-radius: 3px;
/**
* Animations
*/
+
$animation-speed: 250ms;
-$animation: ease-in-out;
+$animation: ease-in-out;
\ No newline at end of file
diff --git a/assets/styles/layout/_footer.scss b/assets/styles/layout/_footer.scss
index e69de29..39c61c8 100755
--- a/assets/styles/layout/_footer.scss
+++ b/assets/styles/layout/_footer.scss
@@ -0,0 +1,3 @@
+.footer {
+ margin-top: ($base-spacing-unit * 2);
+}
\ No newline at end of file
diff --git a/assets/styles/layout/_header.scss b/assets/styles/layout/_header.scss
index 8b13789..fa40a34 100755
--- a/assets/styles/layout/_header.scss
+++ b/assets/styles/layout/_header.scss
@@ -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;
+ }
+ }
+ }
+}
diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index d8d01a8..0cc0b61 100755
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -23,6 +23,7 @@ Text Domain: barebones
@import 'utils/reset';
@import 'utils/responsive';
@import 'utils/helpers';
+@import 'utils/defaults';
// 4. Base stuff
@import 'base/base';
diff --git a/assets/styles/utils/_defaults.scss b/assets/styles/utils/_defaults.scss
new file mode 100644
index 0000000..d5c59fe
--- /dev/null
+++ b/assets/styles/utils/_defaults.scss
@@ -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;
+ }
+
+}
diff --git a/assets/styles/utils/_helpers.scss b/assets/styles/utils/_helpers.scss
index 0b00cb1..295bbad 100755
--- a/assets/styles/utils/_helpers.scss
+++ b/assets/styles/utils/_helpers.scss
@@ -55,6 +55,14 @@
}
+/**
+* Aligments
+*/
+
+.items-center {
+ align-items: center;
+}
+
/**
* Elements visibility
*/
diff --git a/assets/styles/vendor/simple-grid/_defaults.scss b/assets/styles/vendor/simple-grid/_defaults.scss
index fc70304..cd29ebc 100755
--- a/assets/styles/vendor/simple-grid/_defaults.scss
+++ b/assets/styles/vendor/simple-grid/_defaults.scss
@@ -33,4 +33,4 @@ $breakpoints: (
'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 + ')'
-) !default;
+) !default;
\ No newline at end of file
diff --git a/assets/styles/vendor/simple-grid/_mixins.scss b/assets/styles/vendor/simple-grid/_mixins.scss
index 6782568..5500efb 100755
--- a/assets/styles/vendor/simple-grid/_mixins.scss
+++ b/assets/styles/vendor/simple-grid/_mixins.scss
@@ -2,21 +2,23 @@
* Grid loop mixin
*/
+@use "sass:math";
+
@mixin grid-loop($name){
@for $i from 0 through $grid-columns {
@if $i != 0 {
.col--#{$name}-#{$i} {
- width: percentage($i/$grid-columns);
+ width: percentage(math.div($i, $grid-columns));
.row--flex & {
- flex-basis: percentage($i/$grid-columns);
- max-width: percentage($i/$grid-columns);
+ flex-basis: percentage(math.div($i, $grid-columns));
+ max-width: percentage(math.div($i, $grid-columns));
width: auto;
float: none;
}
}
}
.col--#{$name}-offset-#{$i} {
- margin-left: percentage($i/$grid-columns);
+ margin-left: percentage(math.div($i, $grid-columns));
}
}
}
diff --git a/config.barebones.js b/config.barebones.js
deleted file mode 100755
index 0daa27b..0000000
--- a/config.barebones.js
+++ /dev/null
@@ -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
- ],
-};
diff --git a/footer.php b/footer.php
index f67f32e..2d8e4ae 100755
--- a/footer.php
+++ b/footer.php
@@ -1,9 +1,15 @@
diff --git a/header.php b/header.php
index 478d88e..e5b139f 100755
--- a/header.php
+++ b/header.php
@@ -20,18 +20,26 @@