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

Version 4 with Laravel Mix

Browse source
This commit is contained in:
Dan Coulthard 2023-08-03 12:57:13 +01:00
parent 0cafd60448
commit f0198f659b
32 changed files with 13032 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

11
assets/styles/base/_base.scss
View file

@ -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');
}

14
assets/styles/base/_forms.scss
View file

@ -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);
}
}
}

2
assets/styles/base/_grid.scss
View file

@ -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 {

16
assets/styles/components/_alerts.scss
View file

@ -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');
}
}

26
assets/styles/components/_buttons.scss
View file

@ -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');
}

50
assets/styles/components/_nav.scss
View file

@ -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;
}
}
}

6
assets/styles/config/_mixins.scss
View file

@ -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;
}

83
assets/styles/config/_variables.scss
View file

@ -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;

3
assets/styles/layout/_footer.scss
View file

@ -0,0 +1,3 @@
.footer {
margin-top: ($base-spacing-unit * 2);
}

22
assets/styles/layout/_header.scss
View file

@ -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;
}
}
}
}

1
assets/styles/style.scss
View file

@ -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';

124
assets/styles/utils/_defaults.scss Normal file
View file

@ -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;
}
}

8
assets/styles/utils/_helpers.scss
View file

@ -55,6 +55,14 @@
}
/**
* Aligments
*/
.items-center {
align-items: center;
}
/**
* Elements visibility
*/

2
assets/styles/vendor/simple-grid/_defaults.scss vendored
View file

@ -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;

10
assets/styles/vendor/simple-grid/_mixins.scss vendored
View file

@ -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));
}
}
}