-
29 | {{> menu.html }}
30 |
├── inst └── template │ ├── js │ ├── main.js │ ├── plugins.js │ └── vendor │ │ ├── modernizr-2.8.3.min.js │ │ └── jquery-1.12.0.min.js │ ├── tile.png │ ├── favicon.ico │ ├── tile-wide.png │ ├── robots.txt │ ├── apple-touch-icon.png │ ├── menu.html │ ├── humans.txt │ ├── browserconfig.xml │ ├── crossdomain.xml │ ├── body.html │ ├── LICENSE.txt │ ├── doc │ ├── TOC.md │ ├── js.md │ ├── faq.md │ ├── usage.md │ ├── css.md │ ├── misc.md │ ├── html.md │ └── extend.md │ ├── index.html │ ├── 404.html │ └── css │ ├── main.css │ └── normalize.css ├── .gitignore ├── NEWS.md ├── LICENSE ├── tests ├── testthat.R └── testthat │ ├── helper.R │ └── test.R ├── .Rbuildignore ├── NAMESPACE ├── R ├── partials.R ├── utils.R ├── mango.R ├── repo.R └── package.R ├── man ├── safe_whisker.Rd ├── get_repo_data.Rd ├── repo_group.Rd └── myghrepos.Rd ├── README.md ├── DESCRIPTION └── .travis.yml /inst/template/js/main.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | -------------------------------------------------------------------------------- /NEWS.md: -------------------------------------------------------------------------------- 1 | 2 | # 1.0.0 3 | 4 | First public release. 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | YEAR: 2016 2 | COPYRIGHT HOLDER: Mango Solutions 3 | -------------------------------------------------------------------------------- /tests/testthat.R: -------------------------------------------------------------------------------- 1 | library(testthat) 2 | library(myghrepos) 3 | 4 | test_check("myghrepos") 5 | -------------------------------------------------------------------------------- /inst/template/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MangoTheCat/myghrepos/master/inst/template/tile.png -------------------------------------------------------------------------------- /inst/template/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MangoTheCat/myghrepos/master/inst/template/favicon.ico -------------------------------------------------------------------------------- /inst/template/tile-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MangoTheCat/myghrepos/master/inst/template/tile-wide.png -------------------------------------------------------------------------------- /.Rbuildignore: -------------------------------------------------------------------------------- 1 | ^.*\.Rproj$ 2 | ^\.Rproj\.user$ 3 | ^Makefile$ 4 | ^README.Rmd$ 5 | ^.travis.yml$ 6 | ^appveyor.yml$ 7 | -------------------------------------------------------------------------------- /inst/template/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: 6 | -------------------------------------------------------------------------------- /inst/template/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MangoTheCat/myghrepos/master/inst/template/apple-touch-icon.png -------------------------------------------------------------------------------- /inst/template/menu.html: -------------------------------------------------------------------------------- 1 | 2 | {{# groups }}{{# contents }} 3 | 4 |
{{ description }}
10 | {{/ description}} 11 | 12 | {{# contents }} 13 | 14 | 22 | 23 | 24 | 25 |{{ description }}
30 |{{ description-file }}
31 |Last updated: {{ pushed_at }}.
32 | {{/ contents }} 33 | 34 | {{/ contents }} 35 | 36 | {{/ groups }} 37 | -------------------------------------------------------------------------------- /inst/template/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) HTML5 Boilerplate 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /inst/template/doc/TOC.md: -------------------------------------------------------------------------------- 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. 30 | -------------------------------------------------------------------------------- /inst/template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Sorry, but the page you were trying to view does not exist.
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /R/repo.R: -------------------------------------------------------------------------------- 1 | 2 | #' Get repository data for the specified organization and repo groups 3 | #' 4 | #' @param org Organization name. 5 | #' @inheritParams myghrepos 6 | #' 7 | #' @importFrom gh gh 8 | 9 | get_repo_data <- function(org, groups) { 10 | data <- lapply(groups, function(group) { 11 | list( 12 | name = group$name, 13 | contents = lapply(group$repos, function(x) { 14 | message("Getting repo ", x) 15 | list( 16 | package = x, 17 | contents = gh("/repos/:owner/:repo", owner = org, repo = x), 18 | "description-file" = get_desc_desc(org, x) 19 | ) 20 | }) 21 | ) 22 | }) 23 | 24 | preprocess_repo_data(data) 25 | } 26 | 27 | #' Define a group of repositories 28 | #' 29 | #' @param name Group name. 30 | #' @param description Group description. 31 | #' @param repos Character vector, repositories to include in the group. 32 | #' @return Repo group object. 33 | #' 34 | #' @export 35 | 36 | repo_group <- function(name, description = NULL, repos) { 37 | structure( 38 | list( 39 | name = name, 40 | description = description, 41 | repos = repos 42 | ), 43 | class = "repo_group" 44 | ) 45 | } 46 | 47 | #' @importFrom httr GET status_code content 48 | #' @importFrom desc description 49 | 50 | get_desc_desc <- function(org, repo) { 51 | url <- sprintf( 52 | "https://raw.githubusercontent.com/%s/%s/master/DESCRIPTION", 53 | org, 54 | repo 55 | ) 56 | response <- GET(url) 57 | if (status_code(response) >= 300) { 58 | message("No description, not an R package?", appendLF = FALSE) 59 | return(NULL) 60 | } 61 | 62 | tmp <- tempfile() 63 | on.exit(unlink(tmp), add = TRUE) 64 | cat(content(response), file = tmp) 65 | 66 | description $ new(tmp) $ get("Description") 67 | } 68 | 69 | preprocess_repo_data <- function(data) { 70 | for (group in seq_along(data)) { 71 | for (repo in seq_along(data[[group]]$contents)) { 72 | date <- data[[group]]$contents[[repo]]$contents$pushed_at 73 | data[[group]]$contents[[repo]]$contents$pushed_at <- pretty_date(date) 74 | } 75 | } 76 | 77 | data 78 | } 79 | -------------------------------------------------------------------------------- /inst/template/doc/faq.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # Frequently asked questions 5 | 6 | * [Why is the Google Analytics code at the bottom? Google recommends it be 7 | placed in the ``.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head) 8 | * [How can I integrate Bootstrap with HTML5 9 | Boilerplate?](#how-can-i-integrate-bootstrap-with-html5-boilerplate) 10 | * [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is 11 | released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released) 12 | * [Where can I get help with support 13 | questions?](#where-can-i-get-help-with-support-questions) 14 | 15 | -- 16 | 17 | 18 | ### Why is the Google Analytics code at the bottom? Google recommends it be placed in the ``. 19 | 20 | The main advantage of placing it in the `` is that you will track the 21 | user's `pageview` even if they leave the page before it has been fully loaded. 22 | However, having the code at the bottom of the page [helps improve 23 | performance](https://stevesouders.com/efws/inline-scripts-bottom.php). 24 | 25 | 26 | ### How can I integrate [Bootstrap](http://getbootstrap.com/) with HTML5 Boilerplate? 27 | 28 | One simple way is to use [Initializr](http://www.initializr.com/) and create a 29 | custom build that includes both HTML5 Boilerplate and 30 | [Bootstrap](http://getbootstrap.com/). 31 | 32 | Read more about how [HTML5 Boilerplate and Bootstrap complement each 33 | other](https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher). 34 | 35 | 36 | ### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released? 37 | 38 | No, same as you don't normally replace the foundation of a house once it 39 | was built. However, there is nothing stopping you from trying to work in the 40 | latest changes, but you'll have to assess the costs/benefits of doing so. 41 | 42 | 43 | ### Where can I get help with support questions? 44 | 45 | Please ask for help on 46 | [StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate). 47 | -------------------------------------------------------------------------------- /R/package.R: -------------------------------------------------------------------------------- 1 | 2 | #' Create a Web Page About Your GitHub Repositories 3 | #' 4 | #' This is a static website generator, specialized on creating a single 5 | #' page web site about GitHub repositories, for an account or organization. 6 | #' 7 | #' @param org GitHub organization or user name. 8 | #' @param target Target directory for the generated file(s). 9 | #' @param groups Repo groups, see \code{\link{repo_group}}. 10 | #' @param data The repo data, if you already have it, as 11 | #' returned by \code{\link{get_repo_data}}. 12 | #' 13 | #' @export 14 | #' @importFrom stats setNames 15 | 16 | myghrepos <- function(org, target = tempfile(), groups = NULL, data = NULL) { 17 | 18 | org <- as_string(org) 19 | target <- as_string(target) 20 | 21 | if (!dir.exists(target)) dir.create(target) 22 | 23 | repo_data <- data %||% get_repo_data(org, groups) 24 | 25 | lines <- readLines(myfile("template/index.html")) 26 | partials <- extract_partials(lines) 27 | partial_files <- myfile("template", partials) 28 | if (length(partial_files) < length(partials)) { 29 | stop("Some partials not found") 30 | } 31 | 32 | plines <- setNames(lapply(partial_files, readLines), partials) 33 | wlines <- lapply( 34 | plines, 35 | safe_whisker, 36 | data = list(groups = repo_data, org = org) 37 | ) 38 | 39 | write_results( 40 | safe_whisker(lines, partials = wlines), 41 | target 42 | ) 43 | } 44 | 45 | 46 | write_results <- function(page, target) { 47 | output_file <- file.path(target, "index.html") 48 | message("Writing ", output_file, " ... ", appendLF = FALSE) 49 | writeLines(page, con = output_file) 50 | message("done.") 51 | } 52 | 53 | #' Workaround for whisker mishandling corner cases 54 | #' 55 | #' @param template Template. 56 | #' @param ... Extra arguments to \code{whisker.render}. 57 | #' 58 | #' @importFrom whisker whisker.render 59 | #' @importFrom utils tail 60 | #' @keywords internal 61 | 62 | safe_whisker <- function(template, ...) { 63 | first_non_empty <- which(template != "") 64 | 65 | template <- if (!length(template)) { 66 | "" 67 | 68 | } else if (!length(first_non_empty)) { 69 | paste(rep("\n", length(template)), collapse = "") 70 | 71 | } else if (first_non_empty[1] != 1) { 72 | c( 73 | paste(rep("\n", first_non_empty[1] - 1), collapse = ""), 74 | tail(template, -(first_non_empty[1] - 1)) 75 | ) 76 | 77 | } else { 78 | template 79 | } 80 | 81 | whisker.render(template, ...) 82 | } 83 | -------------------------------------------------------------------------------- /inst/template/doc/usage.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # Usage 5 | 6 | Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app 7 | usually involves the following: 8 | 9 | 1. Set up the basic structure of the site. 10 | 2. Add some content, style, and functionality. 11 | 3. Run your site locally to see how it looks. 12 | 4. (Optionally run a build script to automate the optimization of your site - 13 | e.g. [ant build script](https://github.com/h5bp/ant-build-script)) 14 | 5. Deploy your site. 15 | 16 | 17 | ## Basic structure 18 | 19 | A basic HTML5 Boilerplate site initially looks something like this: 20 | 21 | ``` 22 | . 23 | ├── css 24 | │ ├── main.css 25 | │ └── normalize.css 26 | ├── doc 27 | ├── img 28 | ├── js 29 | │ ├── main.js 30 | │ ├── plugins.js 31 | │ └── vendor 32 | │ ├── jquery.min.js 33 | │ └── modernizr.min.js 34 | ├── .editorconfig 35 | ├── .htaccess 36 | ├── 404.html 37 | ├── apple-touch-icon.png 38 | ├── browserconfig.xml 39 | ├── index.html 40 | ├── humans.txt 41 | ├── robots.txt 42 | ├── crossdomain.xml 43 | ├── favicon.ico 44 | ├── tile-wide.png 45 | └── tile.png 46 | ``` 47 | 48 | What follows is a general overview of each major part and how to use them. 49 | 50 | ### css 51 | 52 | This directory should contain all your project's CSS files. It includes some 53 | initial CSS to help get you started from a solid foundation. [About the 54 | CSS](css.md). 55 | 56 | ### doc 57 | 58 | This directory contains all the HTML5 Boilerplate documentation. You can use it 59 | as the location and basis for your own project's documentation. 60 | 61 | ### js 62 | 63 | This directory should contain all your project's JS files. Libraries, plugins, 64 | and custom code can all be included here. It includes some initial JS to help 65 | get you started. [About the JavaScript](js.md). 66 | 67 | ### .htaccess 68 | 69 | The default web server configs are for Apache. For more information, please 70 | refer to the [Apache Server Configs 71 | repository](https://github.com/h5bp/server-configs-apache). 72 | 73 | Host your site on a server other than Apache? You're likely to find the 74 | corresponding server configs project listed in our [Server Configs 75 | ](https://github.com/h5bp/server-configs/blob/master/README.md) repository. 76 | 77 | ### 404.html 78 | 79 | A helpful custom 404 to get you started. 80 | 81 | ### browserconfig.xml 82 | 83 | This file contains all settings regarding custom tiles for IE11. 84 | 85 | For more info on this topic, please refer to 86 | [MSDN](https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx). 87 | 88 | ### .editorconfig 89 | 90 | The `.editorconfig` file is provided in order to encourage and help you and 91 | your team to maintain consistent coding styles between different 92 | editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig). 93 | 94 | ### index.html 95 | 96 | This is the default HTML skeleton that should form the basis of all pages on 97 | your site. If you are using a server-side templating framework, then you will 98 | need to integrate this starting HTML with your setup. 99 | 100 | Make sure that you update the URLs for the referenced CSS and JavaScript if you 101 | modify the directory structure at all. 102 | 103 | If you are using Google Universal Analytics, make sure that you edit the 104 | corresponding snippet at the bottom to include your analytics ID. 105 | 106 | ### humans.txt 107 | 108 | Edit this file to include the team that worked on your site/app, and the 109 | technology powering it. 110 | 111 | ### robots.txt 112 | 113 | Edit this file to include any pages you need hidden from search engines. 114 | 115 | ### crossdomain.xml 116 | 117 | A template for working with cross-domain requests. [About 118 | crossdomain.xml](misc.md#crossdomainxml). 119 | 120 | ### Icons 121 | 122 | Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple 123 | Touch Icon with your own. 124 | 125 | If you want to use different Apple Touch Icons for different resolutions please 126 | refer to the [according documentation](extend.md#apple-touch-icons). 127 | 128 | You might want to check out Hans' handy [HTML5 Boilerplate Favicon and Apple 129 | Touch Icon 130 | PSD-Template](https://drublic.de/blog/html5-boilerplate-favicons-psd-template/). 131 | -------------------------------------------------------------------------------- /inst/template/css/main.css: -------------------------------------------------------------------------------- 1 | /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ 2 | 3 | /* 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html { 14 | color: #222; 15 | font-size: 1em; 16 | line-height: 1.4; 17 | } 18 | 19 | /* 20 | * Remove text-shadow in selection highlight: 21 | * https://twitter.com/miketaylr/status/12228805301 22 | * 23 | * These selection rule sets have to be separate. 24 | * Customize the background color to match your design. 25 | */ 26 | 27 | ::-moz-selection { 28 | background: #b3d4fc; 29 | text-shadow: none; 30 | } 31 | 32 | ::selection { 33 | background: #b3d4fc; 34 | text-shadow: none; 35 | } 36 | 37 | /* 38 | * A better looking default horizontal rule 39 | */ 40 | 41 | hr { 42 | display: block; 43 | height: 1px; 44 | border: 0; 45 | border-top: 1px solid #ccc; 46 | margin: 1em 0; 47 | padding: 0; 48 | } 49 | 50 | /* 51 | * Remove the gap between audio, canvas, iframes, 52 | * images, videos and the bottom of their containers: 53 | * https://github.com/h5bp/html5-boilerplate/issues/440 54 | */ 55 | 56 | audio, 57 | canvas, 58 | iframe, 59 | img, 60 | svg, 61 | video { 62 | vertical-align: middle; 63 | } 64 | 65 | /* 66 | * Remove default fieldset styles. 67 | */ 68 | 69 | fieldset { 70 | border: 0; 71 | margin: 0; 72 | padding: 0; 73 | } 74 | 75 | /* 76 | * Allow only vertical resizing of textareas. 77 | */ 78 | 79 | textarea { 80 | resize: vertical; 81 | } 82 | 83 | /* ========================================================================== 84 | Browser Upgrade Prompt 85 | ========================================================================== */ 86 | 87 | .browserupgrade { 88 | margin: 0.2em 0; 89 | background: #ccc; 90 | color: #000; 91 | padding: 0.2em 0; 92 | } 93 | 94 | /* ========================================================================== 95 | Author's custom styles 96 | ========================================================================== */ 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | /* ========================================================================== 115 | Helper classes 116 | ========================================================================== */ 117 | 118 | /* 119 | * Hide visually and from screen readers 120 | */ 121 | 122 | .hidden { 123 | display: none !important; 124 | } 125 | 126 | /* 127 | * Hide only visually, but have it available for screen readers: 128 | * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 129 | */ 130 | 131 | .visuallyhidden { 132 | border: 0; 133 | clip: rect(0 0 0 0); 134 | height: 1px; 135 | margin: -1px; 136 | overflow: hidden; 137 | padding: 0; 138 | position: absolute; 139 | width: 1px; 140 | } 141 | 142 | /* 143 | * Extends the .visuallyhidden class to allow the element 144 | * to be focusable when navigated to via the keyboard: 145 | * https://www.drupal.org/node/897638 146 | */ 147 | 148 | .visuallyhidden.focusable:active, 149 | .visuallyhidden.focusable:focus { 150 | clip: auto; 151 | height: auto; 152 | margin: 0; 153 | overflow: visible; 154 | position: static; 155 | width: auto; 156 | } 157 | 158 | /* 159 | * Hide visually and from screen readers, but maintain layout 160 | */ 161 | 162 | .invisible { 163 | visibility: hidden; 164 | } 165 | 166 | /* 167 | * Clearfix: contain floats 168 | * 169 | * For modern browsers 170 | * 1. The space content is one way to avoid an Opera bug when the 171 | * `contenteditable` attribute is included anywhere else in the document. 172 | * Otherwise it causes space to appear at the top and bottom of elements 173 | * that receive the `clearfix` class. 174 | * 2. The use of `table` rather than `block` is only necessary if using 175 | * `:before` to contain the top-margins of child elements. 176 | */ 177 | 178 | .clearfix:before, 179 | .clearfix:after { 180 | content: " "; /* 1 */ 181 | display: table; /* 2 */ 182 | } 183 | 184 | .clearfix:after { 185 | clear: both; 186 | } 187 | 188 | /* ========================================================================== 189 | EXAMPLE Media Queries for Responsive Design. 190 | These examples override the primary ('mobile first') styles. 191 | Modify as content requires. 192 | ========================================================================== */ 193 | 194 | @media only screen and (min-width: 35em) { 195 | /* Style adjustments for viewports that meet the condition */ 196 | } 197 | 198 | @media print, 199 | (-webkit-min-device-pixel-ratio: 1.25), 200 | (min-resolution: 1.25dppx), 201 | (min-resolution: 120dpi) { 202 | /* Style adjustments for high resolution devices */ 203 | } 204 | 205 | /* ========================================================================== 206 | Print styles. 207 | Inlined to avoid the additional HTTP request: 208 | http://www.phpied.com/delay-loading-your-print-css/ 209 | ========================================================================== */ 210 | 211 | @media print { 212 | *, 213 | *:before, 214 | *:after, 215 | *:first-letter, 216 | *:first-line { 217 | background: transparent !important; 218 | color: #000 !important; /* Black prints faster: 219 | http://www.sanbeiji.com/archives/953 */ 220 | box-shadow: none !important; 221 | text-shadow: none !important; 222 | } 223 | 224 | a, 225 | a:visited { 226 | text-decoration: underline; 227 | } 228 | 229 | a[href]:after { 230 | content: " (" attr(href) ")"; 231 | } 232 | 233 | abbr[title]:after { 234 | content: " (" attr(title) ")"; 235 | } 236 | 237 | /* 238 | * Don't show links that are fragment identifiers, 239 | * or use the `javascript:` pseudo protocol 240 | */ 241 | 242 | a[href^="#"]:after, 243 | a[href^="javascript:"]:after { 244 | content: ""; 245 | } 246 | 247 | pre, 248 | blockquote { 249 | border: 1px solid #999; 250 | page-break-inside: avoid; 251 | } 252 | 253 | /* 254 | * Printing Tables: 255 | * http://css-discuss.incutio.com/wiki/Printing_Tables 256 | */ 257 | 258 | thead { 259 | display: table-header-group; 260 | } 261 | 262 | tr, 263 | img { 264 | page-break-inside: avoid; 265 | } 266 | 267 | img { 268 | max-width: 100% !important; 269 | } 270 | 271 | p, 272 | h2, 273 | h3 { 274 | orphans: 3; 275 | widows: 3; 276 | } 277 | 278 | h2, 279 | h3 { 280 | page-break-after: avoid; 281 | } 282 | } 283 | -------------------------------------------------------------------------------- /inst/template/doc/css.md: -------------------------------------------------------------------------------- 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