diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 459b83a..d2e0248 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -31,3 +31,11 @@ - Merged styling fixes for `article`, `aside`, `footer`, `header`, `nav` and `section` with fixes for `figure`, `figcaption` and `main`. - Merged styling for `kbd`, `code`, `pre` and `samp`. - Started documenting default flavor. + +## 20161013 + +- Started coding variables for base of the framework. +- `background-color` and `color` of `body` are going to be `#f9f9f9` and `#222` respectively (default flavor). +- Defaults for `font-family`, `font-size`, `line-height` remain the same. +- Dropped support for `ms-text-size-adjust` in the `html` element, as mobile IE is not well supported by the framework in general. +- Added `apply-defaults-to-all` flag to apply fonts and styles to all elements except `html`, setting fonts and sizes for the whole document properly. diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index 57972fc..a3d560f 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -3,3 +3,297 @@ Author: Angelos Chalaris (chalarangelo@gmail.com) mini.css version: v2.0 (in-production) */ +html, * { + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 1em; + line-height: 1.5; + -webkit-text-size-adjust: 100%; } + +body { + margin: 0; + color: #222; + background-color: #f9f9f9; } + +article, aside, footer, header, nav, section, figcaption, figure, main { + display: block; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ +a:active, +a:hover { + outline-width: 0; } + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; } + +/** + * Add the correct background and color in IE 9-. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; } + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } + +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ +details, +menu { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index e69de29..053ce1e 100644 --- a/flavors/v2/mini-default.min.css +++ b/flavors/v2/mini-default.min.css @@ -0,0 +1 @@ +*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f9f9f9}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item} \ No newline at end of file diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index 717288b..45ebc98 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -7,4 +7,15 @@ Flavor name: Default (mini-default) Author: Angelos Chalaris (chalarangelo@gmail.com) mini.css version: v2.0 (in-production) -*/ \ No newline at end of file +*/ +// Basic rules for body and typography +$fore-color: #222; // Text and general foreground color +$back-color: #f9f9f9; // Body background color +$base-font-family: "\"Helvetica Neue\", Helvetica, sans-serif"; // Default fonts for all elements +$base-font-size: 1em; // Default font sizing for all elements +$base-line-height: 1.5; // Default line height for all elements. +$body-margin: 0; // Margin for the body +$apply-defaults-to-all: true; // Should default values be applied to all + // elements? (`true` or `false`) +// Enable base +@import '../../scss/v2/base'; \ No newline at end of file diff --git a/scss/v2/_base.scss b/scss/v2/_base.scss index 3a45381..57da894 100644 --- a/scss/v2/_base.scss +++ b/scss/v2/_base.scss @@ -1,25 +1,32 @@ -/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Correct the line height in all browsers. - * 3. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - */ - +$apply-defaults-to-all: true !default; +@if $apply-defaults-to-all { +html, * { + font-family: #{$base-font-family}; + font-size: $base-font-size; + line-height: $base-line-height; + // Prevent adjustments of font size after orientation changes in mobile. + -webkit-text-size-adjust: 100%; +} +} +@else { html { - font-family: sans-serif; /* 1 */ - line-height: 1.15; /* 2 */ - -ms-text-size-adjust: 100%; /* 3 */ - -webkit-text-size-adjust: 100%; /* 3 */ + font-family: #{$base-font-family}; + font-size: $base-font-size; + line-height: $base-line-height; + // Prevent adjustments of font size after orientation changes in mobile. + -webkit-text-size-adjust: 100%; +} } -/** - * Remove the margin in all browsers (opinionated). - */ - body { - margin: 0; + margin: $body-margin; + color: $fore-color; + background-color: $back-color; +} + +// Correct display for older versions of IE. +article, aside, footer, header, nav, section, figcaption, figure, main { + display: block; } /** @@ -32,22 +39,6 @@ h1 { margin: 0.67em 0; } -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ - -article, -aside, -footer, -header, -nav, -section, -figcaption, -figure, -main { /* 1 */ - display: block; -} /** * 1. Add the correct box sizing in Firefox.