From b6059534536912a686b1373de0deca1636fe5cf6 Mon Sep 17 00:00:00 2001 From: cstoobes Date: Wed, 23 Jun 2021 20:56:25 -0500 Subject: [PATCH] remove CSS reset and add sass npm scripts, update version --- .gitignore | 3 +++ .scss-lint.yml | 1 - CHANGELOG.md | 6 +++++ LICENSE.md | 2 +- README.md | 2 -- package.json | 11 +++++++-- scss/README.md | 6 ++--- scss/_vars.scss | 6 +---- scss/application.scss | 5 +---- scss/base/_shared.scss | 49 +++++++++++++++++++---------------------- scss/ui/_fonts.scss | 1 + scss/vendor/_reset.scss | 45 ------------------------------------- 12 files changed, 48 insertions(+), 89 deletions(-) delete mode 100755 scss/vendor/_reset.scss diff --git a/.gitignore b/.gitignore index 7631fb5..9082f99 100755 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,9 @@ stylesheets/* # Temporary Sass files .sass-cache/ +# Node Modules +node_modules + # Compiled source for deployment dist/ tests/**/*input.css diff --git a/.scss-lint.yml b/.scss-lint.yml index 1621da3..26dd5aa 100755 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -1,6 +1,5 @@ --- exclude: - - "scss/vendor/_reset.scss" - "scss/vendor/_normalize.scss" - "tests/*" diff --git a/CHANGELOG.md b/CHANGELOG.md index f37993e..1cbd512 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +### 4.1.0 (June 24, 2021) + +* Add sass npm scripts for compilation. +* Remove CSS Reset option. + + ### 4.0.1 (Nov 4, 2019) * Update to Normalize.css 8.0.1. diff --git a/LICENSE.md b/LICENSE.md index 8f0661f..079f3f0 100755 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2013-2018 space150 +Copyright (c) 2013-2021 space150 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 6e3694b..e3d218a 100755 --- a/README.md +++ b/README.md @@ -22,7 +22,6 @@ spaceBase is the front-end starter files for any new web project. It sets up you ### Customizable Features * Compatible with any Sass compiler -* Start with Normalize (default) or CSS Reset * Scalable, mobile-first grid - choose how robust you want it * Base font size for mobile vs desktop * Global variables for breakpoints, colors, fonts and more @@ -70,7 +69,6 @@ You can remove (if downloaded from Git): * [Sass MQ](https://github.com/sass-mq/sass-mq) * [Bootstrap](http://getbootstrap.com) * [Normalize.css](http://necolas.github.io/normalize.css) -* [Eric Meyer’s CSS Reset](http://meyerweb.com/eric/tools/css/reset) ## License diff --git a/package.json b/package.json index 8312867..f790b97 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "spacebase", - "version": "4.0.1", + "version": "4.1.0", "description": "spaceBase is a Sass-based responsive CSS framework.", "homepage": "http://spacebase.space150.com", "main": "stylesheets/application.css", @@ -24,5 +24,12 @@ "*.html", "scss/*", "stylesheets/*.css" - ] + ], + "dependencies": { + "sass": "^1.35.1" + }, + "scripts": { + "build": "sass --style compressed scss/:stylesheets/", + "watch": "sass --watch scss/:stylesheets/" + } } diff --git a/scss/README.md b/scss/README.md index 77d9c16..b805f9d 100755 --- a/scss/README.md +++ b/scss/README.md @@ -6,12 +6,12 @@ The `scss/` directory contains three folders: Base, UI and Vendor. - **Base** contains the "building block" abstractions, namely the grid framework, mixins and helpers. These are core to spaceBase and should not be edited, but you can add your own mixins to `mixins.scss`. - **UI** contains all project-specific styles shared across the application. These files are meant to be completely tailored to your project. To start, it includes typography, form elements, generic print styles, buttons and other common UI components. Add more partials and organize them however the project demands. -- **Vendor** contains Normalize and CSS reset. You can add other vendor files here. +- **Vendor** contains Normalize. You can add other vendor files here. ## Compilation -All partials are imported into the `application.scss`. This is also where you can choose to import either Normalize (default) or CSS Reset. When you add new partials to your project, add them to this import list. Set up your Sass compilation to generate this in the `stylesheets/` directory. Because of the amount of comments, please use minified CSS in production. +All partials are imported into the `application.scss`. When you add new partials to your project, add them to this import list. Set up your Sass compilation to generate this in the `stylesheets/` directory. Because of the amount of comments, please use minified CSS in production. ### Styleguide @@ -24,7 +24,7 @@ Customizable variables are stored in the `_vars.scss` partial. This includes thi ### Vertical Rhythm and the `$base-sizing-unit` -As a means for consistency and good vertical rhythm, many measurements are based off the `$base-spacing-unit`, which is equal to the base `$line-height-ratio`. This way if the `$base-font-size` or `$base-line-height` is adjusted down the road, white space proportions are preserved. For example, unless you opt for using CSS Reset, most block-level elements (headings, lists, paragraphs, etc.) will have a bottom margin equal to `$base-spacing-unit`. +As a means for consistency and good vertical rhythm, many measurements are based off the `$base-spacing-unit`, which is equal to the base `$line-height-ratio`. This way if the `$base-font-size` or `$base-line-height` is adjusted down the road, white space proportions are preserved. For example, most block-level elements (headings, lists, paragraphs, etc.) will have a bottom margin equal to `$base-spacing-unit`. ## The Grid diff --git a/scss/_vars.scss b/scss/_vars.scss index bb7f1a2..6b85793 100755 --- a/scss/_vars.scss +++ b/scss/_vars.scss @@ -3,14 +3,10 @@ //------------------------------------// /* - spaceBase version: 4.0.1 + spaceBase version: 4.1.0 http://spacebase.space150.com */ -// To select Normalize or Reset, see application.scss -$normalize: false !default; -$reset: false !default; - // Include push styles? $push: true; diff --git a/scss/application.scss b/scss/application.scss index 0a3b7a6..3518aa2 100755 --- a/scss/application.scss +++ b/scss/application.scss @@ -1,9 +1,6 @@ @import "base/functions"; @import "vars"; - -// Choose either Normalize or Reset: -@import "vendor/normalize"; $normalize: true; -// @import "vendor/reset"; $reset: true; +@import "vendor/normalize"; @import "base/mixins"; @import "base/grids"; diff --git a/scss/base/_shared.scss b/scss/base/_shared.scss index b33bb2b..6a00d76 100755 --- a/scss/base/_shared.scss +++ b/scss/base/_shared.scss @@ -28,31 +28,28 @@ img { img[width], img[height] { max-width: none; } +// Where `margin-bottom` is concerned, this value will be the same as the +// base line-height. This allows us to keep a consistent vertical rhythm. +// As per: csswizardry.com/2012/06/single-direction-margin-declarations +h1,h2,h3,h4,h5,h6,hgroup,hr, +ul,ol,dl, +blockquote,p,address, +table, +fieldset,figure,figcaption, +pre { + margin-top: 0; + margin-bottom: $base-spacing-unit; + ul,ol { margin-bottom: 0; } +} + +// Where `margin-left` is concerned, we want to try and indent certain elements +// by a consistent amount +ul,ol,dd { + margin-left: $base-spacing-unit; + padding: 0; +} -@if $reset != true { - // Where `margin-bottom` is concerned, this value will be the same as the - // base line-height. This allows us to keep a consistent vertical rhythm. - // As per: csswizardry.com/2012/06/single-direction-margin-declarations - h1,h2,h3,h4,h5,h6,hgroup,hr, - ul,ol,dl, - blockquote,p,address, - table, - fieldset,figure,figcaption, - pre { - margin-top: 0; - margin-bottom: $base-spacing-unit; - ul,ol { margin-bottom: 0; } - } - - // Where `margin-left` is concerned, we want to try and indent certain elements - // by a consistent amount - ul,ol,dd { - margin-left: $base-spacing-unit; - padding: 0; - } - - table { - border-collapse: collapse; - border-spacing: 0; - } +table { + border-collapse: collapse; + border-spacing: 0; } diff --git a/scss/ui/_fonts.scss b/scss/ui/_fonts.scss index bcfe83c..19c3d18 100755 --- a/scss/ui/_fonts.scss +++ b/scss/ui/_fonts.scss @@ -12,4 +12,5 @@ // url('../fonts/2BF776_1_0.woff') format('woff'); // font-weight: normal; // font-style: normal; +// font-display: swap; // } diff --git a/scss/vendor/_reset.scss b/scss/vendor/_reset.scss deleted file mode 100755 index 153d84a..0000000 --- a/scss/vendor/_reset.scss +++ /dev/null @@ -1,45 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - * v2.0 | 20110126 - * License: none (public domain) - * */ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -}