7 changed files with 618 additions and 0 deletions
@ -0,0 +1,27 @@
|
||||
// HTML5 Boilerplate |
||||
// |
||||
// What follows is the result of much research on cross-browser styling. |
||||
// Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, |
||||
// Kroc Camen, and the h5bp dev community and team. |
||||
|
||||
@import 'h5bp/normalize'; |
||||
@import 'h5bp/main'; |
||||
@import 'h5bp/browserupgrade'; |
||||
@import 'h5bp/errorpage'; |
||||
@import 'h5bp/helpers'; |
||||
@import 'h5bp/media'; |
||||
|
||||
@mixin h5bp-custom { |
||||
// Redefine this mixin to add custom modifications to H5BP styles. |
||||
|
||||
} |
||||
|
||||
@mixin h5bp { |
||||
@include h5bp-normalize; |
||||
@include h5bp-main; |
||||
@include h5bp-browserupgrade; |
||||
@include h5bp-errorpage; |
||||
@include h5bp-custom; |
||||
@include h5bp-helpers; |
||||
@include h5bp-media; |
||||
} |
@ -0,0 +1,9 @@
|
||||
// Browser Upgrade Message |
||||
@mixin h5bp-browserupgrade { |
||||
.browserupgrade { |
||||
margin: 0.2em 0; |
||||
background: #ccc; |
||||
color: #000; |
||||
padding: 0.2em 0; |
||||
} |
||||
} |
@ -0,0 +1,45 @@
|
||||
@mixin h5bp-errorpage { |
||||
html.errorpages { |
||||
color: #888; |
||||
display: table; |
||||
font-family: sans-serif; |
||||
height: 100%; |
||||
text-align: center; |
||||
width: 100%; |
||||
|
||||
* { |
||||
line-height: 1.2; |
||||
margin: 0; |
||||
} |
||||
|
||||
body { |
||||
display: table-cell; |
||||
vertical-align: middle; |
||||
margin: 2em auto; |
||||
} |
||||
|
||||
h1 { |
||||
color: #555; |
||||
font-size: 2em; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
p { |
||||
margin: 0 auto; |
||||
width: 280px; |
||||
} |
||||
|
||||
@media only screen and (max-width: 280px) { |
||||
|
||||
body, p { |
||||
width: 95%; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 1.5em; |
||||
margin: 0 0 0.3em; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
@ -0,0 +1,70 @@
|
||||
// Helper classes |
||||
@mixin h5bp-helpers { |
||||
|
||||
.hidden { @include h5bp-hidden; } |
||||
|
||||
.visuallyhidden { @include h5bp-visuallyhidden; } |
||||
|
||||
.invisible { @include h5bp-invisible; } |
||||
|
||||
.clearfix { @include h5bp-clearfix; } |
||||
|
||||
} |
||||
|
||||
// Hide from both screenreaders and browsers: |
||||
// http://juicystudio.com/article/screen-readers-display-none.php |
||||
@mixin h5bp-hidden { |
||||
display: none !important; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
// Hide only visually, but have it available for screenreaders: |
||||
// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility |
||||
@mixin h5bp-visuallyhidden { |
||||
border: 0; |
||||
clip: rect(0 0 0 0); |
||||
height: 1px; |
||||
margin: -1px; |
||||
overflow: hidden; |
||||
padding: 0; |
||||
position: absolute; |
||||
width: 1px; |
||||
|
||||
// Extends the .visuallyhidden class to allow the element to be focusable |
||||
// when navigated to via the keyboard: https://www.drupal.org/node/897638 |
||||
&.focusable:active, |
||||
&.focusable:focus { |
||||
clip: auto; |
||||
height: auto; |
||||
margin: 0; |
||||
overflow: visible; |
||||
position: static; |
||||
width: auto; |
||||
} |
||||
} |
||||
|
||||
// Hide visually and from screenreaders, but maintain layout |
||||
@mixin h5bp-invisible { |
||||
visibility: hidden; |
||||
} |
||||
|
||||
// Clearfix: contain floats |
||||
// |
||||
// For modern browsers |
||||
// 1. The space content is one way to avoid an Opera bug when the |
||||
// `contenteditable` attribute is included anywhere else in the document. |
||||
// Otherwise it causes space to appear at the top and bottom of elements |
||||
// that receive the `clearfix` class. |
||||
// 2. The use of `table` rather than `block` is only necessary if using |
||||
// `:before` to contain the top-margins of child elements. |
||||
@mixin h5bp-clearfix { |
||||
&:before, |
||||
&:after { |
||||
content: " "; // 1 |
||||
display: table; // 2 |
||||
} |
||||
|
||||
&:after { |
||||
clear: both; |
||||
} |
||||
} |
@ -0,0 +1,66 @@
|
||||
$font-color: #222 !default; |
||||
$font-size: 1em !default; |
||||
$line-height: 1.4 !default; |
||||
$selected-background-color: #b3d4fc !default; |
||||
$hr-color: #ccc !default; |
||||
|
||||
@mixin h5bp-main { |
||||
@include h5bp-base-styles; |
||||
} |
||||
|
||||
// Base styles: opinionated defaults |
||||
@mixin h5bp-base-styles { |
||||
html { |
||||
color: $font-color; |
||||
font-size: $font-size; |
||||
line-height: $line-height; |
||||
} |
||||
|
||||
// Remove text-shadow in selection highlight: |
||||
// https://twitter.com/miketaylr/status/12228805301 |
||||
// These selection rule sets have to be separate. |
||||
// Customize the background color to match your design. |
||||
::-moz-selection { |
||||
background: $selected-background-color; |
||||
text-shadow: none; |
||||
} |
||||
|
||||
::selection { |
||||
background: $selected-background-color; |
||||
text-shadow: none; |
||||
} |
||||
|
||||
// A better looking default horizontal rule |
||||
hr { |
||||
display: block; |
||||
height: 1px; |
||||
border: 0; |
||||
border-top: 1px solid $hr-color; |
||||
margin: 1em 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
// Remove the gap between audio, canvas, iframes, |
||||
// images, videos and the bottom of their containers: |
||||
// https://github.com/h5bp/html5-boilerplate/issues/440 |
||||
audio, |
||||
canvas, |
||||
iframe, |
||||
img, |
||||
svg, |
||||
video { |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
// Remove default fieldset styles. |
||||
fieldset { |
||||
border: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
// Allow only vertical resizing of textareas. |
||||
textarea { |
||||
resize: vertical; |
||||
} |
||||
} |
@ -0,0 +1,76 @@
|
||||
// Print styles |
||||
// Inlined to avoid the additional HTTP request: |
||||
// http://www.phpied.com/delay-loading-your-print-css/ |
||||
@mixin h5bp-media { |
||||
@media print { |
||||
@include h5bp-media-print; |
||||
} |
||||
} |
||||
|
||||
@mixin h5bp-media-print { |
||||
@media print { |
||||
*, |
||||
*:before, |
||||
*:after { |
||||
background: transparent !important; |
||||
color: #000 !important; // Black prints faster: |
||||
// http://www.sanbeiji.com/archives/953 |
||||
box-shadow: none !important; |
||||
text-shadow: none !important; |
||||
} |
||||
|
||||
a, |
||||
a:visited { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
a[href]:after { |
||||
content: " (" attr(href) ")"; |
||||
} |
||||
|
||||
abbr[title]:after { |
||||
content: " (" attr(title) ")"; |
||||
} |
||||
|
||||
// Don't show links that are fragment identifiers, |
||||
// or use the `javascript:` pseudo protocol |
||||
a[href^="#"]:after, |
||||
a[href^="javascript:"]:after { |
||||
content: ""; |
||||
} |
||||
|
||||
pre, |
||||
blockquote { |
||||
border: 1px solid #999; |
||||
page-break-inside: avoid; |
||||
} |
||||
|
||||
// Printing Tables: |
||||
// http://css-discuss.incutio.com/wiki/Printing_Tables |
||||
|
||||
thead { |
||||
display: table-header-group; |
||||
} |
||||
|
||||
tr, |
||||
img { |
||||
page-break-inside: avoid; |
||||
} |
||||
|
||||
img { |
||||
max-width: 100% !important; |
||||
} |
||||
|
||||
p, |
||||
h2, |
||||
h3 { |
||||
orphans: 3; |
||||
widows: 3; |
||||
} |
||||
|
||||
h2, |
||||
h3 { |
||||
page-break-after: avoid; |
||||
} |
||||
} |
||||
} |
@ -0,0 +1,325 @@
|
||||
// normalize.css v3.0.2 | MIT License | git.io/normalize |
||||
@mixin h5bp-normalize { |
||||
@include normalize-base; |
||||
@include normalize-display; |
||||
@include normalize-links; |
||||
@include normalize-semantics; |
||||
@include normalize-embedded; |
||||
@include normalize-grouping; |
||||
@include normalize-forms; |
||||
@include normalize-tables; |
||||
} |
||||
|
||||
// Base |
||||
@mixin normalize-base { |
||||
// 1. Set default font family to sans-serif. |
||||
// 2. Prevent iOS text size adjust after orientation change, without |
||||
// disabling user zoom. |
||||
html { |
||||
font-family: sans-serif; // 1 |
||||
-ms-text-size-adjust: 100%; // 2 |
||||
-webkit-text-size-adjust: 100%; // 2 |
||||
} |
||||
// Remove default margin. |
||||
body { |
||||
margin: 0; |
||||
} |
||||
|
||||
} |
||||
|
||||
// HTML5 display definitions |
||||
@mixin normalize-display { |
||||
// Correct `block` display not defined for any HTML5 element in IE 8/9. |
||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11 |
||||
// and Firefox. |
||||
// Correct `block` display not defined for `main` in IE 11. |
||||
article, |
||||
aside, |
||||
details, |
||||
figcaption, |
||||
figure, |
||||
footer, |
||||
header, |
||||
hgroup, |
||||
main, |
||||
menu, |
||||
nav, |
||||
section, |
||||
summary { |
||||
display: block; |
||||
} |
||||
|
||||
// 1. Correct `inline-block` display not defined in IE 8/9. |
||||
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. |
||||
audio, |
||||
canvas, |
||||
progress, |
||||
video { |
||||
display: inline-block; // 1 |
||||
vertical-align: baseline; // 2 |
||||
} |
||||
|
||||
// Prevent modern browsers from displaying `audio` without controls. |
||||
// Remove excess height in iOS 5 devices. |
||||
audio:not([controls]) { |
||||
display: none; |
||||
height: 0; |
||||
} |
||||
|
||||
// Address `[hidden]` styling not present in IE 8/9/10. |
||||
// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. |
||||
[hidden], |
||||
template { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
// Links |
||||
@mixin normalize-links { |
||||
// Remove the gray background color from active links in IE 10. |
||||
a { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
// Improve readability when focused and also mouse hovered in all browsers. |
||||
a:active, |
||||
a:hover { |
||||
outline: 0; |
||||
} |
||||
} |
||||
|
||||
// Text-level semantics |
||||
@mixin normalize-semantics { |
||||
// Address styling not present in IE 8/9/10/11, Safari, and Chrome. |
||||
abbr[title] { |
||||
border-bottom: 1px dotted; |
||||
} |
||||
|
||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. |
||||
b, |
||||
strong { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
// Address styling not present in Safari and Chrome. |
||||
dfn { |
||||
font-style: italic; |
||||
} |
||||
|
||||
// Address variable `h1` font-size and margin within `section` and `article` |
||||
// contexts in Firefox 4+, Safari, and Chrome. |
||||
h1 { |
||||
font-size: 2em; |
||||
margin: 0.67em 0; |
||||
} |
||||
|
||||
// Address styling not present in IE 8/9. |
||||
mark { |
||||
background: #ff0; |
||||
color: #000; |
||||
} |
||||
|
||||
// Address inconsistent and variable font size in all browsers. |
||||
small { |
||||
font-size: 80%; |
||||
} |
||||
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers. |
||||
sub, |
||||
sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
} |
||||
|
||||
// Embedded content |
||||
@mixin normalize-embedded { |
||||
// Remove border when inside `a` element in IE 8/9/10. |
||||
img { |
||||
border: 0; |
||||
} |
||||
|
||||
// Correct overflow not hidden in IE 9/10/11. |
||||
svg:not(:root) { |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
|
||||
// Grouping content |
||||
@mixin normalize-grouping { |
||||
// Address margin not present in IE 8/9 and Safari. |
||||
figure { |
||||
margin: 1em 40px; |
||||
} |
||||
|
||||
// Address differences between Firefox and other browsers. |
||||
hr { |
||||
-moz-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
height: 0; |
||||
} |
||||
|
||||
// Contain overflow in all browsers. |
||||
pre { |
||||
overflow: auto; |
||||
} |
||||
|
||||
// Address odd `em`-unit font size rendering in all browsers. |
||||
code, |
||||
kbd, |
||||
pre, |
||||
samp { |
||||
font-family: monospace, monospace; |
||||
font-size: 1em; |
||||
} |
||||
} |
||||
|
||||
// Forms |
||||
@mixin normalize-forms { |
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited |
||||
// styling of `select`, unless a `border` property is set. |
||||
// 1. Correct color not being inherited. |
||||
// Known issue: affects color of disabled elements. |
||||
// 2. Correct font properties not being inherited. |
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. |
||||
button, |
||||
input, |
||||
optgroup, |
||||
select, |
||||
textarea { |
||||
color: inherit; // 1 |
||||
font: inherit; // 2 |
||||
margin: 0; // 3 |
||||
} |
||||
|
||||
// Address `overflow` set to `hidden` in IE 8/9/10/11. |
||||
button { |
||||
overflow: visible; |
||||
} |
||||
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`. |
||||
// All other form control elements do not inherit `text-transform` values. |
||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. |
||||
// Correct `select` style inheritance in Firefox. |
||||
button, |
||||
select { |
||||
text-transform: none; |
||||
} |
||||
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` |
||||
// and `video` controls. |
||||
// 2. Correct inability to style clickable `input` types in iOS. |
||||
// 3. Improve usability and consistency of cursor style between image-type |
||||
// `input` and others. |
||||
button, |
||||
html input[type="button"], // 1 |
||||
input[type="reset"], |
||||
input[type="submit"] { |
||||
-webkit-appearance: button; // 2 |
||||
cursor: pointer; // 3 |
||||
} |
||||
|
||||
// Re-set default cursor for disabled elements. |
||||
button[disabled], |
||||
html input[disabled] { |
||||
cursor: default; |
||||
} |
||||
|
||||
// Remove inner padding and border in Firefox 4+. |
||||
button::-moz-focus-inner, |
||||
input::-moz-focus-inner { |
||||
border: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in |
||||
// the UA stylesheet. |
||||
input { |
||||
line-height: normal; |
||||
} |
||||
|
||||
// It's recommended that you don't attempt to style these elements. |
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width. |
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10. |
||||
// 2. Remove excess padding in IE 8/9/10. |
||||
input[type="checkbox"], |
||||
input[type="radio"] { |
||||
box-sizing: border-box; // 1 |
||||
padding: 0; // 2 |
||||
} |
||||
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain |
||||
// `font-size` values of the `input`, it causes the cursor style of the |
||||
// decrement button to change from `default` to `text`. |
||||
input[type="number"]::-webkit-inner-spin-button, |
||||
input[type="number"]::-webkit-outer-spin-button { |
||||
height: auto; |
||||
} |
||||
|
||||
// 1. Address `appearance` set to `searchfield` in Safari and Chrome. |
||||
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome |
||||
// (include `-moz` to future-proof). |
||||
input[type="search"] { |
||||
-webkit-appearance: textfield; /* 1 */ |
||||
-moz-box-sizing: content-box; |
||||
-webkit-box-sizing: content-box; /* 2 */ |
||||
box-sizing: content-box; |
||||
} |
||||
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X. |
||||
// Safari (but not Chrome) clips the cancel button when the search input has |
||||
// padding (and `textfield` appearance). |
||||
input[type="search"]::-webkit-search-cancel-button, |
||||
input[type="search"]::-webkit-search-decoration { |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
// Define consistent border, margin, and padding. |
||||
fieldset { |
||||
border: 1px solid #c0c0c0; |
||||
margin: 0 2px; |
||||
padding: 0.35em 0.625em 0.75em; |
||||
} |
||||
|
||||
// 1. Correct `color` not being inherited in IE 8/9/10/11. |
||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets. |
||||
legend { |
||||
border: 0; /* 1 */ |
||||
padding: 0; /* 2 */ |
||||
} |
||||
|
||||
// Remove default vertical scrollbar in IE 8/9/10/11. |
||||
textarea { |
||||
overflow: auto; |
||||
} |
||||
|
||||
// Don't inherit the `font-weight` (applied by a rule above). |
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. |
||||
optgroup { |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
// Tables |
||||
@mixin normalize-tables { |
||||
// Remove most spacing between table cells. |
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
} |
||||
|
||||
td, |
||||
th { |
||||
padding: 0; |
||||
} |
||||
} |
Loading…
Reference in new issue