├── .eleventy.js
├── .eleventyignore
├── .gitignore
├── .prettierrc
├── gulp-tasks
├── fonts.js
├── images.js
└── sass.js
├── gulpfile.js
├── netlify.toml
├── package-lock.json
├── package.json
├── readme.md
└── src
├── _data
├── global.js
├── helpers.js
├── navigation.json
├── patterns.js
├── site.json
└── tokens.json
├── _includes
├── layouts
│ ├── base.njk
│ ├── home.njk
│ └── page.njk
├── partials
│ ├── meta-info.njk
│ ├── pagination.njk
│ └── site-head.njk
└── prototype.js
├── about.md
├── colors.njk
├── filters
└── markdown-filter.js
├── images
└── .gitkeep
├── index.md
├── pattern.njk
├── patterns
├── button
│ ├── button.json
│ ├── button.njk
│ ├── docs.md
│ └── variants
│ │ ├── button-secondary.json
│ │ └── button-secondary.njk
├── patterns.json
└── toggle-switch
│ ├── docs.md
│ ├── toggle-switch.json
│ └── toggle-switch.njk
├── preview.njk
├── scss
├── _config.scss
├── _reset.scss
├── blocks
│ ├── .gitkeep
│ ├── _code-sample.scss
│ ├── _side-nav.scss
│ └── _swatch.scss
├── critical.scss
└── utilities
│ ├── _auto-grid.scss
│ ├── _flow.scss
│ ├── _sidebar.scss
│ ├── _visually-hidden.scss
│ └── _wrapper.scss
└── typography.njk
/.eleventy.js:
--------------------------------------------------------------------------------
1 | // Create a global base directory variable for easier includes
2 | global.__basedir = __dirname;
3 |
4 | const markdownFilter = require('./src/filters/markdown-filter.js');
5 |
6 | module.exports = config => {
7 | // Tell 11ty to use the .eleventyignore and ignore our .gitignore file
8 | config.setUseGitIgnore(false);
9 |
10 | config.addCollection('patterns', collection => {
11 | return collection.getFilteredByGlob('./src/patterns/**/*.njk');
12 | });
13 |
14 | config.addFilter('markdownFilter', markdownFilter);
15 |
16 | return {
17 | markdownTemplateEngine: 'njk',
18 | dataTemplateEngine: 'njk',
19 | htmlTemplateEngine: 'njk',
20 | dir: {
21 | input: 'src',
22 | output: 'dist'
23 | }
24 | };
25 | };
26 |
--------------------------------------------------------------------------------
/.eleventyignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Misc
2 | *.log
3 | npm-debug.*
4 | *.scssc
5 | *.log
6 | *.swp
7 | .DS_Store
8 | Thumbs.db
9 | .sass-cache
10 | .env
11 | .cache
12 |
13 | # Node modules and output
14 | node_modules
15 | dist
16 | src/_includes/css
17 | .vscode
18 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 90,
3 | "tabWidth": 2,
4 | "singleQuote": true,
5 | "bracketSpacing": false,
6 | "quoteProps": "consistent",
7 | "trailingComma": "none",
8 | "arrowParens": "avoid"
9 | }
10 |
--------------------------------------------------------------------------------
/gulp-tasks/fonts.js:
--------------------------------------------------------------------------------
1 | const {dest, src} = require('gulp');
2 | const GetGoogleFonts = require('get-google-fonts');
3 |
4 | const fonts = async () => {
5 | // Setup of the library instance by setting where we want
6 | // the output to go. CSS is relative to output font directory
7 | const instance = new GetGoogleFonts({
8 | outputDir: './dist/fonts',
9 | cssFile: './fonts.css'
10 | });
11 |
12 | // Grabs fonts and CSS from google and puts in the dist folder
13 | const result = await instance.download(
14 | 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap'
15 | );
16 |
17 | return result;
18 | };
19 |
20 | module.exports = fonts;
21 |
--------------------------------------------------------------------------------
/gulp-tasks/images.js:
--------------------------------------------------------------------------------
1 | const {dest, src} = require('gulp');
2 | const imagemin = require('gulp-imagemin');
3 |
4 | // Grabs all images, runs them through imagemin
5 | // and plops them in the dist folder
6 | const images = cb => {
7 | // We have specific configs for jpeg and png files to try
8 | // to really pull down asset sizes
9 | return src('./src/images/**/*')
10 | .pipe(
11 | imagemin(
12 | [
13 | imagemin.mozjpeg({quality: 60, progressive: true}),
14 | imagemin.optipng({optimizationLevel: 5, interlaced: null})
15 | ],
16 | {
17 | silent: true
18 | }
19 | )
20 | )
21 | .pipe(dest('./dist/images'))
22 | .on('done', cb);
23 | };
24 |
25 | module.exports = images;
26 |
--------------------------------------------------------------------------------
/gulp-tasks/sass.js:
--------------------------------------------------------------------------------
1 | const {dest, src} = require('gulp');
2 | const cleanCSS = require('gulp-clean-css');
3 | const sassProcessor = require('gulp-sass');
4 |
5 | // We want to be using canonical Sass, rather than node-sass
6 | sassProcessor.compiler = require('sass');
7 |
8 | // Flags wether we compress the output etc
9 | const isProduction = process.env.NODE_ENV === 'production';
10 |
11 | // An array of outputs that should be sent over to includes
12 | const criticalStyles = ['critical.scss'];
13 |
14 | // Takes the arguments passed by `dest` and determines where the output file goes
15 | const calculateOutput = ({history}) => {
16 | // By default, we want a CSS file in our dist directory, so the
17 | // HTML can grab it with a
18 | let response = './dist/css';
19 |
20 | // Get everything after the last slash
21 | const sourceFileName = /[^/]*$/.exec(history[0])[0];
22 |
23 | // If this is critical CSS though, we want it to go
24 | // to the _includes directory, so nunjucks can include it
25 | // directly in a
12 |
13 | {# Add facility for pages to delare an array of critical styles #}
14 | {% if pageCriticalStyles %}
15 | {% for item in pageCriticalStyles %}
16 |
17 | {% endfor %}
18 | {% endif %}
19 |
20 |
21 |
22 | {# Add facility for pages to declare an array of stylesheet paths #}
23 | {% if pageStylesheets %}
24 | {% for item in pageStylesheets %}
25 |
26 | {% endfor %}
27 | {% endif %}
28 |
29 |
30 | {% include "partials/site-head.njk" %}
31 |
32 |
60 |
61 |