Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add normalize
Including docs & tests
  • Loading branch information
Jorge Bucaran authored and notslang committed Jan 19, 2015
1 parent afa4bfe commit dfed0e1
Show file tree
Hide file tree
Showing 14 changed files with 399 additions and 11 deletions.
3 changes: 2 additions & 1 deletion Readme.md
Expand Up @@ -53,9 +53,10 @@ server.use(stylus.middleware({
```css
@import 'nib/gradients'
@import 'nib/overflow'
@import 'nib/normalize'
```

to be continued....
_To be continued..._

## More Information

Expand Down
42 changes: 32 additions & 10 deletions docs/README.md
Expand Up @@ -185,16 +185,38 @@ button {
```

## Reset
Nib comes bundled with Eric Meyer's style reset support, you can choose to apply the global or any specifics that you wish. To view the definitions view [reset.styl](https://github.com/visionmedia/nib/blob/master/lib/nib/reset.styl)

- global-reset()
- nested-reset()
- reset-font()
- reset-box-model()
- reset-body()
- reset-table()
- reset-table-cell()
- reset-html5()
Nib comes bundled with [Eric Meyer's style reset](eric-meyer) and [Nicolas Gallagher's _Normalize_](normalize) support and, you can choose to apply the global or any specifics that you wish. To view the definitions view [`reset.styl`](https://github.com/tj/nib/blob/master/lib/nib/reset.styl).

[eric-meyer]: http://meyerweb.com/eric/tools/css/reset/
[normalize]: https://github.com/necolas/normalize.css

> CSS Reset
- `global-reset()`
- `nested-reset()`
- `reset-font()`
- `reset-box-model()`
- `reset-body()`
- `reset-table()`
- `reset-table-cell()`
- `reset-html5()`

> Normalize
- `normalize-html5()`
- `normalize-base()`
- `normalize-links()`
- `normalize-text()`
- `normalize-embed()`
- `normalize-groups()`
- `normalize-forms()`
- `normalize-tables()`
- `normalize-css()`

[Read more][normalize-about] about Normalize or see the original CSS [here][normalize-css].

[normalize-about]: http://nicolasgallagher.com/about-normalize-css/
[normalize-css]: https://github.com/necolas/normalize.css/blob/master/normalize.css

## Border
This shorthand lets you create a border by just specifying a color, with defaults for width and style.
Expand Down
1 change: 1 addition & 0 deletions lib/nib/index.styl
Expand Up @@ -5,6 +5,7 @@
@import 'gradients'
@import 'iconic'
@import 'image'
@import 'normalize'
@import 'overflow'
@import 'positions'
@import 'reset'
Expand Down
8 changes: 8 additions & 0 deletions lib/nib/normalize/base.styl
@@ -0,0 +1,8 @@
// Based in Nicolas Gallagher's git.io/normalize
normalize-base()
html // Prevent iOS text size adjust after orientation change.
font-family sans-serif
-ms-text-size-adjust 100%
-webkit-text-size-adjust 100%
body
margin 0
7 changes: 7 additions & 0 deletions lib/nib/normalize/embed.styl
@@ -0,0 +1,7 @@
// Based in Nicolas Gallagher's git.io/normalize
normalize-embed()
img // No border when inside `a` in IE 8~10.
border 0

svg:not(:root) // Overflow should be hidden in IE 9~11.
overflow hidden
69 changes: 69 additions & 0 deletions lib/nib/normalize/forms.styl
@@ -0,0 +1,69 @@
// Based in Nicolas Gallagher's git.io/normalize
normalize-forms()
// Known limitation: Chrome and Safari on OS X allow very limited
// styling of `select`, unless a `border` property is set.
button, input, optgroup, select, textarea
color inherit // Correct color not being inherited.
font inherit // Correct font properties not being inherited.
margin 0 // Fix margins in FF 4+, Safari, and Chrome.

button // Fix `overflow` set to `hidden` in IE 8/9/10/11.
overflow visible

button, select // Consistent text-transform across browsers.
text-transform none

// Fix WebKit bug in Android 4.0, inability to style clickable `input` in
// iOS and improve usability and consistency of cursor style.
button, html input[type='button'], input[type='reset'], input[type='submit']
cursor pointer
-webkit-appearance button

// Reset default cursor for disabled elements.
button[disabled], html input[disabled]
cursor default

// Remove inner padding and border in FF 4+.
button::-moz-focus-inner, input::-moz-focus-inner
border 0
padding 0

input // Reset line-height again FF 4+ UA stylsheet.
line-height normal

// Fix box sizing and excess padding in IE 8~10
input[type='checkbox'], input[type='radio']
box-sizing border-box
padding 0

// Fix the cursor style for Chrome's increment/decrement buttons.
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button
height auto

// Consistent appearance and box-sizing in Safari and Chrome.
input[type='search']
-webkit-appearance textfield
-moz-box-sizing content-box
-webkit-box-sizing content-box
box-sizing content-box

// No inner padding and search cancel button in Safari and Chrome on OS X.
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
-webkit-appearance none

fieldset // Consistent border, margin, and padding.
border 1px solid #c0c0c0
margin 0 2px
padding 0.35em 0.625em 0.75em

legend // Hack to correct `color` not being inherited in IE 8/9/10/11.
border 0
padding 0

textarea // Remove default vertical scrollbar in IE 8~11.
overflow auto

optgroup // Don't inherit the `font-weight` applied above.
font-weight bold
17 changes: 17 additions & 0 deletions lib/nib/normalize/groups.styl
@@ -0,0 +1,17 @@
// Based in Nicolas Gallagher's git.io/normalize
normalize-groups()
figure // Margin should exist in IE 8~9 / Safari.
margin 1em 40px

hr // Consistency between FF and others.
-moz-box-sizing content-box
box-sizing content-box
height 0

pre // Contain overflow and wrap words.
overflow auto

// Hack to fix odd `em`-unit font size rendering in all browsers.
code, kbd, pre, samp
font-family monospace, monospace
font-size 1em
19 changes: 19 additions & 0 deletions lib/nib/normalize/html5.styl
@@ -0,0 +1,19 @@
// Based in Nicolas Gallagher's git.io/normalize
normalize-html5()
// `block` display for HTML5 elements in IE 8~11 and FF.
article, details, section, summary,
aside, main, menu, nav, figcaption,
figure, footer, header, hgroup
display block

audio, canvas, progress, video
display inline-block // Set `inline-block` not defined in IE 8~9.
vertical-align baseline // Fix v-align of `progress` in Chrome, FF, and O.

audio:not([controls])
display none // Prevent displaying `audio` without controls.
height 0 // Remove excess height in iOS 5 devices.

[hidden], // Address `[hidden]` styling not present in IE 8~10.
template // Hide the `template` element in IE 8~11, Safari, and FF < 22.
display none
19 changes: 19 additions & 0 deletions lib/nib/normalize/index.styl
@@ -0,0 +1,19 @@
// Based in Nicolas Gallagher's git.io/normalize
@import './base'
@import './html5'
@import './links'
@import './text'
@import './embed'
@import './groups'
@import './forms'
@import './tables'

normalize-css()
normalize-base()
normalize-html5()
normalize-links()
normalize-text()
normalize-embed()
normalize-groups()
normalize-forms()
normalize-tables()
6 changes: 6 additions & 0 deletions lib/nib/normalize/links.styl
@@ -0,0 +1,6 @@
// Based in Nicolas Gallagher's git.io/normalize
normalize-links()
a // No gray bg color in active links in IE 10.
background-color transparent
&:active, &:hover
outline 0 // + readability when focused.
7 changes: 7 additions & 0 deletions lib/nib/normalize/tables.styl
@@ -0,0 +1,7 @@
// Based in Nicolas Gallagher's git.io/normalize
normalize-tables()
table // Remove most spacing between table cells.
border-collapse collapse
border-spacing 0
td, th
padding 0
30 changes: 30 additions & 0 deletions lib/nib/normalize/text.styl
@@ -0,0 +1,30 @@
// Based in Nicolas Gallagher's git.io/normalize
normalize-text()
abbr[title] // + style not present in IE 8~11, Safari, and Chrome.
border-bottom 1px dotted

dfn // + style not present in Safari and Chrome.
font-style italic

mark // + style not present in IE 8/9.
background #ff0; color #000

b, strong // Fix `font-weight: bolder` in FF 4+, Safari, and Chrome.
font-weight bold

h1 // `h1` inside `section` and `article` fix for FF 4+, Safari & Chrome.
font-size 2em
margin 0.67em 0

small // Consistent font-size across browsers.
font-size 80%

sub, sup // Prevent `sub` and `sup` affecting `line-height`.
font-size 75%
line-height 0
position relative
vertical-align baseline
sup
top -0.5em
sub
bottom -0.25em

0 comments on commit dfed0e1

Please sign in to comment.