Skip to content

Commit

Permalink
Normalize rather than Reset.
Browse files Browse the repository at this point in the history
The reset we used was a mix of Normalize, the Paul Irish reset,
sprinkled with some blueprint.css, and base styles. It was hard to
maintain and just seemed outdated (setting the base font-size to 10px
instead of 16px, among other things).

Normalize sets saner defaults and is generally just not as disruptive
as a full reset.

The code was added as is, has only its comments stripped (for now), and
is not mixed with any styles to make future updates to it as easy as
possible.

See #3, #44, #174, #267, #617.
  • Loading branch information
obenland committed Dec 30, 2014
1 parent 37d2834 commit 6c47be9
Show file tree
Hide file tree
Showing 18 changed files with 499 additions and 289 deletions.
215 changes: 215 additions & 0 deletions sass/_normalize.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

body {
margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}

audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}

audio:not([controls]) {
display: none;
height: 0;
}

[hidden],
template {
display: none;
}

a {
background-color: transparent;
}

a:active,
a:hover {
outline: 0;
}

abbr[title] {
border-bottom: 1px dotted;
}

b,
strong {
font-weight: bold;
}

dfn {
font-style: italic;
}

h1 {
font-size: 2em;
margin: 0.67em 0;
}

mark {
background: #ff0;
color: #000;
}

small {
font-size: 80%;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

img {
border: 0;
}

svg:not(:root) {
overflow: hidden;
}

figure {
margin: 1em 40px;

This comment has been minimized.

Copy link
@bfintal

bfintal Jan 9, 2015

should be

figure {
    margin: 0;
}

This comment has been minimized.

Copy link
@obenland

obenland Jan 9, 2015

Author Member

I decided to just take Normalize without any modification. Well, except for comments. :)

This comment has been minimized.

Copy link
@bfintal

bfintal Jan 9, 2015

My basis for the note is that I'm creating a new theme now using Underscores plus Normalize. I'm using Twenty Fifteen to compare the difference in layouts and only the margin on figure is so far the only thing I've found that's off. :)

}

hr {
box-sizing: content-box;
height: 0;
}

pre {
overflow: auto;
}

code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}

button {
overflow: visible;
}

button,
select {
text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}

button[disabled],
html input[disabled] {
cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

input {
line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}

input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

legend {
border: 0;
padding: 0;
}

textarea {
overflow: auto;
}

optgroup {
font-weight: bold;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

td,
th {
padding: 0;
}
73 changes: 0 additions & 73 deletions sass/_reset.scss

This file was deleted.

23 changes: 19 additions & 4 deletions sass/elements/_elements.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,22 @@
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit;
}

body {
background: $color__background-body; /* Fallback for when there is no custom background color defined. */
}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}

blockquote, q {
quotes: "" "";
}

hr {
background-color: $color__background-hr;
border: 0;
Expand All @@ -12,8 +31,4 @@ img {
max-width: 100%; /* Adhere to container width. */
}

figure {
margin: 0;
}

@import "tables";
4 changes: 0 additions & 4 deletions sass/elements/_tables.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
table {
margin: 0 0 1.5em;
width: 100%;
}

th {
font-weight: bold;
}
4 changes: 1 addition & 3 deletions sass/forms/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ input[type="submit"] {
background: $color__background-button;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, .8);
cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
@include font-size(1.2);
@include font-size(0.75);
line-height: 1;
padding: .6em 1em .4em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
Expand Down
22 changes: 0 additions & 22 deletions sass/forms/_fields.scss
Original file line number Diff line number Diff line change
@@ -1,23 +1,3 @@
input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
border: 0;
padding: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
Expand Down Expand Up @@ -47,8 +27,6 @@ input[type="search"] {
}

textarea {
overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
padding-left: 3px;
vertical-align: top; /* Improves readability and alignment in all browsers */
width: 100%;
}
9 changes: 0 additions & 9 deletions sass/forms/_forms.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
button,
input,
select,
textarea {
font-size: 100%; /* Corrects font size not being inherited in all browsers */
margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
vertical-align: baseline; /* Improves appearance and consistency in all browsers */
}

@import "buttons";

@import "fields";
Loading

1 comment on commit 6c47be9

@emiluzelac
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would also leave the figure margins under the Elements:

 /*--------------------------------------------------------------
 3.0 Elements
 --------------------------------------------------------------*/
figure {
    margin: 0;
}

Please sign in to comment.