From 269817fcf52af86c65e8deb7243607a64d45771e Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Sun, 8 Aug 2021 18:43:18 -0400 Subject: [PATCH 01/19] readme tweaks --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 870eb47..ef5d21a 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [![dependencies status](https://david-dm.org/bstaruk/starbase/status.svg)](https://david-dm.org/bstaruk/starbase) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase?ref=badge_shield) -starbase is a production-ready website boilerplate built with webpack 5, modern JS (via Babel) & Sass that enables developers to get up and running in minutes using some of the most powerful front-end tools available in 2021: +starbase is a production-ready website boilerplate built with webpack 5, Babel 7 & Sass that enables developers to get up and running in minutes using some of the most powerful front-end tools available in 2021: * [Node.js](https://github.com/nodejs/node), [webpack 5](https://github.com/webpack/webpack) & [webpack-dev-server](https://github.com/webpack/webpack-dev-server) * [Babel 7](https://github.com/babel/babel) w/ [ESLint](https://github.com/eslint/eslint) & [Prettier](https://github.com/prettier/prettier) @@ -12,10 +12,6 @@ starbase is a production-ready website boilerplate built with webpack 5, modern The primary mission is to be small in scope so that it may be easily extended and customized, or used as a learning tool for developers who are trying to become familiar with webpack 5, Sass and/or modern JS. -## License - -starbase is open source and free software, so you may to do whatever you wish with it -- commercially or personally. You can buy me a beer next time you're in Boston, star the project and tell a friend, or you can erase all signs of origin and tell your coworkers that you made it yourself. It's all good! - ## Using starbase ### Getting Started @@ -100,3 +96,7 @@ If you want to remove these for any reason, perform the following steps: starbase is setup to run with assets referenced via relative paths so generated `.html` files can be opened without needing a deployment. If you plan on deploying to a web server, it'll be a good idea to set the `publicPath` in `/webpack/webpack.config.base.js`. This variable should be set to `/` if the app will run at the root of a domain or subdomain, or to `/folderName` (example) if it'll be deployed to a subfolder. + +## License + +starbase is open source and free software, so you may to do whatever you wish with it -- commercially or personally. You can buy me a beer next time you're in Boston, star the project and tell a friend, or you can erase all signs of origin and tell your coworkers that you made it yourself. It's all good! From 682bc7df486844639a97d28b1433534952fb070d Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 08:32:56 -0400 Subject: [PATCH 02/19] remove redundant heading --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index ef5d21a..a54c028 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,7 @@ starbase is a production-ready website boilerplate built with webpack 5, Babel 7 The primary mission is to be small in scope so that it may be easily extended and customized, or used as a learning tool for developers who are trying to become familiar with webpack 5, Sass and/or modern JS. -## Using starbase - -### Getting Started +## Getting Started After completing the steps below, you will be ready to begin using starbase: From 823fc0339852665b37024ca19837b3e288c76cf0 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 16:02:22 -0400 Subject: [PATCH 03/19] code & list components init --- src/app.scss | 2 ++ src/styles/code.scss | 14 ++++++++++++++ src/styles/list.scss | 11 +++++++++++ src/styles/rich-text.scss | 18 ++++++++++++++++++ 4 files changed, 45 insertions(+) create mode 100644 src/styles/code.scss create mode 100644 src/styles/list.scss diff --git a/src/app.scss b/src/app.scss index 5a0eae7..d5ef4ad 100644 --- a/src/app.scss +++ b/src/app.scss @@ -4,9 +4,11 @@ @import 'styles/root'; /* Unordered Imports */ +@import 'styles/code'; @import 'styles/footer'; @import 'styles/header'; @import 'styles/heading'; @import 'styles/link'; +@import 'styles/list'; @import 'styles/rich-text'; @import 'styles/repo-details'; diff --git a/src/styles/code.scss b/src/styles/code.scss new file mode 100644 index 0000000..5c5b4ca --- /dev/null +++ b/src/styles/code.scss @@ -0,0 +1,14 @@ +.code, +.pre { + background-color: #eee; +} + +.code { + font-size: 0.85em; + padding: 0 0.25rem; +} + +.pre { + font-size: 0.9em; + padding: 0.5rem; +} diff --git a/src/styles/list.scss b/src/styles/list.scss new file mode 100644 index 0000000..cf1b537 --- /dev/null +++ b/src/styles/list.scss @@ -0,0 +1,11 @@ +.list { + list-style-type: disc; + + &__item { + margin-bottom: 0.25rem; + + &:last-of-type { + margin-bottom: 0; + } + } +} diff --git a/src/styles/rich-text.scss b/src/styles/rich-text.scss index fa09276..f97d9a7 100644 --- a/src/styles/rich-text.scss +++ b/src/styles/rich-text.scss @@ -1,4 +1,6 @@ +@import 'styles/code'; @import 'styles/heading'; +@import 'styles/list'; .rich-text { h1, @@ -25,4 +27,20 @@ h4 { @extend .heading--h4; } + + code { + @extend .code; + } + + pre { + @extend .pre; + } + + ul { + @extend .list; + } + + li { + @extend .list__item; + } } From be6bc66a60926843d0d1cbf1e35f1313af682bba Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 16:22:47 -0400 Subject: [PATCH 04/19] differentiating between ordered & unordered lists --- src/styles/list.scss | 8 +++++++- src/styles/rich-text.scss | 6 +++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/styles/list.scss b/src/styles/list.scss index cf1b537..16a2c05 100644 --- a/src/styles/list.scss +++ b/src/styles/list.scss @@ -1,5 +1,11 @@ .list { - list-style-type: disc; + &--ordered { + list-style-type: decimal; + } + + &--unordered { + list-style-type: disc; + } &__item { margin-bottom: 0.25rem; diff --git a/src/styles/rich-text.scss b/src/styles/rich-text.scss index f97d9a7..1ff8927 100644 --- a/src/styles/rich-text.scss +++ b/src/styles/rich-text.scss @@ -36,8 +36,12 @@ @extend .pre; } + ol { + @extend .list--ordered; + } + ul { - @extend .list; + @extend .list--unordered; } li { From 91f7fd3ef2c77d7fe9b92cc7747c72799b5c6ce5 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 16:25:19 -0400 Subject: [PATCH 05/19] porting-over readme to html --- src/index.html | 210 +++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 168 insertions(+), 42 deletions(-) diff --git a/src/index.html b/src/index.html index 718671b..c2a273f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,53 +1,179 @@ + starbase - a modern website boilerplate for web developers - + + - - - - -
-
-

Why it's here

-

starbase was created in early 2017, shortly after webpack 2 was released and it became clear that my favorite development boilerplates were not being maintained or upgraded to the latest versions of the technologies they were built to utilize.

-

The primary mission of starbase is to provide an elegant but simple baseline development process that generates clean, production-ready assets while being bloat-free and easy to maintain.

-
- -
-

What it does

-

starbase enables developers to spin up new projects and begin coding within minutes instead of hours. It is ready, right out of the box, to watch your code during development and can handle production builds when you're ready to integrate and/or deploy.

-

The start command uses webpack-dev-server to serve up your project on a development server (localhost) which will recompile and lint as you modify the source. You can even access this web server via LAN, with a static IP, for testing your app on multiple devices.

-

The build command will compile production-ready (linted, minified & optimized) assets that can be integrated into your CMS theme or used as a standalone static website.

-
- -
-

Who it's for

-

starbase is open source and completely free for personal or commercial use. It is a personal project-- a living code styleguide and outlet for technical exploration that you can make your own if you dig it. Pick it up, check it out and make it do a barrel roll.

-

If you encounter any problems along the way, please be sure to report an issue on GitHub and it'll likely be taken care of faster than you think!

-
- -
-

Who's using it

-

Loading...

-

The information above was loaded asynchronously from GitHub using fetch. Fetch polyfills are included with the app so it'll still work perfectly with older browsers.

-
-
- - - + + + + +
+ +
+

Getting Started

+

After completing the steps below, you will be ready to begin using starbase:

+
    +
  • Install Node.js (latest + LTS recommended)
    • +
  • Clone starbase into your project root directory
    • +
  • Install dependencies by running npm install in your project root directory
    • + +
+ +

Local Development

+

starbase uses webpack-dev-server + to serve up your project at http://localhost:8080 for + streamlined and + convenient development.

+ +

After running npm run start in the project root, your /src code will be served + at the url above and + watched for changes. As you modify code in /src, the project will be recompiled and your + browser will + refresh to show the latest changes.

+ + 
cd /path/to/starbase
+npm run start
+ +

Building for Production

+

Use npm run build in your project root to run a production build.

+

Production builds compile & minify your assets into /dist for distribution and/or + integration into + whatever codebase you'll be using these assets in.

+ + 
cd /path/to/starbase
+npm run build
+
+ + +
+

Features & Configurations

+

JS & Sass linting

+

starbase uses ESLint for Javascript (ES6) linting + and stylelint for Sass + linting to encourage consistent + code throughout your project. The configs (/.eslintrc.js and /.stylelintrc.js + respectively) include a + solid foundation to build upon, utilizing the most popular industry-standardized plugins such as + eslint-config-airbnb and + stylelint-config-sass-guidelines. +

+ +

Prettier JS Formatting

+

starbase uses Prettier to + enforce and simplify code + consistency. If you use VS Code, check out the Prettier VS Code + extension.

+ +

HTML Webpack Plugin

+

starbase uses HTML + Webpack Plugin, which enables webpack to + handle assets that are linked from within our HTML templates, such as images and embedded videos. It + also makes sure our generated .js & .css files are included where they need to + be.

+

Open the webpack configs if you need to add more pages -- and be sure to check out the plugin + documentation to learn about the more advanced features such as .ejs and environment + variable support.

+ +

Asset Hashing (Cache Busting)

+

The assets generated by starbase are hashed as a cache-busting + mechanism. Hashes are generated via file contents so they will only change when the files themselves + have changed.

+

This feature ships with webpack (and the loaders we use), so removing it is pretty straightforward. Open + the webpack configs and remove the hashes from the filenames, which should look something like this: + .[hash:8]. +

+

Removing hashing for production builds is not recommended.

+ +

Build-Time Cleanup

+

starbase is setup to clear all contents of /dist (where compiled assets are piped into) + during each npm run build. If you'd like to remove this part of the build process, perform + the following steps:

+
    +
  1. remove CleanWebpackPlugin from the plugins array in + /webpack/webpack.config.prod.js +
    2. +
  2. remove CleanWebpackPlugin as a requirement at the top of + /webpack/webpack.config.prod.js +
    3. +
  3. remove the CleanWebpackPlugin dependency from /package.json
    4. +
+

Removing the cleanup process means that deleted assets in /src will not be deleted in + /dist + until you + manually do so. I recommend keeping the cleanup process intact unless you have a specific reason not to, + such as having un-managed assets in /dist. +

+ +

Fetch & Promise Polyfills

+

Because starbase was built to accommodate ES6 & CommonJS (and not jQuery) it is assumed that you'll be + using fetch for + asynchronous + requests.

+

Fetch is supported in all modern browsers, but some old dogs still don't support it and that's what we + need the es6-promise & + whatwg-fetch polyfills for. +

+

If you want to remove these for any reason, perform the following steps:

+
    +
  1. remove es6-promise & whatwg-fetch from /package.json
    2. +
  2. remove the relevant imports in /src/app.js
    3. +
+
+ +
+

Notes & Considerations

+ +

Root Path

+

starbase is setup to run with assets referenced via relative paths so generated .html files + can be opened without needing a deployment. If you plan on deploying to a web server, it'll be a good + idea to set the publicPath in /webpack/webpack.config.base.js.

+

This variable should be set to / if the app will run at the root of a domain or subdomain, + or to /folderName (example) if it'll be deployed to a subfolder.

+
+ +
+

License

+

starbase is open source and free software, so you may to do whatever you wish with it -- commercially or + personally. You can buy me a beer next time you're in Boston, star the project and tell a friend, or you + can erase all signs of origin and tell your coworkers that you made it yourself. It's all good!

+
+ +
+

Who's using it

+

Loading...

+

The information above was loaded asynchronously from GitHub using + fetch. Fetch polyfills are included with the app so it'll still work perfectly with older browsers.

+
+
+ + + + From 58b9acdd9a5edf9710e0ffef379dcd1fb823b70c Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 16:25:31 -0400 Subject: [PATCH 06/19] removing increased indentation for template files --- .editorconfig | 3 --- 1 file changed, 3 deletions(-) diff --git a/.editorconfig b/.editorconfig index 11f3038..4a7ea30 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,8 +8,5 @@ charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true -[*.{ejs,htm,html}] -indent_size = 4 - [*.md] trim_trailing_whitespace = false From 17824869465588f968894d4581aeecd434cc37ed Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 16:35:46 -0400 Subject: [PATCH 07/19] header features buildout --- src/index.html | 16 ++++++++++++---- src/styles/header.scss | 28 ++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/src/index.html b/src/index.html index c2a273f..5017b27 100644 --- a/src/index.html +++ b/src/index.html @@ -17,10 +17,18 @@ starbase logo

starbase

-

starbase is an open source website boilerplate built with webpack 5, modern JS (via Babel) & - Sass. +

starbase is a production-ready website boilerplate built with webpack 5, Babel 7 & Sass that enables developers + to get up and running in minutes using some of the most powerful front-end tools available in 2021:

+ +

The primary mission is to be small in scope so that it may be easily extended and customized, or used as a + learning tool for developers who are trying to become familiar with webpack 5, Sass and/or modern JS.

diff --git a/src/styles/header.scss b/src/styles/header.scss index ab829b9..f6e7515 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -1,3 +1,6 @@ +@import 'styles/link'; +@import 'styles/list'; + .header { &__brand { align-items: center; @@ -21,4 +24,29 @@ letter-spacing: normal; margin: 0; } + + &__features { + @extend .list--unordered; + + li { + @extend .list__item; + } + + a { + @extend .link; + @extend .link--red; + + &:nth-of-type(2n + 2) { + @extend .link--orange; + } + + &:nth-of-type(3n + 3) { + @extend .link--green; + } + + &:nth-of-type(4n + 4) { + @extend .link--blue; + } + } + } } From 3a78a2d4f1fedf145318e26e423dd87179463f70 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 16:47:07 -0400 Subject: [PATCH 08/19] main component buildout --- src/app.scss | 2 +- src/index.html | 2 +- src/styles/footer.scss | 2 -- src/styles/{rich-text.scss => main.scss} | 28 +++++++++++++++++------- 4 files changed, 22 insertions(+), 12 deletions(-) rename src/styles/{rich-text.scss => main.scss} (74%) diff --git a/src/app.scss b/src/app.scss index d5ef4ad..2ba630c 100644 --- a/src/app.scss +++ b/src/app.scss @@ -10,5 +10,5 @@ @import 'styles/heading'; @import 'styles/link'; @import 'styles/list'; -@import 'styles/rich-text'; +@import 'styles/main'; @import 'styles/repo-details'; diff --git a/src/index.html b/src/index.html index 5017b27..4d7cda3 100644 --- a/src/index.html +++ b/src/index.html @@ -32,7 +32,7 @@

starbase

-
+

Getting Started

diff --git a/src/styles/footer.scss b/src/styles/footer.scss index 423a479..e5b3bce 100644 --- a/src/styles/footer.scss +++ b/src/styles/footer.scss @@ -1,9 +1,7 @@ @import 'styles/link'; .footer { - border-top: 1px solid $color-silver; color: $color-grey; - margin-top: 2.5rem; @media (--medium) { font-size: 0.9em; diff --git a/src/styles/rich-text.scss b/src/styles/main.scss similarity index 74% rename from src/styles/rich-text.scss rename to src/styles/main.scss index 1ff8927..479bd6e 100644 --- a/src/styles/rich-text.scss +++ b/src/styles/main.scss @@ -2,14 +2,10 @@ @import 'styles/heading'; @import 'styles/list'; -.rich-text { - h1, - h2, - h3, - h4 { - @extend .heading; - - margin: 2rem auto 0; +.main { + section { + border-bottom: 1px solid $color-silver; + padding-bottom: 0.5em; } h1 { @@ -28,6 +24,22 @@ @extend .heading--h4; } + h1, + h2, + h3, + h4 { + @extend .heading; + + margin: 2rem auto 0; + + + h1, + + h2, + + h3, + + h4 { + margin-top: 1rem; + } + } + code { @extend .code; } From 9d4054e2d0318fa906ebf9941e80c696b2c8d11b Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 16:53:19 -0400 Subject: [PATCH 09/19] removing link classes --- src/index.html | 32 +++++++++++++++----------------- src/styles/main.scss | 6 ++++++ 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/index.html b/src/index.html index 4d7cda3..447181a 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@

starbase

Getting Started

After completing the steps below, you will be ready to begin using starbase:

    -
  • Install Node.js (latest +
  • Install Node.js (latest LTS recommended)
  • Clone starbase into your project root directory
  • Install dependencies by running npm install in your project root directory
    • @@ -46,9 +46,8 @@

    Getting Started

Local Development

-

starbase uses webpack-dev-server - to serve up your project at http://localhost:8080 for +

starbase uses webpack-dev-server + to serve up your project at http://localhost:8080 for streamlined and convenient development.

@@ -75,26 +74,25 @@

Building for Production

Features & Configurations

JS & Sass linting

-

starbase uses ESLint for Javascript (ES6) linting - and stylelint for Sass +

starbase uses ESLint for Javascript (ES6) linting + and stylelint for Sass linting to encourage consistent code throughout your project. The configs (/.eslintrc.js and /.stylelintrc.js respectively) include a solid foundation to build upon, utilizing the most popular industry-standardized plugins such as - eslint-config-airbnb and - stylelint-config-sass-guidelines. + eslint-config-airbnb and + stylelint-config-sass-guidelines.

Prettier JS Formatting

-

starbase uses Prettier to +

starbase uses Prettier to enforce and simplify code - consistency. If you use VS Code, check out the Prettier VS Code extension.

HTML Webpack Plugin

-

starbase uses HTML +

starbase uses HTML Webpack Plugin, which enables webpack to handle assets that are linked from within our HTML templates, such as images and embedded videos. It also makes sure our generated .js & .css files are included where they need to @@ -104,8 +102,8 @@

HTML Webpack Plugin

variable support.

Asset Hashing (Cache Busting)

-

The assets generated by starbase are hashed as a cache-busting +

The assets generated by starbase are hashed as a + cache-busting mechanism. Hashes are generated via file contents so they will only change when the files themselves have changed.

This feature ships with webpack (and the loaders we use), so removing it is pretty straightforward. Open @@ -136,12 +134,12 @@

Build-Time Cleanup

Fetch & Promise Polyfills

Because starbase was built to accommodate ES6 & CommonJS (and not jQuery) it is assumed that you'll be - using fetch for + using fetch for asynchronous requests.

Fetch is supported in all modern browsers, but some old dogs still don't support it and that's what we - need the es6-promise & - whatwg-fetch polyfills for. + need the es6-promise & + whatwg-fetch polyfills for.

If you want to remove these for any reason, perform the following steps:

    diff --git a/src/styles/main.scss b/src/styles/main.scss index 479bd6e..60abbf3 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,5 +1,6 @@ @import 'styles/code'; @import 'styles/heading'; +@import 'styles/link'; @import 'styles/list'; .main { @@ -40,6 +41,11 @@ } } + a { + @extend .link; + @extend .link--red; + } + code { @extend .code; } From 5e06712f6beeae5af2f0645245ec44373b69ef2d Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 16:55:18 -0400 Subject: [PATCH 10/19] removing comments --- src/index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/index.html b/src/index.html index 447181a..e14863f 100644 --- a/src/index.html +++ b/src/index.html @@ -33,7 +33,6 @@

    starbase

    -

    Getting Started

    After completing the steps below, you will be ready to begin using starbase:

    @@ -70,7 +69,6 @@

    Building for Production

    npm run build
    -

    Features & Configurations

    JS & Sass linting

    From 45ee263623501ea5a673622a0d9e4bfdf6c905e7 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 17:02:43 -0400 Subject: [PATCH 11/19] move font assets to /assets (makes sense dunnit?) --- src/{styles => assets}/fonts/PTSans-Regular.woff | Bin src/{styles => assets}/fonts/PTSans-Regular.woff2 | Bin src/{styles => assets}/fonts/PTSerif-Regular.woff | Bin src/{styles => assets}/fonts/PTSerif-Regular.woff2 | Bin src/styles/_fonts.scss | 13 +++++++++++++ src/styles/fonts/_index.scss | 13 ------------- 6 files changed, 13 insertions(+), 13 deletions(-) rename src/{styles => assets}/fonts/PTSans-Regular.woff (100%) rename src/{styles => assets}/fonts/PTSans-Regular.woff2 (100%) rename src/{styles => assets}/fonts/PTSerif-Regular.woff (100%) rename src/{styles => assets}/fonts/PTSerif-Regular.woff2 (100%) create mode 100644 src/styles/_fonts.scss delete mode 100644 src/styles/fonts/_index.scss diff --git a/src/styles/fonts/PTSans-Regular.woff b/src/assets/fonts/PTSans-Regular.woff similarity index 100% rename from src/styles/fonts/PTSans-Regular.woff rename to src/assets/fonts/PTSans-Regular.woff diff --git a/src/styles/fonts/PTSans-Regular.woff2 b/src/assets/fonts/PTSans-Regular.woff2 similarity index 100% rename from src/styles/fonts/PTSans-Regular.woff2 rename to src/assets/fonts/PTSans-Regular.woff2 diff --git a/src/styles/fonts/PTSerif-Regular.woff b/src/assets/fonts/PTSerif-Regular.woff similarity index 100% rename from src/styles/fonts/PTSerif-Regular.woff rename to src/assets/fonts/PTSerif-Regular.woff diff --git a/src/styles/fonts/PTSerif-Regular.woff2 b/src/assets/fonts/PTSerif-Regular.woff2 similarity index 100% rename from src/styles/fonts/PTSerif-Regular.woff2 rename to src/assets/fonts/PTSerif-Regular.woff2 diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 0000000..8d9390e --- /dev/null +++ b/src/styles/_fonts.scss @@ -0,0 +1,13 @@ +@font-face { + font-family: 'PT Sans'; + font-style: normal; + font-weight: normal; + src: url('assets/fonts/PTSans-Regular.woff2') format('woff2'), url('assets/fonts/PTSans-Regular.woff') format('woff'); +} + +@font-face { + font-family: 'PT Serif'; + font-style: normal; + font-weight: normal; + src: url('assets/fonts/PTSerif-Regular.woff2') format('woff2'), url('assets/fonts/PTSerif-Regular.woff') format('woff'); +} diff --git a/src/styles/fonts/_index.scss b/src/styles/fonts/_index.scss deleted file mode 100644 index 15e45aa..0000000 --- a/src/styles/fonts/_index.scss +++ /dev/null @@ -1,13 +0,0 @@ -@font-face { - font-family: 'PT Sans'; - font-style: normal; - font-weight: normal; - src: url('styles/fonts/PTSans-Regular.woff2') format('woff2'), url('styles/fonts/PTSans-Regular.woff') format('woff'); -} - -@font-face { - font-family: 'PT Serif'; - font-style: normal; - font-weight: normal; - src: url('styles/fonts/PTSerif-Regular.woff2') format('woff2'), url('styles/fonts/PTSerif-Regular.woff') format('woff'); -} From 87ae186a4ab8b8fc5c1a972d72546f254f5d592c Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 17:09:58 -0400 Subject: [PATCH 12/19] simplifying links (for now) --- src/styles/header.scss | 12 ------------ src/styles/link.scss | 4 ---- 2 files changed, 16 deletions(-) diff --git a/src/styles/header.scss b/src/styles/header.scss index f6e7515..80fe52b 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -35,18 +35,6 @@ a { @extend .link; @extend .link--red; - - &:nth-of-type(2n + 2) { - @extend .link--orange; - } - - &:nth-of-type(3n + 3) { - @extend .link--green; - } - - &:nth-of-type(4n + 4) { - @extend .link--blue; - } } } } diff --git a/src/styles/link.scss b/src/styles/link.scss index 6fcaa8c..cbe3fb5 100644 --- a/src/styles/link.scss +++ b/src/styles/link.scss @@ -7,9 +7,5 @@ /* Color Modifiers */ &--red { color: $color-red; } - &--orange { color: $color-orange; } - &--green { color: $color-green; } - &--blue { color: $color-blue; } - &--purple { color: $color-purple; } &--grey { color: $color-grey; } } From 4a3e18cc4810a273d7851f8e3c8e92b15a87028e Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 17:43:07 -0400 Subject: [PATCH 13/19] dracula theme init --- src/styles/_root.scss | 4 ++-- src/styles/_vars.scss | 22 ++++++++++++---------- src/styles/code.scss | 2 +- src/styles/footer.scss | 4 ++-- src/styles/header.scss | 2 +- src/styles/link.scss | 4 ++-- src/styles/main.scss | 4 ++-- 7 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/styles/_root.scss b/src/styles/_root.scss index 7a1014a..ec24f46 100644 --- a/src/styles/_root.scss +++ b/src/styles/_root.scss @@ -3,8 +3,8 @@ } body { - background-color: $color-white; - color: $color-dark-grey; + background-color: $color-background; + color: $color-foreground; font-family: $font-sans; font-size: 0.95rem; line-height: 1.4; diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss index 78daf39..9351c56 100644 --- a/src/styles/_vars.scss +++ b/src/styles/_vars.scss @@ -1,13 +1,15 @@ -/* Colors */ -$color-white: #fefefe; -$color-silver: #ccc; -$color-grey: #888; -$color-dark-grey: #333; -$color-red: #cc283d; -$color-orange: #ee763a; -$color-green: #2ba667; -$color-blue: #2472be; -$color-purple: #861bbb; +/* Dracula Colors */ +$color-background: #282a36; +$color-selection: #44475a; +$color-foreground: #f8f8f2; +$color-comment: #6272a4; +$color-cyan: #8be9fd; +$color-green: #50fa7b; +$color-orange: #ffb86c; +$color-pink: #ff79c6; +$color-purple: #bd93f9; +$color-red: #f55; +$color-yellow: #f1fa8c; /* Fonts */ $font-sans: 'PT Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; diff --git a/src/styles/code.scss b/src/styles/code.scss index 5c5b4ca..4edf104 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -1,6 +1,6 @@ .code, .pre { - background-color: #eee; + background-color: $color-selection; } .code { diff --git a/src/styles/footer.scss b/src/styles/footer.scss index e5b3bce..633aa26 100644 --- a/src/styles/footer.scss +++ b/src/styles/footer.scss @@ -1,7 +1,7 @@ @import 'styles/link'; .footer { - color: $color-grey; + color: $color-green; @media (--medium) { font-size: 0.9em; @@ -9,6 +9,6 @@ a { @extend .link; - @extend .link--grey; + @extend .link--green; } } diff --git a/src/styles/header.scss b/src/styles/header.scss index 80fe52b..ef00374 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -34,7 +34,7 @@ a { @extend .link; - @extend .link--red; + @extend .link--cyan; } } } diff --git a/src/styles/link.scss b/src/styles/link.scss index cbe3fb5..0d26e73 100644 --- a/src/styles/link.scss +++ b/src/styles/link.scss @@ -6,6 +6,6 @@ } /* Color Modifiers */ - &--red { color: $color-red; } - &--grey { color: $color-grey; } + &--cyan { color: $color-cyan; } + &--green { color: $color-green; } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 60abbf3..085990b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -5,7 +5,7 @@ .main { section { - border-bottom: 1px solid $color-silver; + border-bottom: 0.125rem solid $color-selection; padding-bottom: 0.5em; } @@ -43,7 +43,7 @@ a { @extend .link; - @extend .link--red; + @extend .link--cyan; } code { From 82c2badb9869873f1248d160518e53cf15ef7ea0 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 17:53:14 -0400 Subject: [PATCH 14/19] refactoring imports from classes to placeholders --- .stylelintrc.js | 1 - src/app.scss | 4 ---- src/styles/{ => atoms}/code.scss | 9 +++------ src/styles/atoms/heading.scss | 20 +++++++++++++++++++ src/styles/atoms/link.scss | 15 ++++++++++++++ src/styles/atoms/list.scss | 7 +++++++ src/styles/footer.scss | 6 +++--- src/styles/header.scss | 14 +++++-------- src/styles/heading.scss | 9 --------- src/styles/link.scss | 11 ----------- src/styles/list.scss | 17 ---------------- src/styles/main.scss | 34 ++++++++++++++------------------ 12 files changed, 68 insertions(+), 79 deletions(-) rename src/styles/{ => atoms}/code.scss (70%) create mode 100644 src/styles/atoms/heading.scss create mode 100644 src/styles/atoms/link.scss create mode 100644 src/styles/atoms/list.scss delete mode 100644 src/styles/heading.scss delete mode 100644 src/styles/link.scss delete mode 100644 src/styles/list.scss diff --git a/.stylelintrc.js b/.stylelintrc.js index 399dcae..4a3c2f4 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -10,6 +10,5 @@ module.exports = { 5, { ignore: ['blockless-at-rules', 'pseudo-classes'] }, ], - 'scss/at-extend-no-missing-placeholder': null, }, }; diff --git a/src/app.scss b/src/app.scss index 2ba630c..7f36b40 100644 --- a/src/app.scss +++ b/src/app.scss @@ -4,11 +4,7 @@ @import 'styles/root'; /* Unordered Imports */ -@import 'styles/code'; @import 'styles/footer'; @import 'styles/header'; -@import 'styles/heading'; -@import 'styles/link'; -@import 'styles/list'; @import 'styles/main'; @import 'styles/repo-details'; diff --git a/src/styles/code.scss b/src/styles/atoms/code.scss similarity index 70% rename from src/styles/code.scss rename to src/styles/atoms/code.scss index 4edf104..d04007d 100644 --- a/src/styles/code.scss +++ b/src/styles/atoms/code.scss @@ -1,14 +1,11 @@ -.code, -.pre { +%code { background-color: $color-selection; -} - -.code { font-size: 0.85em; padding: 0 0.25rem; } -.pre { +%pre { + background-color: $color-selection; font-size: 0.9em; padding: 0.5rem; } diff --git a/src/styles/atoms/heading.scss b/src/styles/atoms/heading.scss new file mode 100644 index 0000000..4b1c1ed --- /dev/null +++ b/src/styles/atoms/heading.scss @@ -0,0 +1,20 @@ +%heading { + font-family: $font-serif; + font-weight: normal; +} + +%heading--h1 { + font-size: 1.875rem; +} + +%heading--h2 { + font-size: 1.5rem; +} + +%heading--h3 { + font-size: 1.25rem; +} + +%heading--h4 { + font-size: 1.125rem; +} diff --git a/src/styles/atoms/link.scss b/src/styles/atoms/link.scss new file mode 100644 index 0000000..245291b --- /dev/null +++ b/src/styles/atoms/link.scss @@ -0,0 +1,15 @@ +%link { + text-decoration: underline; + + &:hover { + text-decoration: none; + } +} + +%link--cyan { + color: $color-cyan; +} + +%link--green { + color: $color-green; +} diff --git a/src/styles/atoms/list.scss b/src/styles/atoms/list.scss new file mode 100644 index 0000000..b887270 --- /dev/null +++ b/src/styles/atoms/list.scss @@ -0,0 +1,7 @@ +%list--ordered { + list-style-type: decimal; +} + +%list--unordered { + list-style-type: disc; +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss index 633aa26..acd30b4 100644 --- a/src/styles/footer.scss +++ b/src/styles/footer.scss @@ -1,4 +1,4 @@ -@import 'styles/link'; +@import './atoms/link'; .footer { color: $color-green; @@ -8,7 +8,7 @@ } a { - @extend .link; - @extend .link--green; + @extend %link; + @extend %link--green; } } diff --git a/src/styles/header.scss b/src/styles/header.scss index ef00374..628936d 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -1,5 +1,5 @@ -@import 'styles/link'; -@import 'styles/list'; +@import './atoms/link'; +@import './atoms/list'; .header { &__brand { @@ -26,15 +26,11 @@ } &__features { - @extend .list--unordered; - - li { - @extend .list__item; - } + @extend %list--unordered; a { - @extend .link; - @extend .link--cyan; + @extend %link; + @extend %link--cyan; } } } diff --git a/src/styles/heading.scss b/src/styles/heading.scss deleted file mode 100644 index 009bc91..0000000 --- a/src/styles/heading.scss +++ /dev/null @@ -1,9 +0,0 @@ -.heading { - font-family: $font-serif; - font-weight: normal; - - &--h1 { font-size: 1.875rem; } - &--h2 { font-size: 1.5rem; } - &--h3 { font-size: 1.25rem; } - &--h4 { font-size: 1.125rem; } -} diff --git a/src/styles/link.scss b/src/styles/link.scss deleted file mode 100644 index 0d26e73..0000000 --- a/src/styles/link.scss +++ /dev/null @@ -1,11 +0,0 @@ -.link { - text-decoration: underline; - - &:hover { - text-decoration: none; - } - - /* Color Modifiers */ - &--cyan { color: $color-cyan; } - &--green { color: $color-green; } -} diff --git a/src/styles/list.scss b/src/styles/list.scss deleted file mode 100644 index 16a2c05..0000000 --- a/src/styles/list.scss +++ /dev/null @@ -1,17 +0,0 @@ -.list { - &--ordered { - list-style-type: decimal; - } - - &--unordered { - list-style-type: disc; - } - - &__item { - margin-bottom: 0.25rem; - - &:last-of-type { - margin-bottom: 0; - } - } -} diff --git a/src/styles/main.scss b/src/styles/main.scss index 085990b..dc6141b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,7 @@ -@import 'styles/code'; -@import 'styles/heading'; -@import 'styles/link'; -@import 'styles/list'; +@import './atoms/code'; +@import './atoms/heading'; +@import './atoms/link'; +@import './atoms/list'; .main { section { @@ -10,26 +10,26 @@ } h1 { - @extend .heading--h2; + @extend %heading--h2; } h2 { - @extend .heading--h2; + @extend %heading--h2; } h3 { - @extend .heading--h3; + @extend %heading--h3; } h4 { - @extend .heading--h4; + @extend %heading--h4; } h1, h2, h3, h4 { - @extend .heading; + @extend %heading; margin: 2rem auto 0; @@ -42,27 +42,23 @@ } a { - @extend .link; - @extend .link--cyan; + @extend %link; + @extend %link--cyan; } code { - @extend .code; + @extend %code; } pre { - @extend .pre; + @extend %pre; } ol { - @extend .list--ordered; + @extend %list--ordered; } ul { - @extend .list--unordered; - } - - li { - @extend .list__item; + @extend %list--unordered; } } From 75c49d8c115af440132f4f1e141fe8afc2de2497 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 17:56:45 -0400 Subject: [PATCH 15/19] heading colors --- src/styles/main.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index dc6141b..f8795fe 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -9,16 +9,16 @@ padding-bottom: 0.5em; } - h1 { - @extend %heading--h2; - } - h2 { @extend %heading--h2; + + color: $color-yellow; } h3 { @extend %heading--h3; + + color: $color-orange; } h4 { From 021914a12cb7f59ae46a18c195b98cacb9213622 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 17:57:27 -0400 Subject: [PATCH 16/19] footer color changed --- src/styles/atoms/link.scss | 4 ++-- src/styles/footer.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/atoms/link.scss b/src/styles/atoms/link.scss index 245291b..c29fdfe 100644 --- a/src/styles/atoms/link.scss +++ b/src/styles/atoms/link.scss @@ -10,6 +10,6 @@ color: $color-cyan; } -%link--green { - color: $color-green; +%link--comment { + color: $color-comment; } diff --git a/src/styles/footer.scss b/src/styles/footer.scss index acd30b4..51426d4 100644 --- a/src/styles/footer.scss +++ b/src/styles/footer.scss @@ -1,7 +1,7 @@ @import './atoms/link'; .footer { - color: $color-green; + color: $color-comment; @media (--medium) { font-size: 0.9em; @@ -9,6 +9,6 @@ a { @extend %link; - @extend %link--green; + @extend %link--comment; } } From 9d05462bc93406a9eb76013b7fde696c5ba8b897 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 18:01:26 -0400 Subject: [PATCH 17/19] color adjustments --- src/styles/atoms/link.scss | 4 ++-- src/styles/header.scss | 2 +- src/styles/main.scss | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/styles/atoms/link.scss b/src/styles/atoms/link.scss index c29fdfe..3b79ddd 100644 --- a/src/styles/atoms/link.scss +++ b/src/styles/atoms/link.scss @@ -6,8 +6,8 @@ } } -%link--cyan { - color: $color-cyan; +%link--green { + color: $color-green; } %link--comment { diff --git a/src/styles/header.scss b/src/styles/header.scss index 628936d..d777430 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -30,7 +30,7 @@ a { @extend %link; - @extend %link--cyan; + @extend %link--green; } } } diff --git a/src/styles/main.scss b/src/styles/main.scss index f8795fe..63a2477 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -18,7 +18,7 @@ h3 { @extend %heading--h3; - color: $color-orange; + color: $color-cyan; } h4 { @@ -43,7 +43,7 @@ a { @extend %link; - @extend %link--cyan; + @extend %link--green; } code { From 0807027fd3e0fa645cc58d7a28abe4fae1b9c9c0 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 18:03:37 -0400 Subject: [PATCH 18/19] meta tags buildout --- src/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index e14863f..82b4581 100644 --- a/src/index.html +++ b/src/index.html @@ -3,9 +3,9 @@ - starbase - a modern website boilerplate for web developers + starbase - it has electrolytes + content="starbase is a production-ready website boilerplate built with webpack 5, Babel 7 & Sass"> From 8b17bbc53464631c419682b66fd446517dbefd19 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Mon, 9 Aug 2021 18:06:57 -0400 Subject: [PATCH 19/19] incremental version bump --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index b96cad4..faa1983 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "starbase", - "version": "3.2.0", + "version": "3.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a1b8078..04e1e62 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "starbase", - "version": "3.2.0", + "version": "3.2.1", "author": "Brian Staruk ", "contributors": [ {