barbican-reset 1.8.4 → 1.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/helpers/functions/index.scss +4 -0
- package/helpers/variables/colors/brand/_generic.scss +8 -6
- package/library/gulpfile.js +16 -0
- package/library/index.js +13 -0
- package/library/scss/colors/generic.scss +13 -0
- package/library/scss/styles.scss +38 -0
- package/library/static/styles.css +119 -0
- package/library/views/index.pug +18 -0
- package/library/views/layout.pug +8 -0
- package/library/views/mixins/test.pug +2 -0
- package/package.json +8 -5
- package/scss/_atomic.scss +1 -1
- package/scss/_br-container.scss +49 -0
- package/scss/_close-icon.scss +1 -1
- package/scss/index.scss +1 -0
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
|
|
2
|
-
$c-brand-generic:
|
|
2
|
+
$c-brand-generic: generic(100%, 41%);
|
|
3
3
|
|
|
4
4
|
$c-brand-generic-tint-98: tint($c-brand-generic, 98%);
|
|
5
5
|
$c-brand-generic-tint-70: tint($c-brand-generic, 70%);
|
|
6
6
|
$c-brand-generic-tint-40: tint($c-brand-generic, 40%);
|
|
7
7
|
|
|
8
|
-
$c-brand-generic-
|
|
9
|
-
$c-brand-generic-
|
|
10
|
-
$c-brand-generic-
|
|
11
|
-
$c-brand-generic-
|
|
12
|
-
$c-brand-generic-
|
|
8
|
+
$c-brand-generic-s60-l99: generic(60%, 99%); // faint
|
|
9
|
+
$c-brand-generic-s100-l95: generic(100%, 95%); // light
|
|
10
|
+
$c-brand-generic-s50-l90: generic(50%, 90%); // shade
|
|
11
|
+
$c-brand-generic-s100-l38: generic(100%, 38%); // dark
|
|
12
|
+
$c-brand-generic-s100-l15: generic(100%, 15%); // x-dark
|
|
13
|
+
|
|
14
|
+
$c-brand-generic-test: hsl(21, 100%, 98%);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
|
|
2
|
+
const gulp = require('gulp');
|
|
3
|
+
const sass = require('gulp-sass')(require('sass'));
|
|
4
|
+
const tilde = require('node-sass-tilde-importer');
|
|
5
|
+
|
|
6
|
+
gulp.task('build:css', done => {
|
|
7
|
+
gulp.src('scss/styles.scss')
|
|
8
|
+
.pipe(sass({ importer : tilde }).on('error', sass.logError))
|
|
9
|
+
.pipe(gulp.dest('static'));
|
|
10
|
+
done();
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
gulp.task('watch', done => {
|
|
14
|
+
gulp.watch('scss/**/*.scss', gulp.series(['build:css']));
|
|
15
|
+
done();
|
|
16
|
+
});
|
package/library/index.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const express = require('express')
|
|
2
|
+
const app = express()
|
|
3
|
+
const port = 3000
|
|
4
|
+
|
|
5
|
+
// To run server: node index
|
|
6
|
+
|
|
7
|
+
app.set('view engine', 'pug')
|
|
8
|
+
|
|
9
|
+
app.use(express.static(__dirname + '/static'));
|
|
10
|
+
|
|
11
|
+
app.get('/', (req, res) => res.render('index', { title: 'Hey', message: 'Hello there' }))
|
|
12
|
+
|
|
13
|
+
app.listen(port, () => console.log(`Example app listening on port ${port}`))
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
|
|
2
|
+
> li {
|
|
3
|
+
background-color: $c-brand-generic;
|
|
4
|
+
|
|
5
|
+
&.tint-98 { background-color: $c-brand-generic-tint-98; }
|
|
6
|
+
&.tint-70 { background-color: $c-brand-generic-tint-70; }
|
|
7
|
+
&.tint-40 { background-color: $c-brand-generic-tint-40; }
|
|
8
|
+
&.s60-l99 { background-color: $c-brand-generic-s60-l99; }
|
|
9
|
+
&.s100-l95 { background-color: $c-brand-generic-s100-l95; }
|
|
10
|
+
&.s50-l90 { background-color: $c-brand-generic-s50-l90; }
|
|
11
|
+
&.s100-l38 { background-color: $c-brand-generic-s100-l38; }
|
|
12
|
+
&.s100-l15 { background-color: $c-brand-generic-s100-l15; }
|
|
13
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
@import "../../node_modules/bootstrap/scss/functions";
|
|
2
|
+
@import "../../node_modules/bootstrap/scss/variables";
|
|
3
|
+
@import "../../node_modules/bootstrap/scss/mixins";
|
|
4
|
+
@import "../../helpers/index";
|
|
5
|
+
|
|
6
|
+
@import "../../scss/fonts";
|
|
7
|
+
@import "../../scss/br-container";
|
|
8
|
+
|
|
9
|
+
body {
|
|
10
|
+
line-height: $line-height-md;
|
|
11
|
+
font-family: $font-family;
|
|
12
|
+
color: $c-grey-night;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.br-color--palette {
|
|
16
|
+
list-style: none;
|
|
17
|
+
display: flex;
|
|
18
|
+
gap: 0.125rem;
|
|
19
|
+
padding: 0;
|
|
20
|
+
margin: 0;
|
|
21
|
+
|
|
22
|
+
&.generic { @import "scss/colors/generic"; }
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.br-color--sample {
|
|
26
|
+
background: grey;
|
|
27
|
+
height: 6.25rem;
|
|
28
|
+
width: 6.25rem;
|
|
29
|
+
|
|
30
|
+
&.test {
|
|
31
|
+
text-transform: uppercase;
|
|
32
|
+
place-content: center;
|
|
33
|
+
font-weight: bold;
|
|
34
|
+
color: grey;
|
|
35
|
+
display: grid;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "FuturaLTPro";
|
|
3
|
+
src: url("../fonts/FuturaLTPro-Book.woff") format("woff"), url("../fonts/FuturaLTPro-Book.woff2") format("woff2");
|
|
4
|
+
font-style: normal;
|
|
5
|
+
}
|
|
6
|
+
@font-face {
|
|
7
|
+
font-family: "FuturaLTPro";
|
|
8
|
+
src: url("../fonts/FuturaLTPro-BookOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BookOblique.woff2") format("woff2");
|
|
9
|
+
font-style: italic;
|
|
10
|
+
}
|
|
11
|
+
@font-face {
|
|
12
|
+
font-family: "FuturaLTPro";
|
|
13
|
+
src: url("../fonts/FuturaLTPro-Bold.woff") format("woff"), url("../fonts/FuturaLTPro-Bold.woff2") format("woff2");
|
|
14
|
+
font-style: normal;
|
|
15
|
+
font-weight: bold;
|
|
16
|
+
}
|
|
17
|
+
@font-face {
|
|
18
|
+
font-family: "FuturaLTPro";
|
|
19
|
+
src: url("../fonts/FuturaLTPro-BoldOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BoldOblique.woff2") format("woff2");
|
|
20
|
+
font-style: italic;
|
|
21
|
+
font-weight: bold;
|
|
22
|
+
}
|
|
23
|
+
.br-container--outer {
|
|
24
|
+
padding-right: 5%;
|
|
25
|
+
padding-left: 5%;
|
|
26
|
+
}
|
|
27
|
+
.br-container--outer.splash {
|
|
28
|
+
padding-right: 10%;
|
|
29
|
+
padding-left: 10%;
|
|
30
|
+
}
|
|
31
|
+
.br-container--outer.masthead {
|
|
32
|
+
box-shadow: 0 0.375rem 0.375rem rgba(0, 0, 0, 0.1);
|
|
33
|
+
background-color: white;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.br-container--inner {
|
|
37
|
+
max-width: 75rem;
|
|
38
|
+
margin: 0 auto;
|
|
39
|
+
}
|
|
40
|
+
.br-container--inner:not(.footer) {
|
|
41
|
+
padding-bottom: 1.5rem;
|
|
42
|
+
padding-top: 1.5rem;
|
|
43
|
+
}
|
|
44
|
+
@media (min-width: 32.5em) {
|
|
45
|
+
.br-container--inner:not(.footer) {
|
|
46
|
+
padding-bottom: 2.5rem;
|
|
47
|
+
padding-top: 2.5rem;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
.br-container--inner.header {
|
|
51
|
+
padding-bottom: 1.875rem;
|
|
52
|
+
padding-top: 1.875rem;
|
|
53
|
+
}
|
|
54
|
+
.br-container--inner.thin {
|
|
55
|
+
max-width: 50rem;
|
|
56
|
+
}
|
|
57
|
+
@media (min-width: 32.5em) {
|
|
58
|
+
.br-container--inner.masthead {
|
|
59
|
+
padding-bottom: 3rem;
|
|
60
|
+
padding-top: 3rem;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
.br-container--inner.masthead h1 {
|
|
64
|
+
margin: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
body {
|
|
68
|
+
line-height: 1.4;
|
|
69
|
+
font-family: FuturaLTPro, "Helvetica", "Arial", sans-serif;
|
|
70
|
+
color: #353535;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.br-color--palette {
|
|
74
|
+
list-style: none;
|
|
75
|
+
display: flex;
|
|
76
|
+
gap: 0.125rem;
|
|
77
|
+
padding: 0;
|
|
78
|
+
margin: 0;
|
|
79
|
+
}
|
|
80
|
+
.br-color--palette.generic > li {
|
|
81
|
+
background-color: hsl(21deg, 100%, 41%);
|
|
82
|
+
}
|
|
83
|
+
.br-color--palette.generic > li.tint-98 {
|
|
84
|
+
background-color: #fefbfa;
|
|
85
|
+
}
|
|
86
|
+
.br-color--palette.generic > li.tint-70 {
|
|
87
|
+
background-color: #f1c8b3;
|
|
88
|
+
}
|
|
89
|
+
.br-color--palette.generic > li.tint-40 {
|
|
90
|
+
background-color: #e39266;
|
|
91
|
+
}
|
|
92
|
+
.br-color--palette.generic > li.s60-l99 {
|
|
93
|
+
background-color: hsl(21deg, 60%, 99%);
|
|
94
|
+
}
|
|
95
|
+
.br-color--palette.generic > li.s100-l95 {
|
|
96
|
+
background-color: hsl(21deg, 100%, 95%);
|
|
97
|
+
}
|
|
98
|
+
.br-color--palette.generic > li.s50-l90 {
|
|
99
|
+
background-color: hsl(21deg, 50%, 90%);
|
|
100
|
+
}
|
|
101
|
+
.br-color--palette.generic > li.s100-l38 {
|
|
102
|
+
background-color: hsl(21deg, 100%, 38%);
|
|
103
|
+
}
|
|
104
|
+
.br-color--palette.generic > li.s100-l15 {
|
|
105
|
+
background-color: hsl(21deg, 100%, 15%);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.br-color--sample {
|
|
109
|
+
background: grey;
|
|
110
|
+
height: 6.25rem;
|
|
111
|
+
width: 6.25rem;
|
|
112
|
+
}
|
|
113
|
+
.br-color--sample.test {
|
|
114
|
+
text-transform: uppercase;
|
|
115
|
+
place-content: center;
|
|
116
|
+
font-weight: bold;
|
|
117
|
+
color: grey;
|
|
118
|
+
display: grid;
|
|
119
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
extends layout
|
|
2
|
+
block content
|
|
3
|
+
h1 Color Palettes
|
|
4
|
+
h2 Brand
|
|
5
|
+
h3 Generic
|
|
6
|
+
ul.br-color--palette.generic
|
|
7
|
+
li.br-color--sample
|
|
8
|
+
li.br-color--sample.tint-98
|
|
9
|
+
li.br-color--sample.tint-70
|
|
10
|
+
li.br-color--sample.tint-40
|
|
11
|
+
li.br-color--sample.s60-l99
|
|
12
|
+
li.br-color--sample.s100-l95
|
|
13
|
+
li.br-color--sample.s50-l90
|
|
14
|
+
li.br-color--sample.s100-l38
|
|
15
|
+
li.br-color--sample.s100-l15
|
|
16
|
+
|
|
17
|
+
//- include mixins/test
|
|
18
|
+
//- +test()
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "barbican-reset",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.7",
|
|
4
4
|
"description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -13,21 +13,23 @@
|
|
|
13
13
|
"url": "https://bitbucket.org/barbicandev/barbican-reset/"
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
16
|
-
"fonts/*.{woff,woff2}",
|
|
17
|
-
"focus-visible.min.js",
|
|
18
16
|
"animations/**/*",
|
|
19
17
|
"components/**/*",
|
|
18
|
+
"dist/**/*",
|
|
19
|
+
"fonts/*.{woff,woff2}",
|
|
20
20
|
"helpers/**/*",
|
|
21
21
|
"icons/**/*",
|
|
22
|
-
"
|
|
22
|
+
"library/**/*",
|
|
23
|
+
"logos/*",
|
|
23
24
|
"scss/**/*",
|
|
24
|
-
"
|
|
25
|
+
"focus-visible.min.js"
|
|
25
26
|
],
|
|
26
27
|
"author": "Paul Heading",
|
|
27
28
|
"license": "MIT",
|
|
28
29
|
"dependencies": {
|
|
29
30
|
"bootstrap": "^5.1.3",
|
|
30
31
|
"bootstrap-vue": "^2.21.2",
|
|
32
|
+
"express": "^4.18.1",
|
|
31
33
|
"focus-visible": "^5.2.0",
|
|
32
34
|
"gsap": "^3.7.1",
|
|
33
35
|
"gulp": "^4.0.2",
|
|
@@ -38,6 +40,7 @@
|
|
|
38
40
|
"gulp-uglify": "^3.0.2",
|
|
39
41
|
"node-sass-tilde-importer": "^1.0.2",
|
|
40
42
|
"placeholder-loading": "^0.4.0",
|
|
43
|
+
"pug": "^3.0.2",
|
|
41
44
|
"sass": "^1.41.0",
|
|
42
45
|
"vue-moment": "^4.1.0",
|
|
43
46
|
"vue-slick-carousel": "^1.0.6"
|
package/scss/_atomic.scss
CHANGED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
.br-container--outer {
|
|
2
|
+
padding-right: 5%;
|
|
3
|
+
padding-left: 5%;
|
|
4
|
+
|
|
5
|
+
&.splash {
|
|
6
|
+
padding-right: 10%;
|
|
7
|
+
padding-left: 10%;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&.masthead {
|
|
11
|
+
box-shadow: 0 0.375rem 0.375rem rgba(black, 0.1);
|
|
12
|
+
background-color: white;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.br-container--inner {
|
|
17
|
+
max-width: $layout-width-lg;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
|
|
20
|
+
&:not(.footer) {
|
|
21
|
+
padding-bottom: 1.5rem;
|
|
22
|
+
padding-top: 1.5rem;
|
|
23
|
+
|
|
24
|
+
@include media-breakpoint-up(sm) {
|
|
25
|
+
padding-bottom: 2.5rem;
|
|
26
|
+
padding-top: 2.5rem;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&.header {
|
|
31
|
+
padding-bottom: 1.875rem;
|
|
32
|
+
padding-top: 1.875rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&.thin {
|
|
36
|
+
max-width: $layout-width-sm;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&.masthead {
|
|
40
|
+
@include media-breakpoint-up(sm) {
|
|
41
|
+
padding-bottom: 3rem;
|
|
42
|
+
padding-top: 3rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
h1 {
|
|
46
|
+
margin: 0;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
package/scss/_close-icon.scss
CHANGED