diff --git a/compare.html b/compare.html new file mode 100644 index 0000000..529c634 --- /dev/null +++ b/compare.html @@ -0,0 +1,59 @@ + + + + + + + Destyle.css - Compare to other resets + + + + +
+ 👈 Back +

Compare resets

+ +

⬅️ Use a larger screen to view side-by-side ➡️

+
+ +
+
+

Destyle.css

+ + + + View destyle.css test page 🔴 +
+ +
+

+ Normalize.css +

+ + + View normalize.css test page ⬛️ + + + +
+ +
+

+ + Eric Meyer's reset + +

+ + + View Eric Meyer's resettest page 🔴 + + + +
+
+ + diff --git a/index.html b/index.html index bdc43b4..d82aa58 100644 --- a/index.html +++ b/index.html @@ -7,19 +7,21 @@ Destyle.css - a clean slate for writing CSS without user agent styles + + -
-

Destyle.css

-

+
+

Destyle.css

+

Opinionated reset stylesheet that provides a clean slate for styling your html.

- Docs / Github - Test page + + Docs / Github + + Test & Compare
diff --git a/normalize.html b/normalize.html new file mode 100644 index 0000000..48e1cc2 --- /dev/null +++ b/normalize.html @@ -0,0 +1,438 @@ + + + + + + HTML5 Test Page + + + +
+
+

HTML5 Test Page

+

This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.

+
+ +
+
+

Text

+
+
+

Headings

+
+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ +
+
+

Paragraphs

+
+

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

+
+ +
+ +
+

Blockquotes

+
+
+

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

+

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

+ Said no one, ever. +
+
+ +
+
+

Lists

+
+

Definition list

+
+
Definition List Title
+
This is a definition list division.
+
+

Ordered List

+
    +
  1. List Item 1
    2. +
  2. List Item 2
    3. +
  3. List Item 3
    4. +
+

Unordered List

+
    +
  • List Item 1
    • +
  • List Item 2
    • +
  • List Item 3
    • +
+
+ +
+
+

Horizontal rules

+
+
+
+ +
+
+

Tabular data

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Caption
Table Heading 1Table Heading 2Table Heading 3Table Heading 4Table Heading 5
Table Footer 1Table Footer 2Table Footer 3Table Footer 4Table Footer 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
+ +
+
+

Code

+
+

Keyboard input: Cmd

+

Inline code: <div>code</div>

+

Sample output: This is sample output from a computer program.

+

Pre-formatted text

+ 
P R E F O R M A T T E D T E X T
+  ! " # $ % & ' ( ) * + , - . /
+  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
+  @ A B C D E F G H I J K L M N O
+  P Q R S T U V W X Y Z [ \ ] ^ _
+  ` a b c d e f g h i j k l m n o
+  p q r s t u v w x y z { | } ~
+
+ +
+
+

Inline elements

+
+

This is a text link.

+

Strong is used to indicate strong importance.

+

This text has added emphasis.

+

The b element is stylistically different text from normal text, without any special importance.

+

The i element is text that is offset from the normal text.

+

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

+

This text is deleted and This text is inserted.

+

This text has a strikethrough.

+

Superscript®.

+

Subscript for things like H2O.

+

This small text is small for for fine print, etc.

+

Abbreviation: HTML

+

This text is a short inline quotation.

+

This is a citation.

+

The dfn element indicates a definition.

+

The mark element indicates a highlight.

+

The variable element, such as x = y.

+

The time element:

+
+ +
+
+

HTML Comments

+
+

There is comment here:

+

There is a comment spanning multiple tags and lines below here.

+ +
+            +
+
+
+

Embedded content

+
+

Images

+
+

No <figure> element

+

Image alt text

+

Wrapped in a <figure> element, no <figcaption>

+
Image alt text
+

Wrapped in a <figure> element, with a <figcaption>

+
+ Image alt text +
Here is a caption for this image.
+
+
+ +
+
+

Audio

+
+ +
+
+

Video

+
+ +
+
+

Canvas

+
canvas
+ +
+
+

Meter

+
2 out of 10
+ +
+
+

Progress

+
progress
+ +
+
+

Inline SVG

+
+ +
+ +
+
+

Form elements

+
+
+ Input fields +

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+

[Top]

+
+ Select menus +

+ + +

+
+

[Top]

+
+ Checkboxes +
    +
    • +
    • +
    • +
+
+

[Top]

+
+ Radio buttons +
    +
    • +
    • +
    • +
+
+

[Top]

+
+ Textareas +

+ + +

+
+

[Top]

+
+ HTML5 inputs +

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+

[Top]

+
+ Action buttons +

+ + + + +

+

+ + + + +

+
+

[Top]

+
+
+
+ +
+ + diff --git a/reset.html b/reset.html new file mode 100644 index 0000000..19df73d --- /dev/null +++ b/reset.html @@ -0,0 +1,438 @@ + + + + + + HTML5 Test Page + + + +
+
+

HTML5 Test Page

+

This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.

+
+ +
+
+

Text

+
+
+

Headings

+
+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ +
+
+

Paragraphs

+
+

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

+
+ +
+ +
+

Blockquotes

+
+
+

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

+

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

+ Said no one, ever. +
+
+ +
+
+

Lists

+
+

Definition list

+
+
Definition List Title
+
This is a definition list division.
+
+

Ordered List

+
    +
  1. List Item 1
    2. +
  2. List Item 2
    3. +
  3. List Item 3
    4. +
+

Unordered List

+
    +
  • List Item 1
    • +
  • List Item 2
    • +
  • List Item 3
    • +
+
+ +
+
+

Horizontal rules

+
+
+
+ +
+
+

Tabular data

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Caption
Table Heading 1Table Heading 2Table Heading 3Table Heading 4Table Heading 5
Table Footer 1Table Footer 2Table Footer 3Table Footer 4Table Footer 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
+ +
+
+

Code

+
+

Keyboard input: Cmd

+

Inline code: <div>code</div>

+

Sample output: This is sample output from a computer program.

+

Pre-formatted text

+ 
P R E F O R M A T T E D T E X T
+  ! " # $ % & ' ( ) * + , - . /
+  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
+  @ A B C D E F G H I J K L M N O
+  P Q R S T U V W X Y Z [ \ ] ^ _
+  ` a b c d e f g h i j k l m n o
+  p q r s t u v w x y z { | } ~
+
+ +
+
+

Inline elements

+
+

This is a text link.

+

Strong is used to indicate strong importance.

+

This text has added emphasis.

+

The b element is stylistically different text from normal text, without any special importance.

+

The i element is text that is offset from the normal text.

+

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

+

This text is deleted and This text is inserted.

+

This text has a strikethrough.

+

Superscript®.

+

Subscript for things like H2O.

+

This small text is small for for fine print, etc.

+

Abbreviation: HTML

+

This text is a short inline quotation.

+

This is a citation.

+

The dfn element indicates a definition.

+

The mark element indicates a highlight.

+

The variable element, such as x = y.

+

The time element:

+
+ +
+
+

HTML Comments

+
+

There is comment here:

+

There is a comment spanning multiple tags and lines below here.

+ +
+            +
+
+
+

Embedded content

+
+

Images

+
+

No <figure> element

+

Image alt text

+

Wrapped in a <figure> element, no <figcaption>

+
Image alt text
+

Wrapped in a <figure> element, with a <figcaption>

+
+ Image alt text +
Here is a caption for this image.
+
+
+ +
+
+

Audio

+
+ +
+
+

Video

+
+ +
+
+

Canvas

+
canvas
+ +
+
+

Meter

+
2 out of 10
+ +
+
+

Progress

+
progress
+ +
+
+

Inline SVG

+
+ +
+ +
+
+

Form elements

+
+
+ Input fields +

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+

[Top]

+
+ Select menus +

+ + +

+
+

[Top]

+
+ Checkboxes +
    +
    • +
    • +
    • +
+
+

[Top]

+
+ Radio buttons +
    +
    • +
    • +
    • +
+
+

[Top]

+
+ Textareas +

+ + +

+
+

[Top]

+
+ HTML5 inputs +

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+

[Top]

+
+ Action buttons +

+ + + + +

+

+ + + + +

+
+

[Top]

+
+
+
+ +
+ + diff --git a/style.css b/style.css index e69de29..310f7f9 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,127 @@ +@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600'); + +body { + font: 16px/1.4 'Fira Sans', sans-serif; + color: #333; +} + +/* General + ========================================================== */ + +.container { + padding: 30px 20px; + max-width: 600px; + margin: 0 auto; +} + +@media (min-width: 400px) { + .container { + padding: 50px 20px; + } +} + +.main-title { + font-size: 2em; + font-weight: 600; + margin-bottom: 20px; +} + +.sub-title { + font-size: 1.4em; + margin-bottom: 70px; +} + +.btn { + background-color: dodgerblue; + color: #fff; + padding: 0.8em 1.4em; + font-weight: 600; + border-radius: 3px; + display: inline-block; + vertical-align: middle; +} + +.btn-small { +} + +/* Compare + ========================================================== */ + +.header { + margin: 20px; + position: relative; + text-align: center; +} + +.header-title { + font-weight: 600; + font-size: 1.4em; +} + +.header-back { + position: absolute; + top: 0; + left: 0; + padding-top: 0.4em; +} + +.header-back:active, +.header-back:focus, +.header-back:hover { + text-decoration: underline; +} + +.header-note { + padding-top: 30px; + font-size: 95%; + margin-bottom: 30px; +} + +@media (min-width: 750px) { + .header-note { + display: none; + } +} + +/* Compare */ + +.compare { +} + +.compare-item { + padding: 0 20px 20px; +} + +@media (min-width: 750px) { + .compare-item { + float: left; + width: 33.33333%; + padding: 20px; + } +} + +.compare-title { + font-weight: 600; + font-size: 1.2em; + margin-bottom: 4px; +} + +.compare-btn { +} + +@media (min-width: 750px) { + .compare-btn { + display: none; + } +} + +.compare-frame { + display: none; +} + +@media (min-width: 750px) { + .compare-frame { + display: block; + width: 100%; + } +}