reportir 0.2.1 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/reportir/static_site_template/css/main.css +15 -64
- data/lib/reportir/static_site_template/css/vendor/owl.carousel.css +216 -0
- data/lib/reportir/static_site_template/css/vendor/owl.default.theme.min.css +1 -0
- data/lib/reportir/static_site_template/index.html +95 -69
- data/lib/reportir/static_site_template/js/{main.js → models.js} +0 -0
- data/lib/reportir/static_site_template/js/vendor/owl.carousel.min.js +2 -0
- data/lib/reportir/version.rb +1 -1
- data/lib/reportir.rb +73 -51
- data/reportir.gemspec +1 -0
- metadata +20 -30
- data/lib/reportir/static_site_template/.editorconfig +0 -13
- data/lib/reportir/static_site_template/.gitattributes +0 -1
- data/lib/reportir/static_site_template/.gitignore +0 -2
- data/lib/reportir/static_site_template/.htaccess +0 -984
- data/lib/reportir/static_site_template/404.html +0 -60
- data/lib/reportir/static_site_template/LICENSE.txt +0 -19
- data/lib/reportir/static_site_template/apple-touch-icon.png +0 -0
- data/lib/reportir/static_site_template/css/font/FontAwesome.otf +0 -0
- data/lib/reportir/static_site_template/css/font/fontawesome-webfont.eot +0 -0
- data/lib/reportir/static_site_template/css/font/fontawesome-webfont.svg +0 -284
- data/lib/reportir/static_site_template/css/font/fontawesome-webfont.ttf +0 -0
- data/lib/reportir/static_site_template/css/font/fontawesome-webfont.woff +0 -0
- data/lib/reportir/static_site_template/css/vendor/font-awesome.min.css +0 -33
- data/lib/reportir/static_site_template/doc/TOC.md +0 -29
- data/lib/reportir/static_site_template/doc/css.md +0 -162
- data/lib/reportir/static_site_template/doc/extend.md +0 -663
- data/lib/reportir/static_site_template/doc/faq.md +0 -62
- data/lib/reportir/static_site_template/doc/html.md +0 -223
- data/lib/reportir/static_site_template/doc/js.md +0 -37
- data/lib/reportir/static_site_template/doc/misc.md +0 -175
- data/lib/reportir/static_site_template/doc/usage.md +0 -130
- data/lib/reportir/static_site_template/humans.txt +0 -15
- data/lib/reportir/static_site_template/img/pagination.png +0 -0
- data/lib/reportir/static_site_template/robots.txt +0 -5
- data/lib/reportir/static_site_template/tile-wide.png +0 -0
- data/lib/reportir/static_site_template/tile.png +0 -0
- data/reportir-0.2.0.gem +0 -0
@@ -1,33 +0,0 @@
|
|
1
|
-
/*!
|
2
|
-
* Font Awesome 3.0.2
|
3
|
-
* the iconic font designed for use with Twitter Bootstrap
|
4
|
-
* -------------------------------------------------------
|
5
|
-
* The full suite of pictographic icons, examples, and documentation
|
6
|
-
* can be found at: http://fortawesome.github.com/Font-Awesome/
|
7
|
-
*
|
8
|
-
* License
|
9
|
-
* -------------------------------------------------------
|
10
|
-
* - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
|
11
|
-
* - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
|
12
|
-
* http://opensource.org/licenses/mit-license.html
|
13
|
-
* - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
|
14
|
-
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
|
15
|
-
* "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
|
16
|
-
|
17
|
-
* Contact
|
18
|
-
* -------------------------------------------------------
|
19
|
-
* Email: dave@davegandy.com
|
20
|
-
* Twitter: http://twitter.com/fortaweso_me
|
21
|
-
* Work: Lead Product Designer @ http://kyruus.com
|
22
|
-
*/
|
23
|
-
|
24
|
-
@font-face{
|
25
|
-
font-family:'FontAwesome';
|
26
|
-
src:url('../font/fontawesome-webfont.eot?v=3.0.1');
|
27
|
-
src:url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
|
28
|
-
url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
|
29
|
-
url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
|
30
|
-
font-weight:normal;
|
31
|
-
font-style:normal }
|
32
|
-
|
33
|
-
[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}a [class^="icon-"],a [class*=" icon-"]{display:inline-block}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}.btn [class^="icon-"],.nav [class^="icon-"],.btn [class*=" icon-"],.nav [class*=" icon-"]{display:inline}.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em}.btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block}.nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em}li [class^="icon-"],.nav li [class^="icon-"],li [class*=" icon-"],.nav li [class*=" icon-"]{display:inline-block;width:1.25em;text-align:center}li [class^="icon-"].icon-large,.nav li [class^="icon-"].icon-large,li [class*=" icon-"].icon-large,.nav li [class*=" icon-"].icon-large{width:1.5625em}ul.icons{list-style-type:none;text-indent:-0.75em}ul.icons li [class^="icon-"],ul.icons li [class*=" icon-"]{width:.75em}.icon-muted{color:#eee}.icon-border{border:solid 1px #eee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.pull-right{float:right}.pull-left{float:left}[class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em}[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}.btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em}.btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em}.btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em}.btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em}.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em}.icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}@-moz-document url-prefix(){.icon-spin{height:.9em}.btn .icon-spin{height:auto}.icon-spin.icon-large{height:1.25em}.btn .icon-spin.icon-large{height:.75em}}.icon-glass:before{content:"\f000"}.icon-music:before{content:"\f001"}.icon-search:before{content:"\f002"}.icon-envelope:before{content:"\f003"}.icon-heart:before{content:"\f004"}.icon-star:before{content:"\f005"}.icon-star-empty:before{content:"\f006"}.icon-user:before{content:"\f007"}.icon-film:before{content:"\f008"}.icon-th-large:before{content:"\f009"}.icon-th:before{content:"\f00a"}.icon-th-list:before{content:"\f00b"}.icon-ok:before{content:"\f00c"}.icon-remove:before{content:"\f00d"}.icon-zoom-in:before{content:"\f00e"}.icon-zoom-out:before{content:"\f010"}.icon-off:before{content:"\f011"}.icon-signal:before{content:"\f012"}.icon-cog:before{content:"\f013"}.icon-trash:before{content:"\f014"}.icon-home:before{content:"\f015"}.icon-file:before{content:"\f016"}.icon-time:before{content:"\f017"}.icon-road:before{content:"\f018"}.icon-download-alt:before{content:"\f019"}.icon-download:before{content:"\f01a"}.icon-upload:before{content:"\f01b"}.icon-inbox:before{content:"\f01c"}.icon-play-circle:before{content:"\f01d"}.icon-repeat:before{content:"\f01e"}.icon-refresh:before{content:"\f021"}.icon-list-alt:before{content:"\f022"}.icon-lock:before{content:"\f023"}.icon-flag:before{content:"\f024"}.icon-headphones:before{content:"\f025"}.icon-volume-off:before{content:"\f026"}.icon-volume-down:before{content:"\f027"}.icon-volume-up:before{content:"\f028"}.icon-qrcode:before{content:"\f029"}.icon-barcode:before{content:"\f02a"}.icon-tag:before{content:"\f02b"}.icon-tags:before{content:"\f02c"}.icon-book:before{content:"\f02d"}.icon-bookmark:before{content:"\f02e"}.icon-print:before{content:"\f02f"}.icon-camera:before{content:"\f030"}.icon-font:before{content:"\f031"}.icon-bold:before{content:"\f032"}.icon-italic:before{content:"\f033"}.icon-text-height:before{content:"\f034"}.icon-text-width:before{content:"\f035"}.icon-align-left:before{content:"\f036"}.icon-align-center:before{content:"\f037"}.icon-align-right:before{content:"\f038"}.icon-align-justify:before{content:"\f039"}.icon-list:before{content:"\f03a"}.icon-indent-left:before{content:"\f03b"}.icon-indent-right:before{content:"\f03c"}.icon-facetime-video:before{content:"\f03d"}.icon-picture:before{content:"\f03e"}.icon-pencil:before{content:"\f040"}.icon-map-marker:before{content:"\f041"}.icon-adjust:before{content:"\f042"}.icon-tint:before{content:"\f043"}.icon-edit:before{content:"\f044"}.icon-share:before{content:"\f045"}.icon-check:before{content:"\f046"}.icon-move:before{content:"\f047"}.icon-step-backward:before{content:"\f048"}.icon-fast-backward:before{content:"\f049"}.icon-backward:before{content:"\f04a"}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-forward:before{content:"\f04e"}.icon-fast-forward:before{content:"\f050"}.icon-step-forward:before{content:"\f051"}.icon-eject:before{content:"\f052"}.icon-chevron-left:before{content:"\f053"}.icon-chevron-right:before{content:"\f054"}.icon-plus-sign:before{content:"\f055"}.icon-minus-sign:before{content:"\f056"}.icon-remove-sign:before{content:"\f057"}.icon-ok-sign:before{content:"\f058"}.icon-question-sign:before{content:"\f059"}.icon-info-sign:before{content:"\f05a"}.icon-screenshot:before{content:"\f05b"}.icon-remove-circle:before{content:"\f05c"}.icon-ok-circle:before{content:"\f05d"}.icon-ban-circle:before{content:"\f05e"}.icon-arrow-left:before{content:"\f060"}.icon-arrow-right:before{content:"\f061"}.icon-arrow-up:before{content:"\f062"}.icon-arrow-down:before{content:"\f063"}.icon-share-alt:before{content:"\f064"}.icon-resize-full:before{content:"\f065"}.icon-resize-small:before{content:"\f066"}.icon-plus:before{content:"\f067"}.icon-minus:before{content:"\f068"}.icon-asterisk:before{content:"\f069"}.icon-exclamation-sign:before{content:"\f06a"}.icon-gift:before{content:"\f06b"}.icon-leaf:before{content:"\f06c"}.icon-fire:before{content:"\f06d"}.icon-eye-open:before{content:"\f06e"}.icon-eye-close:before{content:"\f070"}.icon-warning-sign:before{content:"\f071"}.icon-plane:before{content:"\f072"}.icon-calendar:before{content:"\f073"}.icon-random:before{content:"\f074"}.icon-comment:before{content:"\f075"}.icon-magnet:before{content:"\f076"}.icon-chevron-up:before{content:"\f077"}.icon-chevron-down:before{content:"\f078"}.icon-retweet:before{content:"\f079"}.icon-shopping-cart:before{content:"\f07a"}.icon-folder-close:before{content:"\f07b"}.icon-folder-open:before{content:"\f07c"}.icon-resize-vertical:before{content:"\f07d"}.icon-resize-horizontal:before{content:"\f07e"}.icon-bar-chart:before{content:"\f080"}.icon-twitter-sign:before{content:"\f081"}.icon-facebook-sign:before{content:"\f082"}.icon-camera-retro:before{content:"\f083"}.icon-key:before{content:"\f084"}.icon-cogs:before{content:"\f085"}.icon-comments:before{content:"\f086"}.icon-thumbs-up:before{content:"\f087"}.icon-thumbs-down:before{content:"\f088"}.icon-star-half:before{content:"\f089"}.icon-heart-empty:before{content:"\f08a"}.icon-signout:before{content:"\f08b"}.icon-linkedin-sign:before{content:"\f08c"}.icon-pushpin:before{content:"\f08d"}.icon-external-link:before{content:"\f08e"}.icon-signin:before{content:"\f090"}.icon-trophy:before{content:"\f091"}.icon-github-sign:before{content:"\f092"}.icon-upload-alt:before{content:"\f093"}.icon-lemon:before{content:"\f094"}.icon-phone:before{content:"\f095"}.icon-check-empty:before{content:"\f096"}.icon-bookmark-empty:before{content:"\f097"}.icon-phone-sign:before{content:"\f098"}.icon-twitter:before{content:"\f099"}.icon-facebook:before{content:"\f09a"}.icon-github:before{content:"\f09b"}.icon-unlock:before{content:"\f09c"}.icon-credit-card:before{content:"\f09d"}.icon-rss:before{content:"\f09e"}.icon-hdd:before{content:"\f0a0"}.icon-bullhorn:before{content:"\f0a1"}.icon-bell:before{content:"\f0a2"}.icon-certificate:before{content:"\f0a3"}.icon-hand-right:before{content:"\f0a4"}.icon-hand-left:before{content:"\f0a5"}.icon-hand-up:before{content:"\f0a6"}.icon-hand-down:before{content:"\f0a7"}.icon-circle-arrow-left:before{content:"\f0a8"}.icon-circle-arrow-right:before{content:"\f0a9"}.icon-circle-arrow-up:before{content:"\f0aa"}.icon-circle-arrow-down:before{content:"\f0ab"}.icon-globe:before{content:"\f0ac"}.icon-wrench:before{content:"\f0ad"}.icon-tasks:before{content:"\f0ae"}.icon-filter:before{content:"\f0b0"}.icon-briefcase:before{content:"\f0b1"}.icon-fullscreen:before{content:"\f0b2"}.icon-group:before{content:"\f0c0"}.icon-link:before{content:"\f0c1"}.icon-cloud:before{content:"\f0c2"}.icon-beaker:before{content:"\f0c3"}.icon-cut:before{content:"\f0c4"}.icon-copy:before{content:"\f0c5"}.icon-paper-clip:before{content:"\f0c6"}.icon-save:before{content:"\f0c7"}.icon-sign-blank:before{content:"\f0c8"}.icon-reorder:before{content:"\f0c9"}.icon-list-ul:before{content:"\f0ca"}.icon-list-ol:before{content:"\f0cb"}.icon-strikethrough:before{content:"\f0cc"}.icon-underline:before{content:"\f0cd"}.icon-table:before{content:"\f0ce"}.icon-magic:before{content:"\f0d0"}.icon-truck:before{content:"\f0d1"}.icon-pinterest:before{content:"\f0d2"}.icon-pinterest-sign:before{content:"\f0d3"}.icon-google-plus-sign:before{content:"\f0d4"}.icon-google-plus:before{content:"\f0d5"}.icon-money:before{content:"\f0d6"}.icon-caret-down:before{content:"\f0d7"}.icon-caret-up:before{content:"\f0d8"}.icon-caret-left:before{content:"\f0d9"}.icon-caret-right:before{content:"\f0da"}.icon-columns:before{content:"\f0db"}.icon-sort:before{content:"\f0dc"}.icon-sort-down:before{content:"\f0dd"}.icon-sort-up:before{content:"\f0de"}.icon-envelope-alt:before{content:"\f0e0"}.icon-linkedin:before{content:"\f0e1"}.icon-undo:before{content:"\f0e2"}.icon-legal:before{content:"\f0e3"}.icon-dashboard:before{content:"\f0e4"}.icon-comment-alt:before{content:"\f0e5"}.icon-comments-alt:before{content:"\f0e6"}.icon-bolt:before{content:"\f0e7"}.icon-sitemap:before{content:"\f0e8"}.icon-umbrella:before{content:"\f0e9"}.icon-paste:before{content:"\f0ea"}.icon-lightbulb:before{content:"\f0eb"}.icon-exchange:before{content:"\f0ec"}.icon-cloud-download:before{content:"\f0ed"}.icon-cloud-upload:before{content:"\f0ee"}.icon-user-md:before{content:"\f0f0"}.icon-stethoscope:before{content:"\f0f1"}.icon-suitcase:before{content:"\f0f2"}.icon-bell-alt:before{content:"\f0f3"}.icon-coffee:before{content:"\f0f4"}.icon-food:before{content:"\f0f5"}.icon-file-alt:before{content:"\f0f6"}.icon-building:before{content:"\f0f7"}.icon-hospital:before{content:"\f0f8"}.icon-ambulance:before{content:"\f0f9"}.icon-medkit:before{content:"\f0fa"}.icon-fighter-jet:before{content:"\f0fb"}.icon-beer:before{content:"\f0fc"}.icon-h-sign:before{content:"\f0fd"}.icon-plus-sign-alt:before{content:"\f0fe"}.icon-double-angle-left:before{content:"\f100"}.icon-double-angle-right:before{content:"\f101"}.icon-double-angle-up:before{content:"\f102"}.icon-double-angle-down:before{content:"\f103"}.icon-angle-left:before{content:"\f104"}.icon-angle-right:before{content:"\f105"}.icon-angle-up:before{content:"\f106"}.icon-angle-down:before{content:"\f107"}.icon-desktop:before{content:"\f108"}.icon-laptop:before{content:"\f109"}.icon-tablet:before{content:"\f10a"}.icon-mobile-phone:before{content:"\f10b"}.icon-circle-blank:before{content:"\f10c"}.icon-quote-left:before{content:"\f10d"}.icon-quote-right:before{content:"\f10e"}.icon-spinner:before{content:"\f110"}.icon-circle:before{content:"\f111"}.icon-reply:before{content:"\f112"}.icon-github-alt:before{content:"\f113"}.icon-folder-close-alt:before{content:"\f114"}.icon-folder-open-alt:before{content:"\f115"}
|
@@ -1,29 +0,0 @@
|
|
1
|
-
[HTML5 Boilerplate homepage](https://html5boilerplate.com)
|
2
|
-
|
3
|
-
## Getting started
|
4
|
-
|
5
|
-
* [Usage](usage.md) — Overview of the project contents.
|
6
|
-
* [FAQ](faq.md) — Frequently asked questions along with their answers.
|
7
|
-
|
8
|
-
## HTML5 Boilerplate core
|
9
|
-
|
10
|
-
* [HTML](html.md) — Guide to the default HTML.
|
11
|
-
* [CSS](css.md) — Guide to the default CSS.
|
12
|
-
* [JavaScript](js.md) — Guide to the default JavaScript.
|
13
|
-
* [Everything else](misc.md).
|
14
|
-
|
15
|
-
## Development
|
16
|
-
|
17
|
-
* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further
|
18
|
-
with the boilerplate.
|
19
|
-
|
20
|
-
## Related projects
|
21
|
-
|
22
|
-
The [H5BP organization](https://github.com/h5bp) maintains several projects
|
23
|
-
that complement HTML5 Boilerplate, projects that can help you improve different
|
24
|
-
aspects of your website/web app (e.g.: the performance, security, etc.).
|
25
|
-
|
26
|
-
* [Server Configs](https://github.com/h5bp/server-configs) — Fast and
|
27
|
-
smart configurations for web servers such as Apache and Nginx.
|
28
|
-
* [Ant Build Script](https://github.com/h5bp/ant-build-script) — Apache
|
29
|
-
Ant based build script.
|
@@ -1,162 +0,0 @@
|
|
1
|
-
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
|
2
|
-
table of contents](TOC.md)
|
3
|
-
|
4
|
-
# The CSS
|
5
|
-
|
6
|
-
HTML5 Boilerplate's CSS includes:
|
7
|
-
|
8
|
-
* [Normalize.css](#normalizecss)
|
9
|
-
* [Useful defaults](#useful-defaults)
|
10
|
-
* [Common helpers](#common-helpers)
|
11
|
-
* [Placeholder media queries](#media-queries)
|
12
|
-
* [Print styles](#print-styles)
|
13
|
-
|
14
|
-
This starting CSS does not rely on the presence of
|
15
|
-
[conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/),
|
16
|
-
[conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/),
|
17
|
-
or [Modernizr](http://modernizr.com/), and it is ready to use no matter what
|
18
|
-
your development preferences happen to be.
|
19
|
-
|
20
|
-
|
21
|
-
## Normalize.css
|
22
|
-
|
23
|
-
In order to make browsers render all elements more consistently and in line
|
24
|
-
with modern standards, we include
|
25
|
-
[Normalize.css](https://necolas.github.io/normalize.css/) — a modern, HTML5-ready
|
26
|
-
alternative to CSS resets.
|
27
|
-
|
28
|
-
As opposed to CSS resets, Normalize.css:
|
29
|
-
|
30
|
-
* targets only the styles that need normalizing
|
31
|
-
* preserves useful browser defaults rather than erasing them
|
32
|
-
* corrects bugs and common browser inconsistencies
|
33
|
-
* improves usability with subtle improvements
|
34
|
-
* doesn't clutter the debugging tools
|
35
|
-
* has better documentation
|
36
|
-
|
37
|
-
For more information about Normalize.css, please refer to its [project
|
38
|
-
page](https://necolas.github.com/normalize.css/), as well as this
|
39
|
-
[blog post](http://nicolasgallagher.com/about-normalize-css/).
|
40
|
-
|
41
|
-
|
42
|
-
## Useful defaults
|
43
|
-
|
44
|
-
Several base styles are included that build upon `Normalize.css`. These
|
45
|
-
styles:
|
46
|
-
|
47
|
-
* provide basic typography settings that improve text readability
|
48
|
-
* protect against unwanted `text-shadow` during text highlighting
|
49
|
-
* tweak the default alignment of some elements (e.g.: `img`, `video`,
|
50
|
-
`fieldset`, `textarea`)
|
51
|
-
* style the prompt that is displayed to users using an outdated browser
|
52
|
-
|
53
|
-
You are free and even encouraged to modify or add to these base styles as your
|
54
|
-
project requires.
|
55
|
-
|
56
|
-
|
57
|
-
## Common helpers
|
58
|
-
|
59
|
-
Along with the base styles, we also provide some commonly used helper classes.
|
60
|
-
|
61
|
-
#### `.hidden`
|
62
|
-
|
63
|
-
The `hidden` class can be added to any element that you want to hide visually
|
64
|
-
and from screen readers. It could be an element that will be populated and
|
65
|
-
displayed later, or an element you will hide with JavaScript.
|
66
|
-
|
67
|
-
#### `.visuallyhidden`
|
68
|
-
|
69
|
-
The `visuallyhidden` class can be added to any element that you want to hide
|
70
|
-
visually, while still have its content accessible to screen readers.
|
71
|
-
|
72
|
-
See also:
|
73
|
-
|
74
|
-
* [CSS in Action: Invisible Content Just for Screen Reader
|
75
|
-
Users](http://www.webaim.org/techniques/css/invisiblecontent/)
|
76
|
-
* [Hiding content for
|
77
|
-
accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility)
|
78
|
-
* [HTML5 Boilerplate - Issue #194](https://github.com/h5bp/html5-boilerplate/issues/194/).
|
79
|
-
|
80
|
-
#### `.invisible`
|
81
|
-
|
82
|
-
The `invisible` class can be added to any element that you want to hide
|
83
|
-
visually and from screen readers, but without affecting the layout.
|
84
|
-
|
85
|
-
As opposed to the `hidden` class that effectively removes the element from the
|
86
|
-
layout, the `invisible` class will simply make the element invisible while
|
87
|
-
keeping it in the flow and not affecting the positioning of the surrounding
|
88
|
-
content.
|
89
|
-
|
90
|
-
__N.B.__ Try to stay away from, and don't use the classes specified above for
|
91
|
-
[keyword stuffing](https://en.wikipedia.org/wiki/Keyword_stuffing) as you will
|
92
|
-
harm your site's ranking!
|
93
|
-
|
94
|
-
#### `.clearfix`
|
95
|
-
|
96
|
-
The `clearfix` class can be added to any element to ensure that it always fully
|
97
|
-
contains its floated children.
|
98
|
-
|
99
|
-
Over the years there have been many variants of the clearfix hack, but currently,
|
100
|
-
we use the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
|
101
|
-
|
102
|
-
|
103
|
-
## Media Queries
|
104
|
-
|
105
|
-
HTML5 Boilerplate makes it easy for you to get started with a
|
106
|
-
[_mobile first_](http://www.lukew.com/presos/preso.asp?26) and [_responsive web
|
107
|
-
design_](http://www.alistapart.com/articles/responsive-web-design/) approach to
|
108
|
-
development. But it's worth remembering that there are [no silver
|
109
|
-
bullets](http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/).
|
110
|
-
|
111
|
-
We include placeholder media queries to help you build up your mobile styles for
|
112
|
-
wider viewports and high-resolution displays. It's recommended that you adapt
|
113
|
-
these media queries based on the content of your site rather than mirroring the
|
114
|
-
fixed dimensions of specific devices.
|
115
|
-
|
116
|
-
If you do not want to take the _mobile first_ approach, you can simply edit or
|
117
|
-
remove these placeholder media queries. One possibility would be to work from
|
118
|
-
wide viewports down, and use `max-width` media queries instead (e.g.:
|
119
|
-
`@media only screen and (max-width: 480px)`).
|
120
|
-
|
121
|
-
For more features that can help you in your mobile web development, take a look
|
122
|
-
into our [Mobile Boilerplate](https://github.com/h5bp/mobile-boilerplate).
|
123
|
-
|
124
|
-
|
125
|
-
## Print styles
|
126
|
-
|
127
|
-
Lastly, we provide some useful print styles that will optimize the printing
|
128
|
-
process, as well as make the printed pages easier to read.
|
129
|
-
|
130
|
-
At printing time, these styles will:
|
131
|
-
|
132
|
-
* strip all background colors, change the font color to black, and remove the
|
133
|
-
`text-shadow` — done in order to [help save printer ink and speed up the
|
134
|
-
printing process](http://www.sanbeiji.com/archives/953)
|
135
|
-
* underline and expand links to include the URL — done in order to allow users
|
136
|
-
to know where to refer to<br>
|
137
|
-
(exceptions to this are: the links that are
|
138
|
-
[fragment identifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href),
|
139
|
-
or use the
|
140
|
-
[`javascript:` pseudo protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void#JavaScript_URIs))
|
141
|
-
* expand abbreviations to include the full description — done in order to allow
|
142
|
-
users to know what the abbreviations stands for
|
143
|
-
* provide instructions on how browsers should break the content into pages and
|
144
|
-
on [orphans/widows](https://en.wikipedia.org/wiki/Widows_and_orphans), namely,
|
145
|
-
we instruct
|
146
|
-
[supporting browsers](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules)
|
147
|
-
that they should:
|
148
|
-
|
149
|
-
* ensure the table header (`<thead>`) is [printed on each page spanned by the
|
150
|
-
table](http://css-discuss.incutio.com/wiki/Printing_Tables)
|
151
|
-
* prevent block quotations, preformatted text, images and table rows from
|
152
|
-
being split onto two different pages
|
153
|
-
* ensure that headings never appear on a different page than the text they
|
154
|
-
are associated with
|
155
|
-
* ensure that
|
156
|
-
[orphans and widows](https://en.wikipedia.org/wiki/Widows_and_orphans) do
|
157
|
-
[not appear on printed pages](https://css-tricks.com/almanac/properties/o/orphans/)
|
158
|
-
|
159
|
-
The print styles are included along with the other `css` to [avoid the
|
160
|
-
additional HTTP request](http://www.phpied.com/delay-loading-your-print-css/).
|
161
|
-
Also, they should always be included last, so that the other styles can be
|
162
|
-
overwritten.
|