reportir 0.2.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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.
|