normalize-scss
Latest versions
For use with… | normalize-scss version |
---|---|
Sass 3.4 or libSass | 8.0.0 combining normalize.css v7.0.0 with v1.1.3 |
Compass or Bower | 7.0.0 combining normalize.css v7.0.0 with v1.1.3 (last version with Compass and Bower support) |
Ruby Sass 3.3 | 3.0.3 combining normalize.css v3.0.3 with v1.1.3 |
Ruby Sass 3.2 | 2.2.0+normalize.2.1.3 combining normalize.css v2.1.3 with v1.1.3 |
The Sass port of normalize.css
This project is the Sass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers. This port aims to use a light dusting of Sass to make Normalize even easier to integrate with your website. To learn about why Normalize.css is so amazing, skip to the "normalize.css" section below.
This Sass port currently adds:
- Vertical rhythm mixins: Allowing you to alter the font-size, line-height and margins in Normalize’s output without hacking the library.
- Optional Eyeglass support.
- Several ready-to-fork versions that integrate typography Sass modules like Typey, or style guides built with KSS.
normalize.css v5
A modern alternative to CSS resets
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
The project relies on researching the differences between default browser styles in order to precisely target only the styles that need or benefit from normalizing.
What does it do?
- Preserves useful defaults, unlike many CSS resets.
- Normalizes styles for a wide range of elements.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle modifications.
- Explains what code does using detailed comments.
Install
Install using one of the following methods:
- Download directly from the project page.
- Install with npm:
npm install --save normalize-scss
- Install with Ruby Gem:
gem install normalize-scss
and, optionally, addrequire "normalize-scss"
to your config.rb file. Note: if you want to alter the _normalize.scss file after installation (see "how to use it" below), you can use thegem list --details normalize-scss
command to show you where the normalize-scss files were installed.
How to use it
There is a fantastic introduction to the project and brief instructions how to use it in the About normalize.css article.
You can use the Sass port of Normalize in one of several methods, following the "About normalize.css" article's suggestions:
Approach 1: Download and use normalize-scss as a starting point for your own project's base Sass, customising the values to match the design's requirements. (The best approach, IMO.)
- Copy the normalize-scss files to your sass directory so that you can alter it as you include it in your project. To aid with this method, normalize-scss includes several ready-made "fork" versions: * fork-versions/default - Fork for libSass or Ruby Sass * fork-versions/typey - Fork with Typey * fork-versions/typey-chroma-kss - Fork with Typey, Chroma and KSS
Approach 2: Install and include normalize-scss untouched and then build upon it, overriding the defaults later in your Sass when necessary. Just import normalize-scss like any normal Sass module by:
- Set variables to override the default normalize-scss variables.
- (Optionally) add an additional
[path to]/normalize-scss/sass
import path for your Sass compiler, e.g. node-sass'includePaths
option or Ruby Sass'--load-path
option. - Import with
@import "normalize";
or with@import "[path to]/normalize-scss/sass/normalize";
(if you skipped step 2.) - Output the CSS rules with
@include normalize();
Alternatively, you can import normalize-scss immediately into your main Sass file without needing to use the normalize()
mixin by:
- (Optionally) set variables to override the default normalize-scss variables.
- (Optionally) add an additional
[path to]/normalize-scss/sass
import path for your Sass compiler, e.g. node-sass'includePaths
option or Ruby Sass'--load-path
option. - Import with
@import "normalize/import-now";
or with@import "[path to]/normalize-scss/sass/normalize/import-now";
(if you skipped step 2.)
Note: if you use wiredep, normalize-scss's bower.json points at the normalize/import-now Sass partial. If you don't wish to immediately output the CSS, you will need to override the Sass partial that wiredep grabs from normalize-scss.
Browser support
- Chrome (last four)
- Edge (version 25 and later)
- Firefox (last four)
- Firefox ESR
- Internet Explorer 9+
- Opera (last four)
- Safari (last four)
Extended details and known issues
Additional detail and explanation of the esoteric parts of normalize.css.
pre, code, kbd, samp
The font-family: monospace, monospace
hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace
is intentional. Source.
sub, sup
Normally, using sub
or sup
affects the line-box height of text in all browsers. Source.
svg:not(:root)
Adding overflow: hidden
fixes IE9's SVG rendering. Earlier versions of IE don't support SVG, so we can safely use the :not()
and :root
selectors that modern browsers use in the default UA stylesheets to apply this style. Source.
select
By default, Chrome on OS X and Safari on OS X allow very limited styling of select
, unless a border property is set. The default font weight on optgroup
elements cannot safely be changed in Chrome on OSX and Safari on OS X.
[type="checkbox"]
It is recommended that you do not style checkbox and radio inputs as Firefox's implementation does not respect box-sizing, padding, or width.
[type="number"]
Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default
to text
.
[type="search"]
The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control font
, padding
, border
, or background
. In Chrome and Safari on Windows you can't control border
properly. It will apply border-width
but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield
addresses these issues without removing the benefits of search inputs (e.g. showing past searches). Safari (but not Chrome) will clip the cancel button on when it has padding (and textfield
appearance).
Contributing
Please read Normalize.css' contributing guidelines.
Updates to most CSS rules should be reported to the upstream Normalize.css project. Updates to the Sass should be reported in the Normalize-scss project.
Acknowledgements
Normalize.css is a project by Nicolas Gallagher, co-created with Jonathan Neal.
This Sass port is a project by John Albin Wilkins.
Other ports of Normalize.css
For the record, there are several other Sass ports as well. Including:
- https://github.com/waynegraham/compass-normalize-plugin
- https://github.com/ksmandersen/compass-normalize
- https://github.com/hail2u/normalize.scss
- https://github.com/kristerkari/normalize.scss
- https://github.com/krisbulman/normalize-libsass
Importing file (support-for) does not exist
The first import that normalize does is for a file that does not exist. Any ideas?
It seems that in this commit f32a7fdae314297ee053d6588d7ea913aeb7fb4b , it was removed from the normalized folder.
Make compass an optional dependency
Since the people cry for a world without dependencies, we should drop compass. Or, at least, we should stick together a version without compass.
For sure, there are a lot of great forks out there, but you are the leader at NPM, RubyGem etc.
After a bit of research I found this gist, which could help us: https://gist.github.com/ry5n/2026666
Update eslint to the latest version 🚀
Version 4.1.0 of eslint just got published.
The version 4.1.0 is not covered by your current version range.
Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.
I recommend you look into these changes and try to get onto the latest version of eslint. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.
Release Notes
v4.1.0padded-block
rule (#8783) (Plusb Preco)enforceForArrowConditionals
tono-extra-parens
(fixes #6196) (#8439) (Evilebot Tnawi)overrides
/files
options for glob-based config (fixes #3611) (#8081) (Sylvan Mably)Commits
The new version differs by 141 commits.
7d9e3be
4.1.0
e727b7b
Build: changelog update for 4.1.0
e8f1362
Docs: Remove wrong descriptions in
padded-block
rule (#8783)291a783
Update:
enforceForArrowConditionals
tono-extra-parens
(fixes #6196) (#8439)a21dd32
New: Add
overrides
/files
options for glob-based config (fixes #3611) (#8081)879688c
Update: Add ignoreComments option to no-trailing-spaces (#8061)
b58ae2e
Chore: Only instantiate fileEntryCache when cache flage set (perf) (#8763)
9851288
Update: fix indent errors on multiline destructure (fixes #8729) (#8756)
3608f06
Docs: Increase visibility of code of conduct (fixes #8758) (#8764)
673a58b
Update: support multiple fixes in a report (fixes #7348) (#8101)
7a1bc38
Fix: don't pass default parserOptions to custom parsers (fixes #8744) (#8745)
c5b4052
Chore: enable computed-property-spacing on ESLint codebase (#8760)
3419f64
Docs: describe how to use formatters on the formatter demo page (#8754)
a3ff8f2
Chore: combine tests in tests/lib/eslint.js and tests/lib/linter.js (#8746)
b7cc1e6
Fix: Space-infix-ops should ignore type annotations in TypeScript (#8341)
There are 141 commits in total.
See the full diff
Not sure how things should work exactly?
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot :palm_tree:
Undefined variable: "$px-fallback".
From a fresh Bower install, and import of the normalize.scss files the following error is returned
Moved but not re-published to bower?
I was hoping to use this version of normalize as my default install for a static site generator I am working on, but then today as I was about to publish the first stable version and I could no longer compile the sass.
I was wondering if there was a new name in the bower registry? I guess I can specify the repo directly, but my yeoman generator will look pretty silly when the prompt stretches off the screen saying:
Any suggestions? Or can you re-publish on bower?
Error during compilation from _normalize.scss (rhythm mixin problem)
Hi,
I have installed the partial _normalize.scss but the compilation failed :
It's looking like a problem with the rhythm mixin but I don't understand why...
Any idea ?
Upgrade to Compass 1.0.0's support and vertical-rhythm modules
At least it looks that way: http://beta.compass-style.org/CHANGELOG/
When running alpha versions of Compass 1.0.0 a warning will be issued due to the fact that _normalize.scss sets $legacy-support-for-ie6 and $legacy-support-for-ie7. I solved this problem by simply moving the variables below the compass imports around line 42 since they are still expected later on in _normalize.scss. Of course, for people wanting legacy IE support this probably isn't the best solution as Compass itself isn't being configured.
The warning issued when compiling:
WARNING: Compass has changed how browser support is configured. See the CHANGELOG for more details. The following configuration variables are no longer supported: $legacy-support-for-ie6, $legacy-support-for-ie7.
Removed margins from ul ul
Much like with my other pull request, I could be barking up the wrong tree here, but I figured, for code such as the example below, this would prevent huge, unneeded, margins on each of the inner lists:
(Or maybe this should be submitted to the original normalize.css project, I don't know)
Error: 'The normalize vertical-rhythm module only supports px inputs. The typey library is better.'
mvxtheme.scss
broken bower.json
Hi,
maybe I'm completely lost, but when I look at your bower.json the normalize/_import-now.scss file is marked as main file.
There are some instructions on how to use your lib, but there is no real scenario on how to use it with bower, except of the note that you have to override some things to use it with wiredep.
We want to use css libs from our project by just running
bower install
and adding an@import
line in our main css.In your case, the main file is in the
./normalize
Folder. Normally other css libraries use the main file in the root namespace but you don't, so we can't use your Project in the same generic way with Sass include paths.If there is nothing against from your side using the
normalize-scss/sass/_normalize.scss
instead ofnormalize-scss/sass/normalize/_import-now.scss
you'd help us and properly all wiredeps user as well.If you agree to that, I can open a PR.
Greets `Alwin Mark
Unable to install 3.0.0-alpha.2+normalize.3.0.0 via Bower
When following the instructions to install/use the latest branch with support for normalize.css v3, Sass 3.3 and Compass 1.0 via bower there is an error resolving the target version. Presumably because the tag is missing?
I was able to get the version I wanted using the following command:
in case it helps:
Replace deprecated slash division by math.div() to prepare for Dart Sass 2.0.0
Since Dart Sass 1.33.0 deprecation warnings regarding using slash for divisions are printed to the console when using normalize-scss in the same project. In order to prepare for the Dart Sass 2.0.0 release and to make sure that normalize-scss can be used in the future, the affected code parts have to be updated.
A blog post on the topic can be found here: https://sass-lang.com/documentation/breaking-changes/slash-div.
The issue has already been reported in the main repository here: https://github.com/JohnAlbin/normalize-scss/issues/148.
This PR now aims to resolve that issue.
dart-sass: deprecation warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Expected behavior
No deprecation warnings in the console.
Actual behavior
dart-sass (v 1.34.0) is reporting deprecation warnings.
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($value, $relative-to)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷ 16 │ @return ($value / $relative-to) * 1em; │ ^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/normalize-scss/sass/normalize/_vertical-rhythm.scss 16:14 normalize-rhythm() node_modules/normalize-scss/sass/normalize/_vertical-rhythm.scss 27:14 normalize-font-size() node_modules/normalize-scss/sass/normalize/_normalize-mixin.scss 108:7 normalize()
Change variables without forcing vertical-rhythm
If
$normalize-vertical-rhythm
is set to false manually we should be able to change the value of variable without the$normalize-vertical-rhythm
being overridden here:The logic should first detect if
$normalize-vertical-rhythm
was set by the user and only overwrite it if not. A better default value, therefore, would benull
. You could then check against null in the above and only force to true if so. If false, then honour the users choice and don't output.The checks for
@if $normalize-vertical-rhythm {
would all still work as intended.Update auto-changelog to the latest version 🚀
☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io
The devDependency auto-changelog was updated from
1.16.4
to2.0.0
.This version is not covered by your current version range.
If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.
Publisher: cookpete License: MIT
Find out more about this release.
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper bot :palm_tree:
dart-sass: deprecation warning: !global assignments won't be able to declare new variables
Expected behavior
No deprecation warnings in the console.
Actual behavior
dart-sass (
v 1.17.2
) is reporting deprecation warnings.Steps to reproduce the behaviour
Use the official
sass
module instead of an unofficialnode-sass
module to compile the code.