Skip to content

Commit

Permalink
v2.4.0
Browse files Browse the repository at this point in the history
* **VERSION:** v2.4.0
* **ACCESSIBILITY:** do not reset `outline` property
* **DOCS:** update year in license
* **DOCS:** minor updates to readme
* **DEV:** remove script to upload to personal CDN
* **DEP:** install Less as a dev dependency
  • Loading branch information
dwhieb authored Oct 14, 2018
1 parent f7223f1 commit f5293df
Show file tree
Hide file tree
Showing 7 changed files with 440 additions and 437 deletions.
2 changes: 1 addition & 1 deletion LICENSE → LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2016 Daniel W. Hieber
Copyright (c) 2018 Daniel W. Hieber

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
36 changes: 23 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,43 +1,47 @@
# flexbox-reset
A CSS reset that defaults to the CSS3 flexbox model for elements whenever possible. Exceptions are made for various inline elements, form elements, etc. Based in part on the Meyer reset.
# [flexbox-reset][1]

[![npm](https://img.shields.io/npm/v/npm.svg?maxAge=2592000)](https://www.npmjs.com/package/flexbox-reset)
[![npm](https://img.shields.io/npm/dt/flexbox-reset.svg?maxAge=2592000)](https://www.npmjs.com/package/flexbox-reset)
[![GitHub issues](https://img.shields.io/github/issues/dwhieb/flexbox-reset.svg?maxAge=2592000)](https://github.com/dwhieb/flexbox-reset/issues)
[![license](https://img.shields.io/github/license/dwhieb/flexbox-reset.svg?maxAge=2592000)](https://github.com/dwhieb/flexbox-reset)
A CSS reset that defaults to the flexbox model for elements whenever appropriate. Exceptions are made for various inline elements, form elements, etc. Based in part on the Meyer reset.

[![GitHub forks](https://img.shields.io/github/forks/dwhieb/flexbox-reset.svg?style=social&label=Fork&maxAge=2592000)](https://github.com/dwhieb/flexbox-reset)
[![GitHub stars](https://img.shields.io/github/stars/dwhieb/flexbox-reset.svg?style=social&label=Star&maxAge=2592000)](https://github.com/dwhieb/flexbox-reset)
[![GitHub watchers](https://img.shields.io/github/watchers/dwhieb/flexbox-reset.svg?style=social&label=Watch&maxAge=2592000)](https://github.com/dwhieb/flexbox-reset)
[![GitHub followers](https://img.shields.io/github/followers/dwhieb.svg?style=social&label=Follow&maxAge=2592000)](https://github.com/dwhieb/flexbox-reset)
[![npm](https://img.shields.io/npm/v/npm.svg?maxAge=2592000)][2]
[![npm](https://img.shields.io/npm/dt/flexbox-reset.svg?maxAge=2592000)][2]
[![GitHub issues](https://img.shields.io/github/issues/dwhieb/flexbox-reset.svg?maxAge=2592000)][3]
[![license](https://img.shields.io/github/license/dwhieb/flexbox-reset.svg?maxAge=2592000)][4]

[![GitHub stars](https://img.shields.io/github/stars/dwhieb/flexbox-reset.svg?style=social&label=Star&maxAge=2592000)][1]
[![GitHub forks](https://img.shields.io/github/forks/dwhieb/flexbox-reset.svg?style=social&label=Fork&maxAge=2592000)][1]

## Install

Install using npm:

```
npm install --save flexbox-reset
npm i flexbox-reset
```

Or simply [download from GitHub](https://raw.githubusercontent.com/dwhieb/flexbox-reset/master/flexbox-reset.less).
[Or download from the GitHub release page][5].

## Usage

HTML:

```html
<link rel=stylesheet href=node_modules/flexbox-reset/flexbox-reset.css type=text/css>
```

CSS:

```css
@import 'node_modules/flexbox-reset/flexbox-reset.css';
```

LESS:
```less

```css
@import 'node_modules/flexbox-reset/flexbox-reset.less';
```

## Philosophy

When the web began, webpages were primarily modeled on traditional print paper documents, and so CSS styles were designed to imitate the classic paper book/document, and were largely text-focused. Webpages were designed to be read from top to bottom like a paper page, with headers, sidebars, and fixed page widths.

Today, webpages are no longer modeled on text documents. They are much less linear, and focus more strongly on multimedia elements, which may be positioned anywhere on the page. While many webpages still include sections of running text, these sections now usually make up just one part of a page.
Expand All @@ -47,3 +51,9 @@ So why are we still using styles designed for print layouts when our webpages no
This flexbox reset is based on the observation that modern webpages are multimedia, visual interactive layouts, where running sections of text are just one type of content among many. Since the flexbox model better captures the design of modern webpages, this reset applies the flexbox model by default, and makes exceptions for inline elements, form elements, and others.

By switching the default styling approach from block or inline to flexbox, running text becomes the special case rather than the norm. Users should apply traditional block and inline styles to sections of their page which contain running text.

[1]: https://github.com/dwhieb/flexbox-reset
[2]: https://www.npmjs.com/package/flexbox-reset
[3]: https://github.com/dwhieb/flexbox-reset/issues
[4]: https://github.com/dwhieb/flexbox-reset/blob/master/LICENSE.md
[5]: https://github.com/dwhieb/flexbox-reset/releases
18 changes: 0 additions & 18 deletions build/upload.js

This file was deleted.

14 changes: 8 additions & 6 deletions flexbox-reset.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* reset.less */
/* The CSS reset, from the flexbox-reset package: https://www.npmjs.com/package/flexbox-reset */
html,
body,
div,
Expand Down Expand Up @@ -92,7 +94,6 @@ video {
flex-direction: column;
font: inherit;
margin: 0;
outline: 0;
padding: 0;
text-decoration: none;
vertical-align: baseline;
Expand Down Expand Up @@ -157,7 +158,8 @@ a:link,
a:visited,
a:hover,
a:active {
background: transparent;
background-color: transparent;
background-image: none;
color: inherit;
text-decoration: none;
}
Expand All @@ -175,10 +177,10 @@ blockquote,
q {
quotes: none;
}
blockquote:before,
q:before,
blockquote:after,
q:after {
blockquote::before,
q::before,
blockquote::after,
q::after {
content: '';
content: none;
}
Expand Down
28 changes: 16 additions & 12 deletions flexbox-reset.less
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/* reset.less */

/* The CSS reset, from the flexbox-reset package: https://www.npmjs.com/package/flexbox-reset */

// general elements
html, body, div, span, applet, object, iframe,
// heading elements
Expand All @@ -20,7 +24,6 @@ article, aside, audio, canvas, details, embed, figure, figcaption, footer, heade
flex-direction: column;
font: inherit;
margin: 0;
outline: 0;
padding: 0;
text-decoration: none;
vertical-align: baseline;
Expand All @@ -42,27 +45,28 @@ blockquote, button, caption, dd, dt, figcaption, h1, h2, h3, h4, h5, h6, input,

// remove link styling
a, a:link, a:visited, a:hover, a:active {
background: transparent;
color: inherit;
text-decoration: none;
background-color: transparent;
background-image: none;
color: inherit;
text-decoration: none;
}

// set defaults for body
body {
color: black;
font-size: 100%;
color: black;
font-size: 100%;
font-stretch: normal;
font-style: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
min-height: 100vh;
font-weight: normal;
line-height: 1;
min-height: 100vh;
}

// remove styling from quotes
blockquote, q {
quotes: none;
&:before, &:after {
&::before, &::after {
content: '';
content: none;
}
Expand All @@ -88,7 +92,7 @@ ol, ul {
// set default table styling
table {
border-spacing: 0;
display: table;
display: table;
}

tbody {
Expand Down
Loading

0 comments on commit f5293df

Please sign in to comment.