framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add base framework styles

Browse Source
This commit is contained in:
Steve Ross
2024-11-05 17:19:47 +00:00
parent 2204d6691c
commit 6cd48fdd31
33 changed files with 1011 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/fonts/ubuntu-v20-latin-700.woff Normal file
View File

Binary file not shown.

BIN
resources/fonts/ubuntu-v20-latin-700.woff2 Normal file
View File

Binary file not shown.

BIN
resources/fonts/ubuntu-v20-latin-700italic.woff Normal file
View File

Binary file not shown.

BIN
resources/fonts/ubuntu-v20-latin-700italic.woff2 Normal file
View File

Binary file not shown.

BIN
resources/fonts/ubuntu-v20-latin-italic.woff Normal file
View File

Binary file not shown.

BIN
resources/fonts/ubuntu-v20-latin-italic.woff2 Normal file
View File

Binary file not shown.

BIN
resources/fonts/ubuntu-v20-latin-regular.woff Normal file
View File

Binary file not shown.

BIN
resources/fonts/ubuntu-v20-latin-regular.woff2 Normal file
View File

Binary file not shown.

16
resources/styles/app.scss Normal file
View File

@@ -0,0 +1,16 @@
// Global Variables, Mixins, and Framework
@import "global/variables";
@import "global/mixins";
@import "global/fonts";
@import "global/typography";
@import "global/framework";
// Third Party Plugins
@import "plugins/contact-form-7";
@import "plugins/mce";
// Page Styles
@import "views/page";
// Component Styles
@import "components/card";

8
resources/styles/components/_card.scss Normal file
View File

@@ -0,0 +1,8 @@
.card {
position: relative;
margin: 0.5em;
&-wrap {
margin: -0.5em;
}
}

0
resources/styles/app.css → resources/styles/editor.scss
View File

56
resources/styles/global/_fonts.scss Normal file
View File

@@ -0,0 +1,56 @@
$font: "Ubuntu", Helvetica, Arial, sans-serif;
/*
* Roots Fonts Setup
* https://roots.io/sage/docs/fonts-setup/
*
* Self-Hosted Google Fonts (Ubuntu Demo)
* https://gwfh.mranftl.com/fonts/ubuntu?subsets=latin
*
* Add the font to your Tailwind config
* tailwind.config.cjs
*
* Configure theme.json to use the font with Bud
*/
/* stylelint-disable */
/* ubuntu-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: url('~fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
url('~fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ubuntu-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
src: url('~fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
url('~fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ubuntu-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: url('~fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
url('~fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ubuntu-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: url('~fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
url('~fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

4
resources/styles/global/_framework.scss Normal file
View File

@@ -0,0 +1,4 @@
@import "framework/breakpoints";
@import "framework/normalise";
@import "framework/colours";
@import "framework/spacing";

4
resources/styles/global/_mixins.scss Normal file
View File

@@ -0,0 +1,4 @@
@import "mixins/linear-gradient";
@import "mixins/text-contrast";
@import "mixins/generate-colour-classes";
@import "mixins/generate-button-classes";

137
resources/styles/global/_typography.scss Normal file
View File

@@ -0,0 +1,137 @@
.wysiwyg {
*:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $primary;
font-weight: 700;
font-family: $font;
line-height: 1.1em;
margin: 1.5em 0 0.25em;
padding: 0;
&.section-title {
margin-top: 0;
}
@media screen {
.knockout & {
color: $white;
}
}
}
h1 {
font-size: 1.75em;
margin-top: 0;
}
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4,
h5 { font-size: 1.15em; }
@media (min-width: $screen-sm) {
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4,
h5 {
font-size: 1.25em;
}
}
p,
li,
td,
label {
color: $grey;
font-family: $font;
font-weight: 400;
line-height: 1.5em;
margin: 0 0 0.8em;
padding: 0;
@media screen {
.knockout & {
color: $white;
}
}
}
a {
color: $primary;
text-decoration: none;
outline: none;
transition: all 300ms ease;
&:hover,
&:focus {
color: $primary-dark;
text-decoration: none;
}
@media screen {
.knockout & {
color: $white;
&:hover,
&:focus {
color: $primary-light;
}
}
}
}
strong { font-weight: 700; }
small { font-size: 0.8em; }
li {
margin: 0.125em 0;
line-height: 1.5em;
}
ul,
ol {
margin: 0 0 0.7em;
padding: 0 0 0 1.2em;
text-align: left;
}
.nolist {
margin: 0;
padding: 0;
text-align: inherit;
list-style: none;
li {
margin: 0;
padding: 0;
}
}
hr {
margin: 1.5em auto 2em;
height: 0;
border: 0 solid $grey-light;
border-width: $borderThin 0 0;
@media screen {
.knockout & {
border-color: $white;
}
}
}

3
resources/styles/global/_variables.scss Normal file
View File

@@ -0,0 +1,3 @@
@import "variables/colours";
@import "variables/breakpoints";
@import "variables/spacing";

13
resources/styles/global/framework/_breakpoints.scss Normal file
View File

@@ -0,0 +1,13 @@
@each $label, $value in $breakpoints {
.min-#{$label} {
@media (min-width: $value) {
display: none;
}
}
.max-#{$label} {
@media (max-width: ($value - 0.0625)) {
display: none;
}
}
}

9
resources/styles/global/framework/_colours.scss Normal file
View File

@@ -0,0 +1,9 @@
::selection {
color: $white;
background: $primary;
}
@each $color, $hex in $colors {
@include generate_colour_classes($color, $hex);
@include generate_button_colors($color, $hex);
}

25
resources/styles/global/framework/_normalise.scss Normal file
View File

@@ -0,0 +1,25 @@
* {
box-sizing: border-box;
backface-visibility: hidden; // removes jagged edges on rotated elements
}
html {
font-size: 16px;
}
body,
html {
margin: 0;
padding: 0;
background: $white;
}
.visually-hidden {
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

83
resources/styles/global/framework/_spacing.scss Normal file
View File

@@ -0,0 +1,83 @@
.container {
width: 90%;
margin: auto;
&-large { max-width: $containerLarge; }
&-medium { max-width: $containerMedium; }
&-small { max-width: $containerSmall; }
&-narrow { max-width: $containerNarrow; }
}
.section {
padding: $sectionSmall;
@media (min-width: $screen-md) {
padding: $sectionMedium;
}
@media (min-width: $screen-lg) {
padding: $sectionLarge;
}
&-small { padding: $sectionSmall; }
&-medium { padding: $sectionMedium; }
&-large { padding: $sectionLarge; }
&-zero-top { padding-top: 0; }
&-zero-bottom { padding-bottom: 0; }
}
.inner {
padding: $innerMedium;
&-small { padding: $innerSmall; }
&-large { padding: $innerLarge; }
}
.rounded {
border-radius: $borderRadius;
&-top {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&-bottom {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
.border {
border-style: solid;
border-width: $borderWidth;
&-thin { border-width: 0.0625em; }
&-regular { border-width: $borderWidth; }
&-thick { border-width: $borderThick; }
&-thicker { border-width: $borderThicker; }
&-top {
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}
&-right {
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}
&-bottom {
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
}
&-left {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
}
}

66
resources/styles/global/mixins/_generate-button-classes.scss Normal file
View File

@@ -0,0 +1,66 @@
@use "sass:color";
@mixin generate_button_colors($name, $hex) {
$buttons: (
".button",
"button",
"input[type=submit]",
);
@each $button in $buttons {
#{$button}.#{$name} {
color: $white;
background: $hex;
border-color: $hex;
&:hover,
&:focus {
color: $white;
background: color.adjust($hex, $lightness: 10%);
border-color: color.adjust($hex, $lightness: 10%);
}
}
#{$button}.#{$name}.inverted {
color: $hex;
background: transparent;
border-color: $hex;
&:hover,
&:focus {
color: white;
background: #{$hex};
border-color: #{$hex};
}
}
@media screen {
*:not(.bg-#{$name}) #{$button}.#{$name} {
color: white;
background-color: $hex;
border-color: $hex;
&:hover,
&:focus {
color: white;
background-color: color.adjust($hex, $lightness: 10%);
border-color: color.adjust($hex, $lightness: 10%);
}
}
.bg-#{$name} #{$button}.#{$name} {
color: $hex;
background: white;
border-color: white;
&:hover,
&:focus {
color: white;
background: transparent;
border-color: white;
}
}
}
}
}

26
resources/styles/global/mixins/_generate-colour-classes.scss Normal file
View File

@@ -0,0 +1,26 @@
@use "sass:color";
@mixin generate_colour_classes($name, $hex) {
.#{$name} {
color: $hex;
}
.fill-#{$name} {
fill: $hex;
}
.border-#{$name} {
border-color: $hex;
}
@media screen {
.bg-#{$name} {
background-color: $hex;
::selection {
@include text_contrast(color.invert($hex));
background: color.invert($hex);
}
}
}
}

5
resources/styles/global/mixins/_linear-gradient.scss Normal file
View File

@@ -0,0 +1,5 @@
// define as many $color-stops as needed
@mixin linear-gradient($direction, $color-stops...) {
background: list.nth(list.nth($color-stops, 1), 1);
background: linear-gradient($direction, $color-stops);
}

15
resources/styles/global/mixins/_text-contrast.scss Normal file
View File

@@ -0,0 +1,15 @@
@use "sass:color";
@use "sass:math";
@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.667) {
$brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000));
$light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000));
@if abs($brightness) < (math.div($light-color, $cutoff)) {
color: $light;
}
@else {
color: $dark;
}
}

33
resources/styles/global/variables/_breakpoints.scss Normal file
View File

@@ -0,0 +1,33 @@
@use "sass:math";
$px: math.div(1, 16);
$screen-xxs: 22.5em !default;
$screen-xs: 30.0em !default;
$screen-sm: 48.0em !default;
$screen-md: 62.0em !default;
$screen-lg: 75.0em !default;
$screen-xl: 87.5em !default;
$screen-xxl: 100.0em !default;
$screen-xxxl: 120.0em !default;
// So media queries don"t overlap when required
$screen-xxs-max: ($screen-xs - $px) !default;
$screen-xs-max: ($screen-sm - $px) !default;
$screen-sm-max: ($screen-md - $px) !default;
$screen-md-max: ($screen-lg - $px) !default;
$screen-lg-max: ($screen-xl - $px) !default;
$screen-xl-max: ($screen-xxl - $px) !default;
$screen-xxl-max: ($screen-xxxl - $px) !default;
// Breakpoints
$breakpoints: (
"screen-xxs": $screen-xxs,
"screen-xs": $screen-xs,
"screen-sm": $screen-sm,
"screen-md": $screen-md,
"screen-lg": $screen-lg,
"screen-xl": $screen-xl,
"screen-xxl": $screen-xxl,
"screen-xxxl": $screen-xxxl,
);

105
resources/styles/global/variables/_colours.scss Normal file
View File

@@ -0,0 +1,105 @@
@use "sass:color";
//== Status
$success: #39b54a;
$error: #be1e2d;
$alert: #eed202;
//== Brand Colours
$primary: #337ab7;
$secondary: #5bc0de;
$tertiary: invert($primary);
$quaternary: invert($secondary);
//== Primary Tints
$primary-darkest: color.adjust($primary, $lightness: -30%);
$primary-darker: color.adjust($primary, $lightness: -20%);
$primary-dark: color.adjust($primary, $lightness: -10%);
$primary-light: color.adjust($primary, $lightness: 10%);
$primary-lighter: color.adjust($primary, $lightness: 20%);
$primary-lightest: color.adjust($primary, $lightness: 30%);
//== Secondary Tints
$secondary-darkest: color.adjust($secondary, $lightness: -30%);
$secondary-darker: color.adjust($secondary, $lightness: -20%);
$secondary-dark: color.adjust($secondary, $lightness: -10%);
$secondary-light: color.adjust($secondary, $lightness: 10%);
$secondary-lighter: color.adjust($secondary, $lightness: 20%);
$secondary-lightest: color.adjust($secondary, $lightness: 30%);
//== Tertiary Tints
$tertiary-darkest: color.adjust($tertiary, $lightness: -30%);
$tertiary-darker: color.adjust($tertiary, $lightness: -20%);
$tertiary-dark: color.adjust($tertiary, $lightness: -10%);
$tertiary-light: color.adjust($tertiary, $lightness: 10%);
$tertiary-lighter: color.adjust($tertiary, $lightness: 20%);
$tertiary-lightest: color.adjust($tertiary, $lightness: 30%);
//== quaternary Tints
$quaternary-darkest: color.adjust($quaternary, $lightness: -30%);
$quaternary-darker: color.adjust($quaternary, $lightness: -20%);
$quaternary-dark: color.adjust($quaternary, $lightness: -10%);
$quaternary-light: color.adjust($quaternary, $lightness: 10%);
$quaternary-lighter: color.adjust($quaternary, $lightness: 20%);
$quaternary-lightest: color.adjust($quaternary, $lightness: 30%);
//== Shades
$white: white;
$grey-lightest: color.adjust(black, $lightness: 95%);
$grey-lighter: color.adjust(black, $lightness: 80%);
$grey-light: color.adjust(black, $lightness: 70%);
$grey: color.adjust(black, $lightness: 50%);
$grey-dark: color.adjust(black, $lightness: 40%);
$grey-darker: color.adjust(black, $lightness: 20%);
$grey-darkest: color.adjust(black, $lightness: 05%);
$black: black;
//## Colour Array (used in generating colour classes).
$colors: (
// shades
"black": $black,
"grey-darkest": $grey-darkest,
"grey-darker": $grey-darker,
"grey-dark": $grey-dark,
"grey-light": $grey-light,
"grey-lighter": $grey-lighter,
"grey-lightest": $grey-lightest,
"white": $white,
// status
"error": $error,
"success": $success,
"alert": $alert,
// brand
"primary": $primary,
"secondary": $secondary,
"tertiary": $tertiary,
"quaternary": $quaternary,
// primary tints
"primary-darkest": $primary-darkest,
"primary-darker": $primary-darker,
"primary-dark": $primary-dark,
"primary-light": $primary-light,
"primary-lighter": $primary-lighter,
"primary-lightest": $primary-lightest,
// secondary tints
"secondary-darkest": $secondary-darkest,
"secondary-darker": $secondary-darker,
"secondary-dark": $secondary-dark,
"secondary-light": $secondary-light,
"secondary-lighter": $secondary-lighter,
"secondary-lightest": $secondary-lightest,
// tertiary tints
"tertiary-darkest": $tertiary-darkest,
"tertiary-darker": $tertiary-darker,
"tertiary-dark": $tertiary-dark,
"tertiary-light": $tertiary-light,
"tertiary-lighter": $tertiary-lighter,
"tertiary-lightest": $tertiary-lightest,
// quaternary tints
"quaternary-darkest": $quaternary-darkest,
"quaternary-darker": $quaternary-darker,
"quaternary-dark": $quaternary-dark,
"quaternary-light": $quaternary-light,
"quaternary-lighter": $quaternary-lighter,
"quaternary-lightest": $quaternary-lightest,
);

40
resources/styles/global/variables/_spacing.scss Normal file
View File

@@ -0,0 +1,40 @@
@use "sass:math";
$offCanvasWidth: 17.5em;
$tileAspectRatio: math.div(400, 640) * 100%;
$heroAspectRatio: math.div(593, 1920) * 100vw;
$slideAspectRatio: math.div(733, 1920) * 100vw;
$sectionSmallest: 0.500em;
$sectionSmaller: 1.000em;
$sectionSmall: 1.500em;
$sectionMedium: 3.000em;
$sectionLarge: 5.000em;
$sectionLarger: 7.500em;
$sectionLargest: 10.000em;
$containerLarge: 73.125em;
$containerMedium: 60.000em;
$containerSmall: 50.000em;
$containerNarrow: 34.000em;
$innerLarger: 5.000em;
$innerLarger: 3.000em;
$innerLarge: 2.000em;
$innerMedium: 1.500em;
$innerSmall: 1.000em;
$innerSmaller: 0.750em;
$innerSmallest: 0.500em;
$borderRadiusLargeer: 1.500em;
$borderRadiusLarge: 1.000em;
$borderRadius: 1.000em;
$borderRadiusSmall: 0.500em;
$borderRadiusSmaller: 0.250em;
$borderThin: 0.0625em;
$borderWidth: 0.1250em;
$borderThick: 0.2500em;
$borderThicker: 0.5000em;
$borderThickest: 1.0000em;

22
resources/styles/plugins/_contact-form-7.scss Normal file
View File

@@ -0,0 +1,22 @@
.wpcf7 .screen-reader-response {
display: none;
}
.wpcf7-response-output {
@extend p;
@extend .container;
@extend .container-narrow;
padding: 1em 0 0;
margin-top: 2em;
border: 1px solid $grey-light;
border-width: 1px 0 0;
.knockout & {
border-color: rgba($white, 0.3);
}
}
.wpcf7-display-none {
display: none;
}

12
resources/styles/plugins/_mce.scss Normal file
View File

@@ -0,0 +1,12 @@
#mce-responses {
.response {
padding: 0 0 1em;
margin: 0 0 1em;
font-size: 0.875em;
border-bottom: 1px solid $grey-lighter;
}
}
.knockout #mce-responses .response {
border-bottom-color: rgba($white, 0.3);
}

0
resources/styles/editor.css → resources/styles/views/_page.scss
View File