Congegni
/
barebones
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tidy up, add base responsive nav, update readme

This commit is contained in:
Lukas Juhas 2017-08-25 17:11:48 +01:00
parent f459a49dd3
commit 0d1c5d3e1e
21 changed files with 429 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -16,6 +16,7 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The
* Scss compiling and watching, css minification support
* Rollup.js for js for smallest possible bundles
* Image optimisation using imagemin.
* Base mobile nav out of the box
## Installation
@ -65,6 +66,14 @@ Then run:
*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)*
@ -92,6 +101,8 @@ Compatible with WordPress 3.2 and above, but always use the latest version.
### SVG Fallbacks
Most likely if you need to support IE8
*CSS*
```
...

47
assets/styles/base/_base.scss
View File

@ -1,9 +1,9 @@
body {
color: $base-colour;
font-family: $base-font-family;
@include font-size($base-font-size);
line-height: $base-line-height;
-webkit-text-size-adjust: none;
color: $base-colour;
font-family: $base-font-family;
line-height: $base-line-height;
text-size-adjust: none;
@include font-size($base-font-size);
}
h1,
@ -18,37 +18,34 @@ ul,
ol,
dl,
address {
margin-bottom: $base-spacing-unit;
margin-bottom: $base-spacing-unit;
}
/**
* Basic styles for links
*/
a {
color: $brand-colour;
text-decoration: none;
&:hover {
color: $base-colour;
text-decoration: underline;
}
color: $brand-colour;
text-decoration: none;
&:hover {
color: $base-colour;
text-decoration: underline;
}
}
a[href^="tel"]{
color: inherit;
text-decoration: none;
font-family: inherit;
font-size: inherit;
font-style: inherit;
a[href^="tel"] {
font-size: inherit;
font-family: inherit;
color: inherit;
text-decoration: none;
font-style: inherit;
}
/**
* Rulers
* Rules
*/
hr {
background-color: $base-colour;
height: 1px;
height: 1px;
background-color: $base-colour;
}

132
assets/styles/base/_forms.scss
View File

@ -1,122 +1,126 @@
/**
* Blanket input styles for normalisation
*/
*:focus {
outline: 0;
outline: 0;
}
input,
select,
textarea {
background-color: $base-background-colour;
border: solid 1px $base-colour;
border-radius: 0;
color: $base-colour;
line-height: ($base-spacing-unit * 1.5);
height: ($base-spacing-unit * 1.5);
padding: 0 ($base-spacing-unit / 2);
width: 100%;
background-color: $base-background-colour;
border: solid 1px $base-colour;
border-radius: 0;
color: $base-colour;
line-height: ($base-spacing-unit * 1.5);
height: ($base-spacing-unit * 1.5);
padding: 0 ($base-spacing-unit / 2);
width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
background: transparent;
border: 0;
line-height: normal;
height: auto;
width: auto;
background: transparent;
border: 0;
line-height: normal;
height: auto;
width: auto;
}
input[type="file"] {
line-height: normal;
height: auto;
padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
line-height: normal;
height: auto;
padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
}
input[type="submit"] {
-webkit-border-radius: 0;
border-radius: 0;
border-radius: 0;
}
input[disabled] {
background-color: whitesmoke;
cursor: not-allowed;
background-color: whitesmoke;
cursor: not-allowed;
}
select {
line-height: normal;
padding: 0;
padding-left: ($base-spacing-unit / 2);
line-height: normal;
padding: 0;
padding-left: ($base-spacing-unit / 2);
}
textarea {
min-height: ($base-spacing-unit * 4);
overflow: auto;
vertical-align: top;
resize: vertical;
min-height: ($base-spacing-unit * 4);
overflow: auto;
vertical-align: top;
resize: vertical;
}
/**
* Form utility classes
*/
.form--inline {
.form__group {
display: inline-block;
}
.form__group {
display: inline-block;
}
}
.checkbox,
.radio {
display: block;
padding-left: $base-spacing-unit;
&.inline {
display: inline-block;
}
> input {
float: left;
margin-left: -($base-spacing-unit);
margin-top: 4px;
}
display: block;
padding-left: $base-spacing-unit;
&.inline {
display: inline-block;
}
> input {
float: left;
margin-left: -($base-spacing-unit);
margin-top: 4px;
}
}
.form__group {
display: block;
margin-bottom: $base-spacing-unit;
display: block;
margin-bottom: $base-spacing-unit;
}
.form__label {
display: block;
margin-bottom: ($base-spacing-unit / 2);
display: block;
margin-bottom: ($base-spacing-unit / 2);
}
/**
* Input Group
*
* Allows for prepend/append of elements
* (such as icons) on an input.
*/
.input-group {
position: relative;
> input {
padding: 0 ($base-spacing-unit * 2);
position: relative;
> input {
padding: 0 ($base-spacing-unit * 2);
}
.input-group__addon {
line-height: ($base-spacing-unit * 1.5);
height: ($base-spacing-unit * 1.5);
position: absolute;
text-align: center;
top: 0;
width: ($base-spacing-unit * 1.5);
&:first-child {
left: 0;
}
.input-group__addon {
line-height: ($base-spacing-unit * 1.5);
height: ($base-spacing-unit * 1.5);
position: absolute;
text-align: center;
top: 0;
width: ($base-spacing-unit * 1.5);
&:first-child {
left: 0;
}
&:last-child {
right: 0;
}
&:last-child {
right: 0;
}
}
}

14
assets/styles/base/_images.scss
View File

@ -1,16 +1,14 @@
img {
max-width: 100%;
height: auto;
vertical-align: top;
max-width: 100%;
height: auto;
vertical-align: top;
}
/**
* Responsive images
*/
.is-fluid {
display: block;
width: 100%;
height: auto;
display: block;
width: 100%;
height: auto;
}

14
assets/styles/base/_lists.scss
View File

@ -1,16 +1,16 @@
ul,
ol {
margin-left: $base-spacing-unit;
margin-left: $base-spacing-unit;
}
li {
> ul,
> ol {
margin-bottom: 0;
}
> ul,
> ol {
margin-bottom: 0;
}
}
.list--unstyled {
list-style: none;
margin-left: 0;
margin-left: 0;
list-style: none;
}

2
assets/styles/base/_typography.scss
View File

@ -8,5 +8,5 @@ h6 {
}
small {
font-size: .75em;
font-size: .75em;
}

58
assets/styles/components/_alerts.scss
View File

@ -1,28 +1,34 @@
.alert {
padding: $base-spacing-unit;
margin-bottom: $base-spacing-unit;
border: 1px solid transparent;
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: $base-spacing-unit;
}
&.alert--success {
color: $success-colour;
border-color: $success-colour;
}
&.alert--info {
color: $info-colour;
border-color: $info-colour;
}
&.alert--warning {
color: $warning-colour;
border-color: $warning-colour;
}
&.alert--danger {
color: $danger-colour;
border-color: $danger-colour;
}
padding: $base-spacing-unit;
margin-bottom: $base-spacing-unit;
border: 1px solid transparent;
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: $base-spacing-unit;
}
&.alert--success {
color: $success-colour;
border-color: $success-colour;
}
&.alert--info {
color: $info-colour;
border-color: $info-colour;
}
&.alert--warning {
color: $warning-colour;
border-color: $warning-colour;
}
&.alert--danger {
color: $danger-colour;
border-color: $danger-colour;
}
}

89
assets/styles/components/_buttons.scss
View File

@ -1,54 +1,59 @@
.btn {
background-color: $brand-colour;
color: $base-background-colour;
border: 1px solid transparent;
display: inline-block;
padding: ($base-spacing-unit / 4) $base-spacing-unit;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
width: auto;
transition: all .5s;
&::-moz-focus-inner {
border: 0;
padding: 0;
}
&:hover {
text-decoration: none;
background-color: $base-background-colour;
color: $brand-colour;
border: 1px solid $brand-colour;
}
.is-disabled,
&:disabled {
pointer-events: none;
opacity: .65;
}
}
background-color: $brand-colour;
color: $base-background-colour;
border: 1px solid transparent;
display: inline-block;
padding: ($base-spacing-unit / 4) $base-spacing-unit;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
width: auto;
transition: all .5s;
.btn--inverse {
&::-moz-focus-inner {
border: 0;
padding: 0;
}
&:hover {
text-decoration: none;
background-color: $base-background-colour;
color: $brand-colour;
border: 1px solid $brand-colour;
&:hover {
background-color: $brand-colour;
color: $base-background-colour;
border: 1px solid transparent;
}
}
.is-disabled,
&:disabled {
pointer-events: none;
opacity: .65;
}
}
.btn--inverse {
background-color: $base-background-colour;
color: $brand-colour;
border: 1px solid $brand-colour;
&:hover {
background-color: $brand-colour;
color: $base-background-colour;
border: 1px solid transparent;
}
}
.btn--block {
display: block;
width: 100%;
+ .btn--block {
margin-top: $base-spacing-unit / 4;
}
display: block;
width: 100%;
+ .btn--block {
margin-top: $base-spacing-unit / 4;
}
}
.btn--link {
background-color: transparent;
color: $brand-colour;
background-color: transparent;
color: $brand-colour;
}

114
assets/styles/components/_nav.scss
View File

@ -1,14 +1,102 @@
.nav {
list-style: none;
margin: 0;
> li {
display: inline-block;
margin-right: $base-spacing-unit;
&:last-child {
margin-right: 0;
}
> a {
display: block;
}
}
// hamburger menu
.nav-burger {
position: fixed;
top: $base-spacing-unit;
right: $base-spacing-unit;
z-index: 550;
transition: all $animation-speed $animation;
}
.nav-burger__line {
width: 35px;
height: 3px;
background-color: $brand-colour;
display: none;
margin: 8px auto;
transition: all $animation-speed $animation;
@include resp-max($breakpoint-md) {
display: block;
}
.nav-burger.open & {
&:nth-child(2) {
opacity: 0;
}
&:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
&:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
}
}
// applies to all navs
.nav {
list-style: none;
margin: 0;
> li {
display: inline-block;
margin-right: $base-spacing-unit;
&:last-child {
margin-right: 0;
}
> a {
display: block;
}
}
}
.nav--header {
// header nav styling goes here
// 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;
}
}
}
}
}

48
assets/styles/config/_mixins.scss
View File

@ -1,60 +1,56 @@
/*
* Media query to respond to a minimum size (mobile first)
*/
@mixin resp-min($size) {
@media screen and (min-width: $size) {
@content;
}
@media screen and (min-width: $size) {
@content;
}
}
/*
* Media query to respond to a maximum size
*/
@mixin resp-max($size) {
@media screen and (max-width: $size) {
@content;
}
@media screen and (max-width: $size) {
@content;
}
}
/*
* Output font size in px/rem
*/
@mixin font-size($px) {
font-size: $px + px;
font-size: #{$px / 16}rem;
font-size: $px + px;
font-size: #{$px / 16}rem;
}
/*
* Placeholder mixin for <input>
*/
@mixin placeholder {
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@each $placeholder in $placeholders {
&:#{$placeholder}-placeholder {
@content;
}
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@each $placeholder in $placeholders {
&:#{$placeholder}-placeholder {
@content;
}
}
}
/**
* Clearfix
*/
@mixin clearfix {
&:before,
&:after{
content: " ";
display: table;
}
&:after{
clear: both;
}
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

6
assets/styles/config/_variables.scss
View File

@ -55,3 +55,9 @@ $grid-gutter: $base-spacing-unit;
*/
$border-radius: 3px;
/**
* Animations
*/
$animation-speed: 250ms;
$animation: ease-in-out;

5
assets/styles/layout/_header.scss
View File

@ -0,0 +1,5 @@
.logo {
width: 200px;
height: auto;
display: inline-block;
}

87
assets/styles/utils/_helpers.scss
View File

@ -1,81 +1,84 @@
/**
* Clearing and floating
*/
* Clearing and floating
*/
.alignleft,
.float-left {
float: left;
img & {
margin-right: $base-spacing-unit;
}
float: left;
img & {
margin-right: $base-spacing-unit;
}
}
.alignright,
.float-right {
float: right;
img & {
margin-left : $base-spacing-unit;
}
float: right;
img & {
margin-left : $base-spacing-unit;
}
}
.aligncenter,
.float-center {
display: block;
margin: {
left: auto;
right: auto;
}
img & {
margin-bottom: $base-spacing-unit;
}
display: block;
margin: {
left: auto;
right: auto;
}
img & {
margin-bottom: $base-spacing-unit;
}
}
.clearfix {
@include clearfix();
@include clearfix();
}
/**
* Text aligments
*/
* Text aligments
*/
.align-text-left {
text-align: left;
text-align: left;
}
.align-text-right {
text-align: right;
text-align: right;
}
.align-text-center {
text-align: center;
text-align: center;
}
/**
* Elements visibility
*/
* Elements visibility
*/
.visible-on-mobile {
display: none !important;
@include resp-max($breakpoint-sm) {
display: block !important;
}
display: none !important;
@include resp-max($breakpoint-sm) {
display: block !important;
}
}
.visible-on-tablet {
display: none !important;
@include resp-max($breakpoint-md) {
display: block !important;
}
@include resp-max($breakpoint-sm) {
display: none !important;
@include resp-max($breakpoint-md) {
display: block !important;
}
@include resp-max($breakpoint-sm) {
display: none !important;
}
}
}
.visible-on-desktop {
@include resp-max($breakpoint-md) {
display: none !important;
}
@include resp-max($breakpoint-md) {
display: none !important;
}
}

2
assets/styles/utils/_reset.scss
View File

@ -23,6 +23,7 @@ textarea,
button {
color: inherit;
display: inline-block;
&[disabled] {
cursor: not-allowed;
}
@ -35,6 +36,7 @@ button {
table {
border-collapse: collapse;
border-spacing: 0;
th,
td {
text-align: left;

22
assets/styles/utils/_responsive.scss
View File

@ -1,18 +1,16 @@
@each $breakpoint in $breakpoints {
$key : nth($breakpoint, 1);
$value : nth($breakpoint, 2);
$key : nth($breakpoint, 1);
$value : nth($breakpoint, 2);
.visible-#{$key} {
@media only screen and #{$value} {
display: block !important;
}
.visible-#{$key} {
@media only screen and #{$value} {
display: block !important;
}
}
.hidden-#{$key} {
@media only screen and #{$value} {
display: none !important;
}
.hidden-#{$key} {
@media only screen and #{$value} {
display: none !important;
}
}
}

2
css/core.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/styles.min.css vendored
View File

@ -1 +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}
.logo{width:200px;height:auto;display:inline-block}.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-burger{position:fixed;top:24px;right:24px;z-index:550;-webkit-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}.nav-burger__line{width:35px;height:3px;background-color:#444;display:none;margin:8px auto;-webkit-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}@media screen and (max-width: 768px){.nav-burger__line{display:block}}.nav-burger.open .nav-burger__line:nth-child(2){opacity:0}.nav-burger.open .nav-burger__line:nth-child(1){-webkit-transform:translateY(11px) rotate(45deg);-ms-transform:translateY(11px) rotate(45deg);transform:translateY(11px) rotate(45deg)}.nav-burger.open .nav-burger__line:nth-child(3){-webkit-transform:translateY(-11px) rotate(-45deg);-ms-transform:translateY(-11px) rotate(-45deg);transform:translateY(-11px) rotate(-45deg)}.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}@media screen and (max-width: 768px){.nav--header{position:fixed;top:0;left:0;visibility:hidden;width:0;height:100%;margin:0;-webkit-transition:opacity 500ms ease;-o-transition:opacity 500ms ease;transition:opacity 500ms ease;-webkit-transition:opacity .35s ease, visibility .35s ease, width .35s ease;-o-transition:opacity .35s ease, visibility .35s ease, width .35s ease;transition:opacity .35s ease, visibility .35s ease, width .35s ease;text-align:center;opacity:0;background:#fff;-webkit-overflow-scrolling:touch}.nav--header.open{z-index:500;visibility:visible;width:100%;opacity:1}.nav--header.open ul{position:absolute;top:50%;left:0;overflow:auto;width:100%;max-height:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-touch-callout:none;-webkit-overflow-scrolling:touch}.nav--header.open ul>li{width:100%;margin:0}}.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}

19
header.php
View File

@ -14,7 +14,7 @@
*/
echo file_get_contents(sprintf('%s/css/core.min.css', get_stylesheet_directory())); ?>
</style>
<link rel="stylesheet" href="<?php echo get_bloginfo( 'stylesheet_url' ) . '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>">
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url') . '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>">
<?php wp_head(); ?>
<!--[if lt IE 10]>
@ -29,14 +29,19 @@
<body <?php body_class(); ?>>
<header class="header" role="banner">
<div class="container">
<a href="<?php bloginfo('url'); ?>" class="logo logo--header">
<?php echo is_front_page() ? '<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 echo is_front_page() ? '</h1>' : ''; ?>
</a>
<a href="#" class="nav-burger js-menu-toggle">
<span class="nav-burger__line"></span>
<span class="nav-burger__line"></span>
<span class="nav-burger__line"></span>
</a>
<nav role="navigation">
<?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>

1
js/script.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
js/scripts.min.js vendored
View File

File diff suppressed because one or more lines are too long