├── .gitignore ├── .ruby-gemset ├── .ruby-version ├── 404.md ├── CNAME ├── Gemfile ├── Gemfile.lock ├── README.md ├── _config.yml ├── _includes ├── google-analytics.html ├── introduction.md └── techfar-online.md ├── _layouts ├── 404.html └── techfar.html ├── _plays ├── 01.md ├── 02.md ├── 03.md ├── 04.md ├── 05.md ├── 06.md ├── 07.md ├── 08.md ├── 09.md ├── 10.md ├── 11.md ├── 12.md └── 13.md ├── assets ├── TechFAR Handbook 8 7 14.docx ├── TechFAR Handbook 8 7 14.pdf ├── TechFAR Handbook_2014-08-07.docx ├── TechFAR Handbook_2014-08-07.pdf ├── _sass │ ├── bourbon │ │ ├── _bourbon-deprecated-upcoming.scss │ │ ├── _bourbon.scss │ │ ├── addons │ │ │ ├── _button.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _directional-values.scss │ │ │ ├── _ellipsis.scss │ │ │ ├── _font-family.scss │ │ │ ├── _hide-text.scss │ │ │ ├── _html5-input-types.scss │ │ │ ├── _position.scss │ │ │ ├── _prefixer.scss │ │ │ ├── _retina-image.scss │ │ │ ├── _size.scss │ │ │ ├── _timing-functions.scss │ │ │ ├── _triangle.scss │ │ │ └── _word-wrap.scss │ │ ├── css3 │ │ │ ├── _animation.scss │ │ │ ├── _appearance.scss │ │ │ ├── _backface-visibility.scss │ │ │ ├── _background-image.scss │ │ │ ├── _background.scss │ │ │ ├── _border-image.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _box-sizing.scss │ │ │ ├── _calc.scss │ │ │ ├── _columns.scss │ │ │ ├── _filter.scss │ │ │ ├── _flex-box.scss │ │ │ ├── _font-face.scss │ │ │ ├── _font-feature-settings.scss │ │ │ ├── _hidpi-media-query.scss │ │ │ ├── _hyphens.scss │ │ │ ├── _image-rendering.scss │ │ │ ├── _keyframes.scss │ │ │ ├── _linear-gradient.scss │ │ │ ├── _perspective.scss │ │ │ ├── _placeholder.scss │ │ │ ├── _radial-gradient.scss │ │ │ ├── _transform.scss │ │ │ ├── _transition.scss │ │ │ └── _user-select.scss │ │ ├── functions │ │ │ ├── _assign.scss │ │ │ ├── _color-lightness.scss │ │ │ ├── _flex-grid.scss │ │ │ ├── _golden-ratio.scss │ │ │ ├── _grid-width.scss │ │ │ ├── _modular-scale.scss │ │ │ ├── _px-to-em.scss │ │ │ ├── _px-to-rem.scss │ │ │ ├── _strip-units.scss │ │ │ ├── _tint-shade.scss │ │ │ ├── _transition-property-name.scss │ │ │ └── _unpack.scss │ │ ├── helpers │ │ │ ├── _convert-units.scss │ │ │ ├── _gradient-positions-parser.scss │ │ │ ├── _is-num.scss │ │ │ ├── _linear-angle-parser.scss │ │ │ ├── _linear-gradient-parser.scss │ │ │ ├── _linear-positions-parser.scss │ │ │ ├── _linear-side-corner-parser.scss │ │ │ ├── _radial-arg-parser.scss │ │ │ ├── _radial-gradient-parser.scss │ │ │ ├── _radial-positions-parser.scss │ │ │ ├── _render-gradients.scss │ │ │ ├── _shape-size-stripper.scss │ │ │ └── _str-to-num.scss │ │ └── settings │ │ │ ├── _prefixer.scss │ │ │ └── _px-to-em.scss │ ├── neat │ │ ├── _neat-helpers.scss │ │ ├── _neat.scss │ │ ├── functions │ │ │ ├── _new-breakpoint.scss │ │ │ └── _private.scss │ │ ├── grid │ │ │ ├── _fill-parent.scss │ │ │ ├── _grid.scss │ │ │ ├── _media.scss │ │ │ ├── _omega.scss │ │ │ ├── _outer-container.scss │ │ │ ├── _pad.scss │ │ │ ├── _private.scss │ │ │ ├── _reset.scss │ │ │ ├── _row.scss │ │ │ ├── _shift.scss │ │ │ ├── _span-columns.scss │ │ │ ├── _to-deprecate.scss │ │ │ └── _visual-grid.scss │ │ └── settings │ │ │ ├── _grid.scss │ │ │ └── _visual-grid.scss │ └── styles.scss ├── css │ └── styles.scss ├── images │ ├── bullet-circle.svg │ ├── bullet-circle1.svg │ ├── bullet-sq.svg │ ├── bullet-sq1.svg │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── menu_icon.svg │ ├── techfar1.jpg │ ├── techfar1.png │ ├── techfar2.png │ ├── techfar3.png │ ├── techfar4.png │ ├── techfar5.png │ └── usds-logo-seal.png └── js │ ├── federated-analytics.all.min.js │ ├── jquery-1.11.1.min.js │ ├── scrollspy.js │ └── site.js ├── index.html ├── pages ├── techFAR_upcase.md └── techfar.md └── plays.json /.gitignore: -------------------------------------------------------------------------------- 1 | _site/* 2 | .DS_Store 3 | notes/* 4 | .sass-cache/* 5 | .bundle 6 | -------------------------------------------------------------------------------- /.ruby-gemset: -------------------------------------------------------------------------------- 1 | playbook -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.6.5 2 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Page Not Found' 3 | layout: "404" 4 | --- 5 | 6 | # Page Not Found 7 | 8 | [Return to CIO.gov](https://cio.gov) -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | playbook.usds.gov -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'github-pages', '~>207' 3 | gem 'sass', '~>3.4.22' 4 | gem 'bourbon', '~>4.0.2' 5 | gem 'neat', '~>1.6.0' 6 | gem 'jekyll', '~> 3.9.0' 7 | gem 'kramdown', '~> 2.3.0' 8 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (6.0.3.2) 5 | concurrent-ruby (~> 1.0, >= 1.0.2) 6 | i18n (>= 0.7, < 2) 7 | minitest (~> 5.1) 8 | tzinfo (~> 1.1) 9 | zeitwerk (~> 2.2, >= 2.2.2) 10 | addressable (2.7.0) 11 | public_suffix (>= 2.0.2, < 5.0) 12 | bourbon (4.0.2) 13 | sass (~> 3.3) 14 | thor 15 | coffee-script (2.4.1) 16 | coffee-script-source 17 | execjs 18 | coffee-script-source (1.11.1) 19 | colorator (1.1.0) 20 | commonmarker (0.17.13) 21 | ruby-enum (~> 0.5) 22 | concurrent-ruby (1.1.7) 23 | dnsruby (1.61.4) 24 | simpleidn (~> 0.1) 25 | em-websocket (0.5.1) 26 | eventmachine (>= 0.12.9) 27 | http_parser.rb (~> 0.6.0) 28 | ethon (0.12.0) 29 | ffi (>= 1.3.0) 30 | eventmachine (1.2.7) 31 | execjs (2.7.0) 32 | faraday (1.0.1) 33 | multipart-post (>= 1.2, < 3) 34 | ffi (1.13.1) 35 | forwardable-extended (2.6.0) 36 | gemoji (3.0.1) 37 | github-pages (207) 38 | github-pages-health-check (= 1.16.1) 39 | jekyll (= 3.9.0) 40 | jekyll-avatar (= 0.7.0) 41 | jekyll-coffeescript (= 1.1.1) 42 | jekyll-commonmark-ghpages (= 0.1.6) 43 | jekyll-default-layout (= 0.1.4) 44 | jekyll-feed (= 0.13.0) 45 | jekyll-gist (= 1.5.0) 46 | jekyll-github-metadata (= 2.13.0) 47 | jekyll-mentions (= 1.5.1) 48 | jekyll-optional-front-matter (= 0.3.2) 49 | jekyll-paginate (= 1.1.0) 50 | jekyll-readme-index (= 0.3.0) 51 | jekyll-redirect-from (= 0.15.0) 52 | jekyll-relative-links (= 0.6.1) 53 | jekyll-remote-theme (= 0.4.1) 54 | jekyll-sass-converter (= 1.5.2) 55 | jekyll-seo-tag (= 2.6.1) 56 | jekyll-sitemap (= 1.4.0) 57 | jekyll-swiss (= 1.0.0) 58 | jekyll-theme-architect (= 0.1.1) 59 | jekyll-theme-cayman (= 0.1.1) 60 | jekyll-theme-dinky (= 0.1.1) 61 | jekyll-theme-hacker (= 0.1.1) 62 | jekyll-theme-leap-day (= 0.1.1) 63 | jekyll-theme-merlot (= 0.1.1) 64 | jekyll-theme-midnight (= 0.1.1) 65 | jekyll-theme-minimal (= 0.1.1) 66 | jekyll-theme-modernist (= 0.1.1) 67 | jekyll-theme-primer (= 0.5.4) 68 | jekyll-theme-slate (= 0.1.1) 69 | jekyll-theme-tactile (= 0.1.1) 70 | jekyll-theme-time-machine (= 0.1.1) 71 | jekyll-titles-from-headings (= 0.5.3) 72 | jemoji (= 0.11.1) 73 | kramdown (= 2.3.0) 74 | kramdown-parser-gfm (= 1.1.0) 75 | liquid (= 4.0.3) 76 | mercenary (~> 0.3) 77 | minima (= 2.5.1) 78 | nokogiri (>= 1.10.4, < 2.0) 79 | rouge (= 3.19.0) 80 | terminal-table (~> 1.4) 81 | github-pages-health-check (1.16.1) 82 | addressable (~> 2.3) 83 | dnsruby (~> 1.60) 84 | octokit (~> 4.0) 85 | public_suffix (~> 3.0) 86 | typhoeus (~> 1.3) 87 | html-pipeline (2.14.0) 88 | activesupport (>= 2) 89 | nokogiri (>= 1.4) 90 | http_parser.rb (0.6.0) 91 | i18n (0.9.5) 92 | concurrent-ruby (~> 1.0) 93 | jekyll (3.9.0) 94 | addressable (~> 2.4) 95 | colorator (~> 1.0) 96 | em-websocket (~> 0.5) 97 | i18n (~> 0.7) 98 | jekyll-sass-converter (~> 1.0) 99 | jekyll-watch (~> 2.0) 100 | kramdown (>= 1.17, < 3) 101 | liquid (~> 4.0) 102 | mercenary (~> 0.3.3) 103 | pathutil (~> 0.9) 104 | rouge (>= 1.7, < 4) 105 | safe_yaml (~> 1.0) 106 | jekyll-avatar (0.7.0) 107 | jekyll (>= 3.0, < 5.0) 108 | jekyll-coffeescript (1.1.1) 109 | coffee-script (~> 2.2) 110 | coffee-script-source (~> 1.11.1) 111 | jekyll-commonmark (1.3.1) 112 | commonmarker (~> 0.14) 113 | jekyll (>= 3.7, < 5.0) 114 | jekyll-commonmark-ghpages (0.1.6) 115 | commonmarker (~> 0.17.6) 116 | jekyll-commonmark (~> 1.2) 117 | rouge (>= 2.0, < 4.0) 118 | jekyll-default-layout (0.1.4) 119 | jekyll (~> 3.0) 120 | jekyll-feed (0.13.0) 121 | jekyll (>= 3.7, < 5.0) 122 | jekyll-gist (1.5.0) 123 | octokit (~> 4.2) 124 | jekyll-github-metadata (2.13.0) 125 | jekyll (>= 3.4, < 5.0) 126 | octokit (~> 4.0, != 4.4.0) 127 | jekyll-mentions (1.5.1) 128 | html-pipeline (~> 2.3) 129 | jekyll (>= 3.7, < 5.0) 130 | jekyll-optional-front-matter (0.3.2) 131 | jekyll (>= 3.0, < 5.0) 132 | jekyll-paginate (1.1.0) 133 | jekyll-readme-index (0.3.0) 134 | jekyll (>= 3.0, < 5.0) 135 | jekyll-redirect-from (0.15.0) 136 | jekyll (>= 3.3, < 5.0) 137 | jekyll-relative-links (0.6.1) 138 | jekyll (>= 3.3, < 5.0) 139 | jekyll-remote-theme (0.4.1) 140 | addressable (~> 2.0) 141 | jekyll (>= 3.5, < 5.0) 142 | rubyzip (>= 1.3.0) 143 | jekyll-sass-converter (1.5.2) 144 | sass (~> 3.4) 145 | jekyll-seo-tag (2.6.1) 146 | jekyll (>= 3.3, < 5.0) 147 | jekyll-sitemap (1.4.0) 148 | jekyll (>= 3.7, < 5.0) 149 | jekyll-swiss (1.0.0) 150 | jekyll-theme-architect (0.1.1) 151 | jekyll (~> 3.5) 152 | jekyll-seo-tag (~> 2.0) 153 | jekyll-theme-cayman (0.1.1) 154 | jekyll (~> 3.5) 155 | jekyll-seo-tag (~> 2.0) 156 | jekyll-theme-dinky (0.1.1) 157 | jekyll (~> 3.5) 158 | jekyll-seo-tag (~> 2.0) 159 | jekyll-theme-hacker (0.1.1) 160 | jekyll (~> 3.5) 161 | jekyll-seo-tag (~> 2.0) 162 | jekyll-theme-leap-day (0.1.1) 163 | jekyll (~> 3.5) 164 | jekyll-seo-tag (~> 2.0) 165 | jekyll-theme-merlot (0.1.1) 166 | jekyll (~> 3.5) 167 | jekyll-seo-tag (~> 2.0) 168 | jekyll-theme-midnight (0.1.1) 169 | jekyll (~> 3.5) 170 | jekyll-seo-tag (~> 2.0) 171 | jekyll-theme-minimal (0.1.1) 172 | jekyll (~> 3.5) 173 | jekyll-seo-tag (~> 2.0) 174 | jekyll-theme-modernist (0.1.1) 175 | jekyll (~> 3.5) 176 | jekyll-seo-tag (~> 2.0) 177 | jekyll-theme-primer (0.5.4) 178 | jekyll (> 3.5, < 5.0) 179 | jekyll-github-metadata (~> 2.9) 180 | jekyll-seo-tag (~> 2.0) 181 | jekyll-theme-slate (0.1.1) 182 | jekyll (~> 3.5) 183 | jekyll-seo-tag (~> 2.0) 184 | jekyll-theme-tactile (0.1.1) 185 | jekyll (~> 3.5) 186 | jekyll-seo-tag (~> 2.0) 187 | jekyll-theme-time-machine (0.1.1) 188 | jekyll (~> 3.5) 189 | jekyll-seo-tag (~> 2.0) 190 | jekyll-titles-from-headings (0.5.3) 191 | jekyll (>= 3.3, < 5.0) 192 | jekyll-watch (2.2.1) 193 | listen (~> 3.0) 194 | jemoji (0.11.1) 195 | gemoji (~> 3.0) 196 | html-pipeline (~> 2.2) 197 | jekyll (>= 3.0, < 5.0) 198 | kramdown (2.3.0) 199 | rexml 200 | kramdown-parser-gfm (1.1.0) 201 | kramdown (~> 2.0) 202 | liquid (4.0.3) 203 | listen (3.2.1) 204 | rb-fsevent (~> 0.10, >= 0.10.3) 205 | rb-inotify (~> 0.9, >= 0.9.10) 206 | mercenary (0.3.6) 207 | mini_portile2 (2.4.0) 208 | minima (2.5.1) 209 | jekyll (>= 3.5, < 5.0) 210 | jekyll-feed (~> 0.9) 211 | jekyll-seo-tag (~> 2.1) 212 | minitest (5.14.1) 213 | multipart-post (2.1.1) 214 | neat (1.6.0) 215 | bourbon (>= 3.1) 216 | sass (>= 3.3) 217 | nokogiri (1.10.10) 218 | mini_portile2 (~> 2.4.0) 219 | octokit (4.18.0) 220 | faraday (>= 0.9) 221 | sawyer (~> 0.8.0, >= 0.5.3) 222 | pathutil (0.16.2) 223 | forwardable-extended (~> 2.6) 224 | public_suffix (3.1.1) 225 | rb-fsevent (0.10.4) 226 | rb-inotify (0.10.1) 227 | ffi (~> 1.0) 228 | rexml (3.2.4) 229 | rouge (3.19.0) 230 | ruby-enum (0.8.0) 231 | i18n 232 | rubyzip (2.3.0) 233 | safe_yaml (1.0.5) 234 | sass (3.4.25) 235 | sawyer (0.8.2) 236 | addressable (>= 2.3.5) 237 | faraday (> 0.8, < 2.0) 238 | simpleidn (0.1.1) 239 | unf (~> 0.1.4) 240 | terminal-table (1.8.0) 241 | unicode-display_width (~> 1.1, >= 1.1.1) 242 | thor (1.0.1) 243 | thread_safe (0.3.6) 244 | typhoeus (1.4.0) 245 | ethon (>= 0.9.0) 246 | tzinfo (1.2.7) 247 | thread_safe (~> 0.1) 248 | unf (0.1.4) 249 | unf_ext 250 | unf_ext (0.0.7.7) 251 | unicode-display_width (1.7.0) 252 | zeitwerk (2.4.0) 253 | 254 | PLATFORMS 255 | ruby 256 | 257 | DEPENDENCIES 258 | bourbon (~> 4.0.2) 259 | github-pages (~> 207) 260 | jekyll (~> 3.9.0) 261 | kramdown (~> 2.3.0) 262 | neat (~> 1.6.0) 263 | sass (~> 3.4.22) 264 | 265 | BUNDLED WITH 266 | 1.17.2 267 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## About This Project 2 | 3 | The American people expect to interact with government through digital channels such as websites, email, and mobile applications. By building better digital services that meet the needs of the people that use our services, we can make the delivery of our policy and programs more effective. 4 | 5 | One way to advance smarter digital service delivery is by putting the right processes and practices in place to drive outcomes and accountability and allow people and companies to do their best work. The Digital Services Playbook and the TechFAR Handbook document these best practices and processes: 6 | 7 | - [**The Digital Services Playbook**](https://playbook.cio.gov/ "Link to the Digital Services Playbook") identifies a series of “plays” drawn from successful best practices from the private sector and government that, if followed together, will help government build effective digital services. The plays outline an approach to delivering services that increases our ability to be flexible, iterative and, most importantly, to focus on the needs of the people that use our services. 8 | - [**The TechFAR Handbook**](https://techfarhub.cio.gov/handbook/ "Link to the TechFAR Handbook") highlights the flexibilities in the Federal Acquisition Regulation (FAR) that can help agencies implement “plays” from the Playbook that would be accomplished with acquisition support – with a particular focus on how to use contractors to support an iterative, customer-driven software development process, as is routinely done in the private sector. 9 | 10 | ## We Want Your Feedback 11 | We encourage your feedback and suggestions on these documents. Content and feature suggestions and discussions are welcome via [GitHub Issues](https://github.com/WhiteHouse/playbook/issues). You may also propose changes to the content directly by submitting a [pull request](https://help.github.com/articles/creating-a-pull-request "More Information on Submitting Pull Requests"). 12 | 13 | You don't need to install any software to suggest a change. To propose a change from your browser, [select a play in the `_plays` folder](https://github.com/usds/playbook/tree/gh-pages/_plays "Link to the Plays Markdown files"). You can use GitHub's in-browser editor to edit files and submit a "pull request" for your changes to be merged into the document. 14 | 15 | If you would like to see and discuss the changes that other people have proposed, [visit the "Pull Requests" section](https://github.com/usds/playbook/pulls "Link to the Pull Requests Section of GitHub") and [browse the issues](https://github.com/WhiteHouse/playbook/issues "Link to the Issues Section of GitHub"). 16 | 17 | ## Technical Details 18 | 19 | The Playbook is compiled from [Markdown](https://help.github.com/articles/github-flavored-markdown "Link to More Information About Markdown") files using [Jekyll](https://github.com/jekyll/jekyll "Link to More Information about Jekyll"). To propose a specific change, you can submit a [pull request](https://help.github.com/articles/creating-a-pull-request "More Information on Submitting Pull Requests") with your change to one of these source Markdown files. The Plays from the Playbook are [available in the `_plays` folder](https://github.com/WhiteHouse/playbook/tree/gh-pages/_plays "Link to the Plays Markdown files"). 20 | 21 | You can also use Github's in-browser editing feature to make an edit to one of these Markdown files and submit your change for consideration without needing to install any additional software. 22 | 23 | ### Running the Site Locally 24 | 25 | To run the site locally on your own computer (most helpful for previewing your own changes), you will need to install Jekyll and other dependencies: 26 | 27 | 1. If you don't already have Ruby and Bundler installed, follow [the first two steps in these Jekyll installation instructions](https://help.github.com/articles/using-jekyll-with-pages#installing-jekyll "Installation instructions for Jekyll"). 28 | 2. Next, [fork this repository](https://help.github.com/articles/fork-a-repo/ "Instructions for Forking Your Repository") and clone it on your computer. 29 | 3. Navigate to the folder on your computer, and run the command `bundle install` at the command line prompt. 30 | 31 | To run the site locally, run `jekyll serve --watch`, then visit `http://localhost:4000/` in your browser to preview the site. 32 | 33 | ### Editing the Stylesheets 34 | 35 | This project uses [Sass](http://sass-lang.com/ "Link to Learn More About Sass") for managing its style sheets. These styles are defined in the [`styles.scss` file](assets/_sass/styles.scss). We use [Jekyll's native SASS support](https://jekyllrb.com/docs/assets/) to auto-generate the required CSS when you run the site locally, as described above. 36 | 37 | ## License 38 | As a work of the United States Government, this project is in the public domain within the United States. 39 | 40 | Additionally, we waive copyright and related rights in the work worldwide through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). 41 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | permalink: pretty 2 | highlighter: rouge 3 | url: https://playbook.cio.gov 4 | 5 | collections: 6 | - plays 7 | 8 | markdown: kramdown 9 | 10 | sass: 11 | sass_dir: assets/_sass -------------------------------------------------------------------------------- /_includes/google-analytics.html: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | Global site tag (gtag.js) - Google Analytics - USDS account 3 | {% endcomment %} 4 | 5 | 12 | -------------------------------------------------------------------------------- /_includes/introduction.md: -------------------------------------------------------------------------------- 1 | # Digital Services Playbook 2 | 3 | The American people expect to interact with government through digital channels such as websites, email, and mobile applications. By building digital services that meet their needs, we can make the delivery of our policy and programs more effective. 4 | 5 | Today, too many of our digital services projects do not work well, are delivered late, or are over budget. To increase the success rate of these projects, the U.S. Government needs a new approach. We created a playbook of 13 key “plays” drawn from successful practices from the private sector and government that, if followed together, will help government build effective digital services. 6 | -------------------------------------------------------------------------------- /_includes/techfar-online.md: -------------------------------------------------------------------------------- 1 | # The TechFAR Handbook 2 | 3 | This content has moved. Please see [https://techfarhub.cio.gov/handbook/](https://techfarhub.cio.gov/handbook/). 4 | -------------------------------------------------------------------------------- /_layouts/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Page Not Found 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | {{ content }} 17 |
18 |
19 | 20 | {% include google-analytics.html %} 21 | 22 | 23 | -------------------------------------------------------------------------------- /_layouts/techfar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The TechFAR Handbook — from the U.S. Digital Service 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 |
25 |
26 |
27 | {{ content }} 28 |
29 | Read the Handbook 30 |
31 |
32 |
33 |
34 | 35 | 36 | {% include google-analytics.html %} 37 | 38 | 39 | -------------------------------------------------------------------------------- /_plays/01.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 1 3 | title: Understand what people need 4 | --- 5 | 6 | We must begin digital projects by exploring and pinpointing the needs of the people who will use the service, and the ways the service will fit into their lives. Whether the users are members of the public or government employees, policy makers must include real people in their design process from the beginning. The needs of people — not constraints of government structures or silos — should inform technical and design decisions. We need to continually test the products we build with real people to keep us honest about what is important. 7 | 8 | ### Checklist 9 | 1. Early in the project, spend time with current and prospective users of the service 10 | 2. Use a range of qualitative and quantitative research methods to determine people’s goals, needs, and behaviors; be thoughtful about the time spent 11 | 3. Test prototypes of solutions with real people, in the field if possible 12 | 4. Document the findings about user goals, needs, behaviors, and preferences 13 | 5. Share findings with the team and agency leadership 14 | 6. Create a prioritized list of tasks the user is trying to accomplish, also known as "user stories" 15 | 7. As the digital service is being built, regularly test it with potential users to ensure it meets people’s needs 16 | 17 | ### Key Questions 18 | - Who are your primary users? 19 | - What user needs will this service address? 20 | - Why does the user want or need this service? 21 | - Which people will have the most difficulty with the service? 22 | - Which research methods were used? 23 | - What were the key findings? 24 | - How were the findings documented? Where can future team members access the documentation? 25 | - How often are you testing with real people? 26 | -------------------------------------------------------------------------------- /_plays/02.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 2 3 | title: Address the whole experience, from start to finish 4 | --- 5 | 6 | We need to understand the different ways people will interact with our services, including the actions they take online, through a mobile application, on a phone, or in person. Every encounter — whether it's online or offline — should move the user closer towards their goal. 7 | 8 | ### Checklist 9 | 1. Understand the different points at which people will interact with the service – both online and in person 10 | 2. Identify pain points in the current way users interact with the service, and prioritize these according to user needs 11 | 3. Design the digital parts of the service so that they are integrated with the offline touch points people use to interact with the service 12 | 4. Develop metrics that will measure how well the service is meeting user needs at each step of the service 13 | 14 | 15 | ### Key Questions 16 | - What are the different ways (both online and offline) that people currently accomplish the task the digital service is designed to help with? 17 | - Where are user pain points in the current way people accomplish the task? 18 | - Where does this specific project fit into the larger way people currently obtain the service being offered? 19 | - What metrics will best indicate how well the service is working for its users? 20 | -------------------------------------------------------------------------------- /_plays/03.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 3 3 | title: Make it simple and intuitive 4 | --- 5 | 6 | Using a government service shouldn’t be stressful, confusing, or daunting. It’s our job to build services that are simple and intuitive enough that users succeed the first time, unaided. 7 | 8 | ### Checklist 9 | 1. Use a simple and flexible design style guide for the service. Use the [U.S. Web Design System](https://playbook.cio.gov/designstandards) as a default 10 | 2. Use the design style guide consistently for related digital services 11 | 3. Give users clear information about where they are in each step of the process 12 | 4. Follow accessibility best practices to ensure all people can use the service 13 | 5. Provide users with a way to exit and return later to complete the process 14 | 6. Use language that is familiar to the user and easy to understand 15 | 7. Use language and design consistently throughout the service, including online and offline touch points 16 | 17 | ### Key Questions 18 | - What primary tasks are the user trying to accomplish? 19 | - Is the language as plain and universal as possible? 20 | - What languages is your service offered in? 21 | - If a user needs help while using the service, how do they go about getting it? 22 | - How does the service’s design visually relate to other government services? 23 | -------------------------------------------------------------------------------- /_plays/04.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 4 3 | title: Build the service using agile and iterative practices 4 | --- 5 | 6 | We should use an incremental, fast-paced style of software development to reduce the risk of failure. We want to get working software into users’ hands as early as possible to give the design and development team opportunities to adjust based on user feedback about the service. A critical capability is being able to automatically test and deploy the service so that new features can be added often and be put into production easily. 7 | 8 | ### Checklist 9 | 1. Ship a functioning “minimum viable product” (MVP) that solves a core user need as soon as possible, no longer than three months from the beginning of the project, using a “beta” or “test” period if needed 10 | 2. Run usability tests frequently to see how well the service works and identify improvements that should be made 11 | 3. Ensure the individuals building the service communicate closely using techniques such as launch meetings, strategy rooms, daily standups, and team chat tools 12 | 4. Keep delivery teams small and focused; limit organizational layers that separate these teams from the business owners 13 | 5. Release features and improvements multiple times each month 14 | 6. Create a prioritized list of features and bugs, also known as the “feature backlog” and “bug backlog” 15 | 7. Use a source code version control system 16 | 8. Give the entire project team access to the issue tracker and version control system 17 | 9. Use code reviews to ensure quality 18 | 19 | 20 | ### Key Questions 21 | - How long did it take to ship the MVP? If it hasn't shipped yet, when will it? 22 | - How long does it take for a production deployment? 23 | - How many days or weeks are in each iteration/sprint? 24 | - Which version control system is being used? 25 | - How are bugs tracked and tickets issued? What tool is used? 26 | - How is the feature backlog managed? What tool is used? 27 | - How often do you review and reprioritize the feature and bug backlog? 28 | - How do you collect user feedback during development? How is that feedback used to improve the service? 29 | - At each stage of usability testing, which gaps were identified in addressing user needs? 30 | -------------------------------------------------------------------------------- /_plays/05.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 5 3 | title: Structure budgets and contracts to support delivery 4 | --- 5 | 6 | To improve our chances of success when contracting out development work, we need to work with experienced budgeting and contracting officers. In cases where we use third parties to help build a service, a well-defined contract can facilitate good development practices like conducting a research and prototyping phase, refining product requirements as the service is built, evaluating open source alternatives, ensuring frequent delivery milestones, and allowing the flexibility to purchase cloud computing resources. 7 | 8 | [The TechFAR Handbook](https://techfarhub.cio.gov/handbook/) provides a detailed explanation of the flexibilities in the Federal Acquisition Regulation (FAR) that can help agencies implement this play. 9 | 10 | ### Checklist 11 | 1. Budget includes research, discovery, and prototyping activities 12 | 2. Contract is structured to request frequent deliverables, not multi-month milestones 13 | 3. Contract is structured to hold vendors accountable to deliverables 14 | 4. Contract gives the government delivery team enough flexibility to adjust feature prioritization and delivery schedule as the project evolves 15 | 5. Contract ensures open source solutions are evaluated when technology choices are made 16 | 6. Contract specifies that software and data generated by third parties remains under our control, and can be reused and released to the public as appropriate and in accordance with the law 17 | 7. Contract allows us to use tools, services, and hosting from vendors with a variety of pricing models, including fixed fees and variable models like “pay-for-what-you-use” services 18 | 8. Contract specifies a warranty period where defects uncovered by the public are addressed by the vendor at no additional cost to the government 19 | 9. Contract includes a transition of services period and transition-out plan 20 | 21 | ### Key Questions 22 | - What is the scope of the project? What are the key deliverables? 23 | - What are the milestones? How frequent are they? 24 | - What are the performance metrics defined in the contract (e.g., response time, system uptime, time period to address priority issues)? -------------------------------------------------------------------------------- /_plays/06.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 6 3 | title: Assign one leader and hold that person accountable 4 | --- 5 | 6 | There must be a single product owner who has the authority and responsibility to assign tasks and work elements; make business, product, and technical decisions; and be accountable for the success or failure of the overall service. This product owner is ultimately responsible for how well the service meets the needs of its users, which is how a service should be evaluated. The product owner is responsible for ensuring that features are built and managing the feature and bug backlogs. 7 | 8 | ### Checklist 9 | 1. A product owner has been identified 10 | 2. All stakeholders agree that the product owner has the authority to assign tasks and make decisions about features and technical implementation details 11 | 3. The product owner has a product management background with technical experience to assess alternatives and weigh tradeoffs 12 | 4. The product owner has a work plan that includes budget estimates and identifies funding sources 13 | 5. The product owner has a strong relationship with the contracting officer 14 | 15 | ### Key Questions 16 | - Who is the product owner? 17 | - What organizational changes have been made to ensure the product owner has sufficient authority over and support for the project? 18 | - What does it take for the product owner to add or remove a feature from the service? 19 | -------------------------------------------------------------------------------- /_plays/07.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 7 3 | title: Bring in experienced teams 4 | --- 5 | 6 | We need talented people working in government who have experience creating modern digital services. This includes bringing in seasoned product managers, engineers, and designers. When outside help is needed, our teams should work with contracting officers who understand how to evaluate third-party technical competency so our teams can be paired with contractors who are good at both building and delivering effective digital services. The makeup and experience requirements of the team will vary depending on the scope of the project. 7 | 8 | ### Checklist 9 | 1. Member(s) of the team have experience building popular, high-traffic digital services 10 | 2. Member(s) of the team have experience designing mobile and web applications 11 | 3. Member(s) of the team have experience using automated testing frameworks 12 | 4. Member(s) of the team have experience with modern development and operations (DevOps) techniques like continuous integration and continuous deployment 13 | 5. Member(s) of the team have experience securing digital services 14 | 6. A Federal contracting officer is on the internal team if a third party will be used for development work 15 | 7. A Federal budget officer is on the internal team or is a partner 16 | 8. The appropriate privacy, civil liberties, and/or legal advisor for the department or agency is a partner 17 | -------------------------------------------------------------------------------- /_plays/08.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 8 3 | title: Choose a modern technology stack 4 | --- 5 | 6 | The technology decisions we make need to enable development teams to work efficiently and enable services to scale easily and cost-effectively. Our choices for hosting infrastructure, databases, software frameworks, programming languages and the rest of the technology stack should seek to avoid vendor lock-in and match what successful modern consumer and enterprise software companies would choose today. In particular, digital services teams should consider using open source, cloud-based, and commodity solutions across the technology stack, because of their widespread adoption and support by successful consumer and enterprise technology companies in the private sector. 7 | 8 | ### Checklist 9 | 1. Choose software frameworks that are commonly used by private-sector companies creating similar services 10 | 2. Whenever possible, ensure that software can be deployed on a variety of commodity hardware types 11 | 3. Ensure that each project has clear, understandable instructions for setting up a local development environment, and that team members can be quickly added or removed from projects 12 | 4. [Consider open source software solutions](https://www.obamawhitehouse.gov/sites/default/files/omb/assets/egov_docs/memotociostechnologyneutrality.pdf) at every layer of the stack 13 | 14 | ### Key Questions 15 | - What is your development stack and why did you choose it? 16 | - Which databases are you using and why did you choose them? 17 | - How long does it take for a new team member to start contributing? -------------------------------------------------------------------------------- /_plays/09.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 9 3 | title: Deploy in a flexible hosting environment 4 | --- 5 | 6 | Our services should be deployed on flexible infrastructure, where resources can be provisioned in real-time to meet spikes in traffic and user demand. Our digital services are crippled when we host them in data centers that market themselves as “cloud hosting” but require us to manage and maintain hardware directly. This outdated practice wastes time, weakens our disaster recovery plans, and results in significantly higher costs. 7 | 8 | ### Checklist 9 | 1. Resources are provisioned on demand 10 | 2. Resources scale based on real-time user demand 11 | 3. Resources are provisioned through an API 12 | 4. Resources are available in multiple regions 13 | 5. We only pay for resources we use 14 | 6. Static assets are served through a content delivery network 15 | 7. Application is hosted on commodity hardware 16 | 17 | ### Key Questions 18 | - Where is your service hosted? 19 | - What hardware does your service use to run? 20 | - What is the demand or usage pattern for your service? 21 | - What happens to your service when it experiences a surge in traffic or load? 22 | - How much capacity is available in your hosting environment? 23 | - How long does it take you to provision a new resource, like an application server? 24 | - How have you designed your service to scale based on demand? 25 | - How are you paying for your hosting infrastructure (e.g., by the minute, hourly, daily, monthly, fixed)? 26 | - Is your service hosted in multiple regions, availability zones, or data centers? 27 | - In the event of a catastrophic disaster to a datacenter, how long will it take to have the service operational? 28 | - What would be the impact of a prolonged downtime window? 29 | - What data redundancy do you have built into the system, and what would be the impact of a catastrophic data loss? 30 | - How often do you need to contact a person from your hosting provider to get resources or to fix an issue? 31 | -------------------------------------------------------------------------------- /_plays/10.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 10 3 | title: Automate testing and deployments 4 | --- 5 | 6 | Today, developers write automated scripts that can verify thousands of scenarios in minutes and then deploy updated code into production environments multiple times a day. They use automated performance tests which simulate surges in traffic to identify performance bottlenecks. While manual tests and quality assurance are still necessary, automated tests provide consistent and reliable protection against unintentional regressions, and make it possible for developers to confidently release frequent updates to the service. 7 | 8 | ### Checklist 9 | 1. Create automated tests that verify all user-facing functionality 10 | 2. Create unit and integration tests to verify modules and components 11 | 3. Run tests automatically as part of the build process 12 | 4. Perform deployments automatically with deployment scripts, continuous delivery services, or similar techniques 13 | 5. Conduct load and performance tests at regular intervals, including before public launch 14 | 15 | 16 | ### Key Questions 17 | - What percentage of the code base is covered by automated tests? 18 | - How long does it take to build, test, and deploy a typical bug fix? 19 | - How long does it take to build, test, and deploy a new feature into production? 20 | - How frequently are builds created? 21 | - What test tools are used? 22 | - Which deployment automation or continuous integration tools are used? 23 | - What is the estimated maximum number of concurrent users who will want to use the system? 24 | - How many simultaneous users could the system handle, according to the most recent capacity test? 25 | - How does the service perform when you exceed the expected target usage volume? Does it degrade gracefully or catastrophically? 26 | - What is your scaling strategy when demand increases suddenly? 27 | -------------------------------------------------------------------------------- /_plays/11.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 11 3 | title: Manage security and privacy through reusable processes 4 | --- 5 | 6 | Our digital services have to protect sensitive information and keep systems secure. This is typically a process of continuous review and improvement which should be built into the development and maintenance of the service. At the start of designing a new service or feature, the team lead should engage the appropriate privacy, security, and legal officer(s) to discuss the type of information collected, how it should be secured, how long it is kept, and how it may be used and shared. The sustained engagement of a privacy specialist helps ensure that personal data is properly managed. In addition, a key process to building a secure service is comprehensively testing and certifying the components in each layer of the technology stack for security vulnerabilities, and then to re-use these same pre-certified components for multiple services. 7 | 8 | The following checklist provides a starting point, but teams should work closely with their privacy specialist and security engineer to meet the needs of the specific service. 9 | 10 | ### Checklist 11 | 1. Contact the appropriate privacy or legal officer of the department or agency to determine whether a System of Records Notice (SORN), Privacy Impact Assessment, or other review should be conducted 12 | 2. Determine, in consultation with a records officer, what data is collected and why, how it is used or shared, how it is stored and secured, and how long it is kept 13 | 3. Determine, in consultation with a privacy specialist, whether and how users are notified about how personal information is collected and used, including whether a privacy policy is needed and where it should appear, and how users will be notified in the event of a security breach 14 | 4. Consider whether the user should be able to access, delete, or remove their information from the service 15 | 5. “Pre-certify” the hosting infrastructure used for the project using FedRAMP 16 | 6. Use deployment scripts to ensure configuration of production environment remains consistent and controllable 17 | 18 | ### Key Questions 19 | - Does the service collect personal information from the user? How is the user notified of this collection? 20 | - Does it collect more information than necessary? Could the data be used in ways an average user wouldn't expect? 21 | - How does a user access, correct, delete, or remove personal information? 22 | - Will any of the personal information stored in the system be shared with other services, people, or partners? 23 | - How and how often is the service tested for security vulnerabilities? 24 | - How can someone from the public report a security issue? 25 | -------------------------------------------------------------------------------- /_plays/12.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 12 3 | title: Use data to drive decisions 4 | --- 5 | 6 | At every stage of a project, we should measure how well our service is working for our users. This includes measuring how well a system performs and how people are interacting with it in real-time. Our teams and agency leadership should carefully watch these metrics to find issues and identify which bug fixes and improvements should be prioritized. Along with monitoring tools, a feedback mechanism should be in place for people to report issues directly. 7 | 8 | ### Checklist 9 | 1. Monitor system-level resource utilization in real time 10 | 2. Monitor system performance in real-time (e.g. response time, latency, throughput, and error rates) 11 | 3. Ensure monitoring can measure median, 95th percentile, and 98th percentile performance 12 | 4. Create automated alerts based on this monitoring 13 | 5. Track concurrent users in real-time, and monitor user behaviors in the aggregate to determine how well the service meets user needs 14 | 6. Publish metrics internally 15 | 7. Publish metrics externally 16 | 8. Use an experimentation tool that supports multivariate testing in production 17 | 18 | 19 | ### Key Questions 20 | - What are the key metrics for the service? 21 | - How have these metrics performed over the life of the service? 22 | - Which system monitoring tools are in place? 23 | - What is the targeted average response time for your service? What percent of requests take more than 1 second, 2 seconds, 4 seconds, and 8 seconds? 24 | - What is the average response time and percentile breakdown (percent of requests taking more than 1s, 2s, 4s, and 8s) for the top 10 transactions? 25 | - What is the volume of each of your service’s top 10 transactions? What is the percentage of transactions started vs. completed? 26 | - What is your service’s monthly uptime target? 27 | - What is your service’s monthly uptime percentage, including scheduled maintenance? Excluding scheduled maintenance? 28 | - How does your team receive automated alerts when incidents occur? 29 | - How does your team respond to incidents? What is your post-mortem process? 30 | - Which tools are in place to measure user behavior? 31 | - What tools or technologies are used for A/B testing? 32 | - How do you measure customer satisfaction? 33 | -------------------------------------------------------------------------------- /_plays/13.md: -------------------------------------------------------------------------------- 1 | --- 2 | play_number: 13 3 | title: Default to open 4 | --- 5 | 6 | When we collaborate in the open and publish our data publicly, we can improve Government together. By building services more openly and publishing open data, we simplify the public’s access to government services and information, allow the public to contribute easily, and enable reuse by entrepreneurs, nonprofits, other agencies, and the public. 7 | 8 | ### Checklist 9 | 1. Offer users a mechanism to report bugs and issues, and be responsive to these reports 10 | 2. Provide datasets to the public, in their entirety, through bulk downloads and APIs (application programming interfaces) 11 | 3. Ensure that data from the service is explicitly in the public domain, and that rights are waived globally via an international public domain dedication, such as the “Creative Commons Zero” waiver 12 | 4. Catalog data in the agency’s enterprise data inventory and add any public datasets to the agency’s public data listing 13 | 5. Ensure that we maintain the rights to all data developed by third parties in a manner that is releasable and reusable at no cost to the public 14 | 6. Ensure that we maintain contractual rights to all custom software developed by third parties in a manner that is publishable and reusable at no cost 15 | 7. When appropriate, create a versioned API for third parties and internal users to interact with the service directly 16 | 8. When appropriate, publish source code of projects or components online 17 | 9. When appropriate, share your development process and progress publicly 18 | 19 | ### Key Questions 20 | - How are you collecting user feedback for bugs and issues? 21 | - If there is an API, what capabilities does it provide? Is it versioned? Who uses it? How is it documented? 22 | - If the codebase has not been released under an open source license, explain why. 23 | - What components are made available to the public as open source? 24 | - What datasets are made available to the public? 25 | -------------------------------------------------------------------------------- /assets/TechFAR Handbook 8 7 14.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/TechFAR Handbook 8 7 14.docx -------------------------------------------------------------------------------- /assets/TechFAR Handbook 8 7 14.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/TechFAR Handbook 8 7 14.pdf -------------------------------------------------------------------------------- /assets/TechFAR Handbook_2014-08-07.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/TechFAR Handbook_2014-08-07.docx -------------------------------------------------------------------------------- /assets/TechFAR Handbook_2014-08-07.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/TechFAR Handbook_2014-08-07.pdf -------------------------------------------------------------------------------- /assets/_sass/bourbon/_bourbon-deprecated-upcoming.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // These mixins/functions are deprecated 3 | // They will be removed in the next MAJOR version release 4 | //************************************************************************// 5 | @mixin inline-block { 6 | display: inline-block; 7 | @warn "inline-block mixin is deprecated and will be removed in the next major version release"; 8 | } 9 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | @import "settings/prefixer"; 3 | @import "settings/px-to-em"; 4 | 5 | // Custom Helpers 6 | @import "helpers/convert-units"; 7 | @import "helpers/gradient-positions-parser"; 8 | @import "helpers/is-num"; 9 | @import "helpers/linear-angle-parser"; 10 | @import "helpers/linear-gradient-parser"; 11 | @import "helpers/linear-positions-parser"; 12 | @import "helpers/linear-side-corner-parser"; 13 | @import "helpers/radial-arg-parser"; 14 | @import "helpers/radial-positions-parser"; 15 | @import "helpers/radial-gradient-parser"; 16 | @import "helpers/render-gradients"; 17 | @import "helpers/shape-size-stripper"; 18 | @import "helpers/str-to-num"; 19 | 20 | // Custom Functions 21 | @import "functions/assign"; 22 | @import "functions/color-lightness"; 23 | @import "functions/flex-grid"; 24 | @import "functions/golden-ratio"; 25 | @import "functions/grid-width"; 26 | @import "functions/modular-scale"; 27 | @import "functions/px-to-em"; 28 | @import "functions/px-to-rem"; 29 | @import "functions/strip-units"; 30 | @import "functions/tint-shade"; 31 | @import "functions/transition-property-name"; 32 | @import "functions/unpack"; 33 | 34 | // CSS3 Mixins 35 | @import "css3/animation"; 36 | @import "css3/appearance"; 37 | @import "css3/backface-visibility"; 38 | @import "css3/background"; 39 | @import "css3/background-image"; 40 | @import "css3/border-image"; 41 | @import "css3/border-radius"; 42 | @import "css3/box-sizing"; 43 | @import "css3/calc"; 44 | @import "css3/columns"; 45 | @import "css3/filter"; 46 | @import "css3/flex-box"; 47 | @import "css3/font-face"; 48 | @import "css3/font-feature-settings"; 49 | @import "css3/hyphens"; 50 | @import "css3/hidpi-media-query"; 51 | @import "css3/image-rendering"; 52 | @import "css3/keyframes"; 53 | @import "css3/linear-gradient"; 54 | @import "css3/perspective"; 55 | @import "css3/radial-gradient"; 56 | @import "css3/transform"; 57 | @import "css3/transition"; 58 | @import "css3/user-select"; 59 | @import "css3/placeholder"; 60 | 61 | // Addons & other mixins 62 | @import "addons/button"; 63 | @import "addons/clearfix"; 64 | @import "addons/directional-values"; 65 | @import "addons/ellipsis"; 66 | @import "addons/font-family"; 67 | @import "addons/hide-text"; 68 | @import "addons/html5-input-types"; 69 | @import "addons/position"; 70 | @import "addons/prefixer"; 71 | @import "addons/retina-image"; 72 | @import "addons/size"; 73 | @import "addons/timing-functions"; 74 | @import "addons/triangle"; 75 | @import "addons/word-wrap"; 76 | 77 | // Soon to be deprecated Mixins 78 | @import "bourbon-deprecated-upcoming"; 79 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_button.scss: -------------------------------------------------------------------------------- 1 | @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { 2 | 3 | @if type-of($style) == string and type-of($base-color) == color { 4 | @include buttonstyle($style, $base-color, $text-size, $padding); 5 | } 6 | 7 | @if type-of($style) == string and type-of($base-color) == number { 8 | $padding: $text-size; 9 | $text-size: $base-color; 10 | $base-color: #4294f0; 11 | 12 | @if $padding == inherit { 13 | $padding: 7px 18px; 14 | } 15 | 16 | @include buttonstyle($style, $base-color, $text-size, $padding); 17 | } 18 | 19 | @if type-of($style) == color and type-of($base-color) == color { 20 | $base-color: $style; 21 | $style: simple; 22 | @include buttonstyle($style, $base-color, $text-size, $padding); 23 | } 24 | 25 | @if type-of($style) == color and type-of($base-color) == number { 26 | $padding: $text-size; 27 | $text-size: $base-color; 28 | $base-color: $style; 29 | $style: simple; 30 | 31 | @if $padding == inherit { 32 | $padding: 7px 18px; 33 | } 34 | 35 | @include buttonstyle($style, $base-color, $text-size, $padding); 36 | } 37 | 38 | @if type-of($style) == number { 39 | $padding: $base-color; 40 | $text-size: $style; 41 | $base-color: #4294f0; 42 | $style: simple; 43 | 44 | @if $padding == #4294f0 { 45 | $padding: 7px 18px; 46 | } 47 | 48 | @include buttonstyle($style, $base-color, $text-size, $padding); 49 | } 50 | 51 | &:disabled { 52 | opacity: 0.5; 53 | cursor: not-allowed; 54 | } 55 | } 56 | 57 | 58 | // Selector Style Button 59 | //************************************************************************// 60 | @mixin buttonstyle($type, $b-color, $t-size, $pad) { 61 | // Grayscale button 62 | @if $type == simple and $b-color == grayscale($b-color) { 63 | @include simple($b-color, true, $t-size, $pad); 64 | } 65 | 66 | @if $type == shiny and $b-color == grayscale($b-color) { 67 | @include shiny($b-color, true, $t-size, $pad); 68 | } 69 | 70 | @if $type == pill and $b-color == grayscale($b-color) { 71 | @include pill($b-color, true, $t-size, $pad); 72 | } 73 | 74 | @if $type == flat and $b-color == grayscale($b-color) { 75 | @include flat($b-color, true, $t-size, $pad); 76 | } 77 | 78 | // Colored button 79 | @if $type == simple { 80 | @include simple($b-color, false, $t-size, $pad); 81 | } 82 | 83 | @else if $type == shiny { 84 | @include shiny($b-color, false, $t-size, $pad); 85 | } 86 | 87 | @else if $type == pill { 88 | @include pill($b-color, false, $t-size, $pad); 89 | } 90 | 91 | @else if $type == flat { 92 | @include flat($b-color, false, $t-size, $pad); 93 | } 94 | } 95 | 96 | 97 | // Simple Button 98 | //************************************************************************// 99 | @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 100 | $color: hsl(0, 0, 100%); 101 | $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 102 | $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); 103 | $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); 104 | $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); 105 | 106 | @if is-light($base-color) { 107 | $color: hsl(0, 0, 20%); 108 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 109 | } 110 | 111 | @if $grayscale == true { 112 | $border: grayscale($border); 113 | $inset-shadow: grayscale($inset-shadow); 114 | $stop-gradient: grayscale($stop-gradient); 115 | $text-shadow: grayscale($text-shadow); 116 | } 117 | 118 | border: 1px solid $border; 119 | border-radius: 3px; 120 | box-shadow: inset 0 1px 0 0 $inset-shadow; 121 | color: $color; 122 | display: inline-block; 123 | font-size: $textsize; 124 | font-weight: bold; 125 | @include linear-gradient ($base-color, $stop-gradient); 126 | padding: $padding; 127 | text-decoration: none; 128 | text-shadow: 0 1px 0 $text-shadow; 129 | background-clip: padding-box; 130 | 131 | &:hover:not(:disabled) { 132 | $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 133 | $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); 134 | $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); 135 | 136 | @if $grayscale == true { 137 | $base-color-hover: grayscale($base-color-hover); 138 | $inset-shadow-hover: grayscale($inset-shadow-hover); 139 | $stop-gradient-hover: grayscale($stop-gradient-hover); 140 | } 141 | 142 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 143 | cursor: pointer; 144 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 145 | } 146 | 147 | &:active:not(:disabled), 148 | &:focus:not(:disabled) { 149 | $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 150 | $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); 151 | 152 | @if $grayscale == true { 153 | $border-active: grayscale($border-active); 154 | $inset-shadow-active: grayscale($inset-shadow-active); 155 | } 156 | 157 | border: 1px solid $border-active; 158 | box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active; 159 | } 160 | } 161 | 162 | 163 | // Shiny Button 164 | //************************************************************************// 165 | @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 166 | $color: hsl(0, 0, 100%); 167 | $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); 168 | $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); 169 | $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); 170 | $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); 171 | $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); 172 | $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); 173 | $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); 174 | 175 | @if is-light($base-color) { 176 | $color: hsl(0, 0, 20%); 177 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 178 | } 179 | 180 | @if $grayscale == true { 181 | $border: grayscale($border); 182 | $border-bottom: grayscale($border-bottom); 183 | $fourth-stop: grayscale($fourth-stop); 184 | $inset-shadow: grayscale($inset-shadow); 185 | $second-stop: grayscale($second-stop); 186 | $text-shadow: grayscale($text-shadow); 187 | $third-stop: grayscale($third-stop); 188 | } 189 | 190 | border: 1px solid $border; 191 | border-bottom: 1px solid $border-bottom; 192 | border-radius: 5px; 193 | box-shadow: inset 0 1px 0 0 $inset-shadow; 194 | color: $color; 195 | display: inline-block; 196 | font-size: $textsize; 197 | font-weight: bold; 198 | @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); 199 | padding: $padding; 200 | text-align: center; 201 | text-decoration: none; 202 | text-shadow: 0 -1px 1px $text-shadow; 203 | 204 | &:hover:not(:disabled) { 205 | $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); 206 | $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); 207 | $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); 208 | $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); 209 | 210 | @if $grayscale == true { 211 | $first-stop-hover: grayscale($first-stop-hover); 212 | $second-stop-hover: grayscale($second-stop-hover); 213 | $third-stop-hover: grayscale($third-stop-hover); 214 | $fourth-stop-hover: grayscale($fourth-stop-hover); 215 | } 216 | 217 | cursor: pointer; 218 | @include linear-gradient(top, $first-stop-hover 0%, 219 | $second-stop-hover 50%, 220 | $third-stop-hover 50%, 221 | $fourth-stop-hover 100%); 222 | } 223 | 224 | &:active:not(:disabled), 225 | &:focus:not(:disabled) { 226 | $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); 227 | 228 | @if $grayscale == true { 229 | $inset-shadow-active: grayscale($inset-shadow-active); 230 | } 231 | 232 | box-shadow: inset 0 0 20px 0 $inset-shadow-active; 233 | } 234 | } 235 | 236 | 237 | // Pill Button 238 | //************************************************************************// 239 | @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 240 | $color: hsl(0, 0, 100%); 241 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); 242 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); 243 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); 244 | $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); 245 | $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); 246 | $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); 247 | 248 | @if is-light($base-color) { 249 | $color: hsl(0, 0, 20%); 250 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 251 | } 252 | 253 | @if $grayscale == true { 254 | $border-bottom: grayscale($border-bottom); 255 | $border-sides: grayscale($border-sides); 256 | $border-top: grayscale($border-top); 257 | $inset-shadow: grayscale($inset-shadow); 258 | $stop-gradient: grayscale($stop-gradient); 259 | $text-shadow: grayscale($text-shadow); 260 | } 261 | 262 | border: 1px solid $border-top; 263 | border-color: $border-top $border-sides $border-bottom; 264 | border-radius: 16px; 265 | box-shadow: inset 0 1px 0 0 $inset-shadow; 266 | color: $color; 267 | display: inline-block; 268 | font-size: $textsize; 269 | font-weight: normal; 270 | line-height: 1; 271 | @include linear-gradient ($base-color, $stop-gradient); 272 | padding: $padding; 273 | text-align: center; 274 | text-decoration: none; 275 | text-shadow: 0 -1px 1px $text-shadow; 276 | background-clip: padding-box; 277 | 278 | &:hover:not(:disabled) { 279 | $base-color-hover: adjust-color($base-color, $lightness: -4.5%); 280 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); 281 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); 282 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); 283 | $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); 284 | $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); 285 | $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); 286 | 287 | @if $grayscale == true { 288 | $base-color-hover: grayscale($base-color-hover); 289 | $border-bottom: grayscale($border-bottom); 290 | $border-sides: grayscale($border-sides); 291 | $border-top: grayscale($border-top); 292 | $inset-shadow-hover: grayscale($inset-shadow-hover); 293 | $stop-gradient-hover: grayscale($stop-gradient-hover); 294 | $text-shadow-hover: grayscale($text-shadow-hover); 295 | } 296 | 297 | border: 1px solid $border-top; 298 | border-color: $border-top $border-sides $border-bottom; 299 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 300 | cursor: pointer; 301 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 302 | text-shadow: 0 -1px 1px $text-shadow-hover; 303 | background-clip: padding-box; 304 | } 305 | 306 | &:active:not(:disabled), 307 | &:focus:not(:disabled) { 308 | $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); 309 | $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); 310 | $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); 311 | $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); 312 | $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); 313 | 314 | @if $grayscale == true { 315 | $active-color: grayscale($active-color); 316 | $border-active: grayscale($border-active); 317 | $border-bottom-active: grayscale($border-bottom-active); 318 | $inset-shadow-active: grayscale($inset-shadow-active); 319 | $text-shadow-active: grayscale($text-shadow-active); 320 | } 321 | 322 | background: $active-color; 323 | border: 1px solid $border-active; 324 | border-bottom: 1px solid $border-bottom-active; 325 | box-shadow: inset 0 0 6px 3px $inset-shadow-active; 326 | text-shadow: 0 -1px 1px $text-shadow-active; 327 | } 328 | } 329 | 330 | 331 | 332 | // Flat Button 333 | //************************************************************************// 334 | @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 335 | $color: hsl(0, 0, 100%); 336 | 337 | @if is-light($base-color) { 338 | $color: hsl(0, 0, 20%); 339 | } 340 | 341 | background-color: $base-color; 342 | border-radius: 3px; 343 | border: none; 344 | color: $color; 345 | display: inline-block; 346 | font-size: inherit; 347 | font-weight: bold; 348 | padding: 7px 18px; 349 | text-decoration: none; 350 | background-clip: padding-box; 351 | 352 | &:hover:not(:disabled){ 353 | $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); 354 | 355 | @if $grayscale == true { 356 | $base-color-hover: grayscale($base-color-hover); 357 | } 358 | 359 | background-color: $base-color-hover; 360 | cursor: pointer; 361 | } 362 | 363 | &:active:not(:disabled), 364 | &:focus:not(:disabled) { 365 | $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 366 | 367 | @if $grayscale == true { 368 | $base-color-active: grayscale($base-color-active); 369 | } 370 | 371 | background-color: $base-color-active; 372 | cursor: pointer; 373 | } 374 | } 375 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Modern micro clearfix provides an easy way to contain floats without adding additional markup. 2 | // 3 | // Example usage: 4 | // 5 | // // Contain all floats within .wrapper 6 | // .wrapper { 7 | // @include clearfix; 8 | // .content, 9 | // .sidebar { 10 | // float : left; 11 | // } 12 | // } 13 | 14 | @mixin clearfix { 15 | &:after { 16 | content:""; 17 | display:table; 18 | clear:both; 19 | } 20 | } 21 | 22 | // Acknowledgements 23 | // Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) 24 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_directional-values.scss: -------------------------------------------------------------------------------- 1 | // directional-property mixins are shorthands 2 | // for writing properties like the following 3 | // 4 | // @include margin(null 0 10px); 5 | // ------ 6 | // margin-right: 0; 7 | // margin-bottom: 10px; 8 | // margin-left: 0; 9 | // 10 | // - or - 11 | // 12 | // @include border-style(dotted null); 13 | // ------ 14 | // border-top-style: dotted; 15 | // border-bottom-style: dotted; 16 | // 17 | // ------ 18 | // 19 | // Note: You can also use false instead of null 20 | 21 | @function collapse-directionals($vals) { 22 | $output: null; 23 | 24 | $A: nth( $vals, 1 ); 25 | $B: if( length($vals) < 2, $A, nth($vals, 2)); 26 | $C: if( length($vals) < 3, $A, nth($vals, 3)); 27 | $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); 28 | 29 | @if $A == 0 { $A: 0 } 30 | @if $B == 0 { $B: 0 } 31 | @if $C == 0 { $C: 0 } 32 | @if $D == 0 { $D: 0 } 33 | 34 | @if $A == $B and $A == $C and $A == $D { $output: $A } 35 | @else if $A == $C and $B == $D { $output: $A $B } 36 | @else if $B == $D { $output: $A $B $C } 37 | @else { $output: $A $B $C $D } 38 | 39 | @return $output; 40 | } 41 | 42 | @function contains-falsy($list) { 43 | @each $item in $list { 44 | @if not $item { 45 | @return true; 46 | } 47 | } 48 | 49 | @return false; 50 | } 51 | 52 | @mixin directional-property($pre, $suf, $vals) { 53 | // Property Names 54 | $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 55 | $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 56 | $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 57 | $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 58 | $all: $pre + if($suf, "-#{$suf}", ""); 59 | 60 | $vals: collapse-directionals($vals); 61 | 62 | @if contains-falsy($vals) { 63 | @if nth($vals, 1) { #{$top}: nth($vals, 1); } 64 | 65 | @if length($vals) == 1 { 66 | @if nth($vals, 1) { #{$right}: nth($vals, 1); } 67 | } @else { 68 | @if nth($vals, 2) { #{$right}: nth($vals, 2); } 69 | } 70 | 71 | // prop: top/bottom right/left 72 | @if length($vals) == 2 { 73 | @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 74 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 75 | 76 | // prop: top right/left bottom 77 | } @else if length($vals) == 3 { 78 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 79 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 80 | 81 | // prop: top right bottom left 82 | } @else if length($vals) == 4 { 83 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 84 | @if nth($vals, 4) { #{$left}: nth($vals, 4); } 85 | } 86 | 87 | // prop: top/right/bottom/left 88 | } @else { 89 | #{$all}: $vals; 90 | } 91 | } 92 | 93 | @mixin margin($vals...) { 94 | @include directional-property(margin, false, $vals...); 95 | } 96 | 97 | @mixin padding($vals...) { 98 | @include directional-property(padding, false, $vals...); 99 | } 100 | 101 | @mixin border-style($vals...) { 102 | @include directional-property(border, style, $vals...); 103 | } 104 | 105 | @mixin border-color($vals...) { 106 | @include directional-property(border, color, $vals...); 107 | } 108 | 109 | @mixin border-width($vals...) { 110 | @include directional-property(border, width, $vals...); 111 | } 112 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @mixin ellipsis($width: 100%) { 2 | display: inline-block; 3 | max-width: $width; 4 | overflow: hidden; 5 | text-overflow: ellipsis; 6 | white-space: nowrap; 7 | } 8 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 2 | $helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 5 | $verdana: Verdana, Geneva, sans-serif; 6 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text { 2 | overflow: hidden; 3 | 4 | &:before { 5 | content: ""; 6 | display: block; 7 | width: 0; 8 | height: 100%; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_html5-input-types.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Generate a variable ($all-text-inputs) with a list of all html5 3 | // input types that have a text-based input, excluding textarea. 4 | // http://diveintohtml5.org/forms.html 5 | //************************************************************************// 6 | $inputs-list: 'input[type="email"]', 7 | 'input[type="number"]', 8 | 'input[type="password"]', 9 | 'input[type="search"]', 10 | 'input[type="tel"]', 11 | 'input[type="text"]', 12 | 'input[type="url"]', 13 | 14 | // Webkit & Gecko may change the display of these in the future 15 | 'input[type="color"]', 16 | 'input[type="date"]', 17 | 'input[type="datetime"]', 18 | 'input[type="datetime-local"]', 19 | 'input[type="month"]', 20 | 'input[type="time"]', 21 | 'input[type="week"]'; 22 | 23 | // Bare inputs 24 | //************************************************************************// 25 | $all-text-inputs: assign-inputs($inputs-list); 26 | 27 | // Hover Pseudo-class 28 | //************************************************************************// 29 | $all-text-inputs-hover: assign-inputs($inputs-list, hover); 30 | 31 | // Focus Pseudo-class 32 | //************************************************************************// 33 | $all-text-inputs-focus: assign-inputs($inputs-list, focus); 34 | 35 | 36 | 37 | // You must use interpolation on the variable: 38 | // #{$all-text-inputs} 39 | // #{$all-text-inputs-hover} 40 | // #{$all-text-inputs-focus} 41 | 42 | // Example 43 | //************************************************************************// 44 | // #{$all-text-inputs}, textarea { 45 | // border: 1px solid red; 46 | // } 47 | 48 | 49 | 50 | //************************************************************************// 51 | // Generate a variable ($all-button-inputs) with a list of all html5 52 | // input types that have a button-based input, excluding button. 53 | //************************************************************************// 54 | $inputs-button-list: 'input[type="button"]', 55 | 'input[type="reset"]', 56 | 'input[type="submit"]'; 57 | 58 | // Bare inputs 59 | //************************************************************************// 60 | $all-button-inputs: assign-inputs($inputs-button-list); 61 | 62 | // Hover Pseudo-class 63 | //************************************************************************// 64 | $all-button-inputs-hover: assign-inputs($inputs-button-list, hover); 65 | 66 | // Focus Pseudo-class 67 | //************************************************************************// 68 | $all-button-inputs-focus: assign-inputs($inputs-button-list, focus); 69 | 70 | // Active Pseudo-class 71 | //************************************************************************// 72 | $all-button-inputs-active: assign-inputs($inputs-button-list, active); 73 | 74 | 75 | 76 | // You must use interpolation on the variable: 77 | // #{$all-button-inputs} 78 | // #{$all-button-inputs-hover} 79 | // #{$all-button-inputs-focus} 80 | // #{$all-button-inputs-active} 81 | 82 | // Example 83 | //************************************************************************// 84 | // #{$all-button-inputs}, button { 85 | // border: 1px solid red; 86 | // } 87 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @mixin position ($position: relative, $coordinates: null null null null) { 2 | 3 | @if type-of($position) == list { 4 | $coordinates: $position; 5 | $position: relative; 6 | } 7 | 8 | $coordinates: unpack($coordinates); 9 | 10 | $top: nth($coordinates, 1); 11 | $right: nth($coordinates, 2); 12 | $bottom: nth($coordinates, 3); 13 | $left: nth($coordinates, 4); 14 | 15 | position: $position; 16 | 17 | @if ($top and $top == auto) or (type-of($top) == number) { 18 | top: $top; 19 | } 20 | 21 | @if ($right and $right == auto) or (type-of($right) == number) { 22 | right: $right; 23 | } 24 | 25 | @if ($bottom and $bottom == auto) or (type-of($bottom) == number) { 26 | bottom: $bottom; 27 | } 28 | 29 | @if ($left and $left == auto) or (type-of($left) == number) { 30 | left: $left; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | // Variables located in /settings/_prefixer.scss 5 | 6 | @mixin prefixer ($property, $value, $prefixes) { 7 | @each $prefix in $prefixes { 8 | @if $prefix == webkit { 9 | @if $prefix-for-webkit { 10 | -webkit-#{$property}: $value; 11 | } 12 | } 13 | @else if $prefix == moz { 14 | @if $prefix-for-mozilla { 15 | -moz-#{$property}: $value; 16 | } 17 | } 18 | @else if $prefix == ms { 19 | @if $prefix-for-microsoft { 20 | -ms-#{$property}: $value; 21 | } 22 | } 23 | @else if $prefix == o { 24 | @if $prefix-for-opera { 25 | -o-#{$property}: $value; 26 | } 27 | } 28 | @else if $prefix == spec { 29 | @if $prefix-for-spec { 30 | #{$property}: $value; 31 | } 32 | } 33 | @else { 34 | @warn "Unrecognized prefix: #{$prefix}"; 35 | } 36 | } 37 | } 38 | 39 | @mixin disable-prefix-for-all() { 40 | $prefix-for-webkit: false !global; 41 | $prefix-for-mozilla: false !global; 42 | $prefix-for-microsoft: false !global; 43 | $prefix-for-opera: false !global; 44 | $prefix-for-spec: false !global; 45 | } 46 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | @if $asset-pipeline { 11 | @if $retina-filename { 12 | background-image: image-url("#{$retina-filename}.#{$extension}"); 13 | } 14 | @else { 15 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 16 | } 17 | } 18 | 19 | @else { 20 | @if $retina-filename { 21 | background-image: url("#{$retina-filename}.#{$extension}"); 22 | } 23 | @else { 24 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 25 | } 26 | } 27 | 28 | background-size: $background-size; 29 | 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @mixin size($size) { 2 | $height: nth($size, 1); 3 | $width: $height; 4 | 5 | @if length($size) > 1 { 6 | $height: nth($size, 2); 7 | } 8 | 9 | @if $height == auto or (type-of($height) == number and not unitless($height)) { 10 | height: $height; 11 | } 12 | 13 | @if $width == auto or (type-of($height) == number and not unitless($width)) { 14 | width: $width; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html 3 | 4 | // EASE IN 5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 13 | 14 | // EASE OUT 15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 23 | 24 | // EASE IN OUT 25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 33 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle ($size, $color, $direction) { 2 | height: 0; 3 | width: 0; 4 | 5 | $width: nth($size, 1); 6 | $height: nth($size, length($size)); 7 | 8 | $foreground-color: nth($color, 1); 9 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 10 | 11 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 12 | 13 | $width: $width / 2; 14 | $height: if(length($size) > 1, $height, $height/2); 15 | 16 | @if $direction == up { 17 | border-left: $width solid $background-color; 18 | border-right: $width solid $background-color; 19 | border-bottom: $height solid $foreground-color; 20 | 21 | } @else if $direction == right { 22 | border-top: $width solid $background-color; 23 | border-bottom: $width solid $background-color; 24 | border-left: $height solid $foreground-color; 25 | 26 | } @else if $direction == down { 27 | border-left: $width solid $background-color; 28 | border-right: $width solid $background-color; 29 | border-top: $height solid $foreground-color; 30 | 31 | } @else if $direction == left { 32 | border-top: $width solid $background-color; 33 | border-bottom: $width solid $background-color; 34 | border-right: $height solid $foreground-color; 35 | } 36 | } 37 | 38 | @else if ($direction == up-right) or ($direction == up-left) { 39 | border-top: $height solid $foreground-color; 40 | 41 | @if $direction == up-right { 42 | border-left: $width solid $background-color; 43 | 44 | } @else if $direction == up-left { 45 | border-right: $width solid $background-color; 46 | } 47 | } 48 | 49 | @else if ($direction == down-right) or ($direction == down-left) { 50 | border-bottom: $height solid $foreground-color; 51 | 52 | @if $direction == down-right { 53 | border-left: $width solid $background-color; 54 | 55 | } @else if $direction == down-left { 56 | border-right: $width solid $background-color; 57 | } 58 | } 59 | 60 | @else if ($direction == inset-up) { 61 | border-width: $height $width; 62 | border-style: solid; 63 | border-color: $background-color $background-color $foreground-color; 64 | } 65 | 66 | @else if ($direction == inset-down) { 67 | border-width: $height $width; 68 | border-style: solid; 69 | border-color: $foreground-color $background-color $background-color; 70 | } 71 | 72 | @else if ($direction == inset-right) { 73 | border-width: $width $height; 74 | border-style: solid; 75 | border-color: $background-color $background-color $background-color $foreground-color; 76 | } 77 | 78 | @else if ($direction == inset-left) { 79 | border-width: $width $height; 80 | border-style: solid; 81 | border-color: $background-color $foreground-color $background-color $background-color; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @mixin word-wrap($wrap: break-word) { 2 | word-wrap: $wrap; 3 | 4 | @if $wrap == break-word { 5 | overflow-wrap: break-word; 6 | word-break: break-all; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | // Official animation shorthand property. 5 | @mixin animation ($animations...) { 6 | @include prefixer(animation, $animations, webkit moz spec); 7 | } 8 | 9 | // Individual Animation Properties 10 | @mixin animation-name ($names...) { 11 | @include prefixer(animation-name, $names, webkit moz spec); 12 | } 13 | 14 | 15 | @mixin animation-duration ($times...) { 16 | @include prefixer(animation-duration, $times, webkit moz spec); 17 | } 18 | 19 | 20 | @mixin animation-timing-function ($motions...) { 21 | // ease | linear | ease-in | ease-out | ease-in-out 22 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 23 | } 24 | 25 | 26 | @mixin animation-iteration-count ($values...) { 27 | // infinite | 28 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 29 | } 30 | 31 | 32 | @mixin animation-direction ($directions...) { 33 | // normal | alternate 34 | @include prefixer(animation-direction, $directions, webkit moz spec); 35 | } 36 | 37 | 38 | @mixin animation-play-state ($states...) { 39 | // running | paused 40 | @include prefixer(animation-play-state, $states, webkit moz spec); 41 | } 42 | 43 | 44 | @mixin animation-delay ($times...) { 45 | @include prefixer(animation-delay, $times, webkit moz spec); 46 | } 47 | 48 | 49 | @mixin animation-fill-mode ($modes...) { 50 | // none | forwards | backwards | both 51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 0, 3); 16 | $gradient-type: str-slice($image, 0, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background($backgrounds...) { 7 | $webkit-backgrounds: (); 8 | $spec-backgrounds: (); 9 | 10 | @each $background in $backgrounds { 11 | $webkit-background: (); 12 | $spec-background: (); 13 | $background-type: type-of($background); 14 | 15 | @if $background-type == string or list { 16 | $background-str: if($background-type == list, nth($background, 1), $background); 17 | 18 | $url-str: str-slice($background-str, 0, 3); 19 | $gradient-type: str-slice($background-str, 0, 6); 20 | 21 | @if $url-str == "url" { 22 | $webkit-background: $background; 23 | $spec-background: $background; 24 | } 25 | 26 | @else if $gradient-type == "linear" { 27 | $gradients: _linear-gradient-parser("#{$background}"); 28 | $webkit-background: map-get($gradients, webkit-image); 29 | $spec-background: map-get($gradients, spec-image); 30 | } 31 | 32 | @else if $gradient-type == "radial" { 33 | $gradients: _radial-gradient-parser("#{$background}"); 34 | $webkit-background: map-get($gradients, webkit-image); 35 | $spec-background: map-get($gradients, spec-image); 36 | } 37 | 38 | @else { 39 | $webkit-background: $background; 40 | $spec-background: $background; 41 | } 42 | } 43 | 44 | @else { 45 | $webkit-background: $background; 46 | $spec-background: $background; 47 | } 48 | 49 | $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); 50 | $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); 51 | } 52 | 53 | background: $webkit-backgrounds; 54 | background: $spec-backgrounds; 55 | } 56 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($borders...) { 2 | $webkit-borders: (); 3 | $spec-borders: (); 4 | 5 | @each $border in $borders { 6 | $webkit-border: (); 7 | $spec-border: (); 8 | $border-type: type-of($border); 9 | 10 | @if $border-type == string or list { 11 | $border-str: if($border-type == list, nth($border, 1), $border); 12 | 13 | $url-str: str-slice($border-str, 0, 3); 14 | $gradient-type: str-slice($border-str, 0, 6); 15 | 16 | @if $url-str == "url" { 17 | $webkit-border: $border; 18 | $spec-border: $border; 19 | } 20 | 21 | @else if $gradient-type == "linear" { 22 | $gradients: _linear-gradient-parser("#{$border}"); 23 | $webkit-border: map-get($gradients, webkit-image); 24 | $spec-border: map-get($gradients, spec-image); 25 | } 26 | 27 | @else if $gradient-type == "radial" { 28 | $gradients: _radial-gradient-parser("#{$border}"); 29 | $webkit-border: map-get($gradients, webkit-image); 30 | $spec-border: map-get($gradients, spec-image); 31 | } 32 | 33 | @else { 34 | $webkit-border: $border; 35 | $spec-border: $border; 36 | } 37 | } 38 | 39 | @else { 40 | $webkit-border: $border; 41 | $spec-border: $border; 42 | } 43 | 44 | $webkit-borders: append($webkit-borders, $webkit-border, comma); 45 | $spec-borders: append($spec-borders, $spec-border, comma); 46 | } 47 | 48 | -webkit-border-image: $webkit-borders; 49 | border-image: $spec-borders; 50 | border-style: solid; 51 | } 52 | 53 | //Examples: 54 | // @include border-image(url("image.png")); 55 | // @include border-image(url("image.png") 20 stretch); 56 | // @include border-image(linear-gradient(45deg, orange, yellow)); 57 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 58 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 59 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 60 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Shorthand Border-radius mixins 3 | //************************************************************************// 4 | @mixin border-top-radius($radii) { 5 | @include prefixer(border-top-left-radius, $radii, spec); 6 | @include prefixer(border-top-right-radius, $radii, spec); 7 | } 8 | 9 | @mixin border-bottom-radius($radii) { 10 | @include prefixer(border-bottom-left-radius, $radii, spec); 11 | @include prefixer(border-bottom-right-radius, $radii, spec); 12 | } 13 | 14 | @mixin border-left-radius($radii) { 15 | @include prefixer(border-top-left-radius, $radii, spec); 16 | @include prefixer(border-bottom-left-radius, $radii, spec); 17 | } 18 | 19 | @mixin border-right-radius($radii) { 20 | @include prefixer(border-top-right-radius, $radii, spec); 21 | @include prefixer(border-bottom-right-radius, $radii, spec); 22 | } 23 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin box-sizing ($box) { 2 | // content-box | border-box | inherit 3 | @include prefixer(box-sizing, $box, webkit moz spec); 4 | } 5 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | @mixin placeholder { 2 | $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; 3 | @each $placeholder in $placeholders { 4 | &:#{$placeholder}-placeholder { 5 | @content; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($G1, $G2, 3 | $G3: null, $G4: null, 4 | $G5: null, $G6: null, 5 | $G7: null, $G8: null, 6 | $G9: null, $G10: null, 7 | $pos: null, 8 | $shape-size: null, 9 | $fallback: null) { 10 | 11 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 12 | $G1: nth($data, 1); 13 | $G2: nth($data, 2); 14 | $pos: nth($data, 3); 15 | $shape-size: nth($data, 4); 16 | 17 | $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; 18 | 19 | // Strip deprecated cover/contain for spec 20 | $shape-size-spec: _shape-size-stripper($shape-size); 21 | 22 | // Set $G1 as the default fallback color 23 | $first-color: nth($full, 1); 24 | $fallback-color: nth($first-color, 1); 25 | 26 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 27 | $fallback-color: $fallback; 28 | } 29 | 30 | // Add Commas and spaces 31 | $shape-size: if($shape-size, '#{$shape-size}, ', null); 32 | $pos: if($pos, '#{$pos}, ', null); 33 | $pos-spec: if($pos, 'at #{$pos}', null); 34 | $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 35 | 36 | background-color: $fallback-color; 37 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 38 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 39 | } 40 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all 2s ease-in-out); 3 | // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 | // @include transition-property (transform, opacity); 5 | 6 | @mixin transition ($properties...) { 7 | // Fix for vendor-prefix transform property 8 | $needs-prefixes: false; 9 | $webkit: (); 10 | $moz: (); 11 | $spec: (); 12 | 13 | // Create lists for vendor-prefixed transform 14 | @each $list in $properties { 15 | @if nth($list, 1) == "transform" { 16 | $needs-prefixes: true; 17 | $list1: -webkit-transform; 18 | $list2: -moz-transform; 19 | $list3: (); 20 | 21 | @each $var in $list { 22 | $list3: join($list3, $var); 23 | 24 | @if $var != "transform" { 25 | $list1: join($list1, $var); 26 | $list2: join($list2, $var); 27 | } 28 | } 29 | 30 | $webkit: append($webkit, $list1); 31 | $moz: append($moz, $list2); 32 | $spec: append($spec, $list3); 33 | } 34 | 35 | // Create lists for non-prefixed transition properties 36 | @else { 37 | $webkit: append($webkit, $list, comma); 38 | $moz: append($moz, $list, comma); 39 | $spec: append($spec, $list, comma); 40 | } 41 | } 42 | 43 | @if $needs-prefixes { 44 | -webkit-transition: $webkit; 45 | -moz-transition: $moz; 46 | transition: $spec; 47 | } 48 | @else { 49 | @if length($properties) >= 1 { 50 | @include prefixer(transition, $properties, webkit moz spec); 51 | } 52 | 53 | @else { 54 | $properties: all 0.15s ease-out 0s; 55 | @include prefixer(transition, $properties, webkit moz spec); 56 | } 57 | } 58 | } 59 | 60 | @mixin transition-property ($properties...) { 61 | -webkit-transition-property: transition-property-names($properties, 'webkit'); 62 | -moz-transition-property: transition-property-names($properties, 'moz'); 63 | transition-property: transition-property-names($properties, false); 64 | } 65 | 66 | @mixin transition-duration ($times...) { 67 | @include prefixer(transition-duration, $times, webkit moz spec); 68 | } 69 | 70 | @mixin transition-timing-function ($motions...) { 71 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 72 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 73 | } 74 | 75 | @mixin transition-delay ($times...) { 76 | @include prefixer(transition-delay, $times, webkit moz spec); 77 | } 78 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_assign.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list : (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_color-lightness.scss: -------------------------------------------------------------------------------- 1 | // Programatically determines whether a color is light or dark 2 | // Returns a boolean 3 | // More details here http://robots.thoughtbot.com/closer-look-color-lightness 4 | 5 | @function is-light($hex-color) { 6 | $-local-red: red(rgba($hex-color, 1.0)); 7 | $-local-green: green(rgba($hex-color, 1.0)); 8 | $-local-blue: blue(rgba($hex-color, 1.0)); 9 | 10 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 11 | 12 | @return $-local-lightness > .6; 13 | } 14 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_flex-grid.scss: -------------------------------------------------------------------------------- 1 | // Flexible grid 2 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 5 | @return percentage($width / $container-width); 6 | } 7 | 8 | // Flexible gutter 9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($gutter / $container-width); 12 | } 13 | 14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. 15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each. 16 | // 17 | // The calculation presumes that your column structure will be missing the last gutter: 18 | // 19 | // -- column -- gutter -- column -- gutter -- column 20 | // 21 | // $fg-column: 60px; // Column Width 22 | // $fg-gutter: 25px; // Gutter Width 23 | // $fg-max-columns: 12; // Total Columns For Main Container 24 | // 25 | // div { 26 | // width: flex-grid(4); // returns (315px / 995px) = 31.65829%; 27 | // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; 28 | // 29 | // p { 30 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 31 | // float: left; 32 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; 33 | // } 34 | // 35 | // blockquote { 36 | // float: left; 37 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 38 | // } 39 | // } -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_golden-ratio.scss: -------------------------------------------------------------------------------- 1 | @function golden-ratio($value, $increment) { 2 | @return modular-scale($value, $increment, $golden) 3 | } 4 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_grid-width.scss: -------------------------------------------------------------------------------- 1 | @function grid-width($n) { 2 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 3 | } 4 | 5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. 6 | // 7 | // $gw-column: 100px; // Column Width 8 | // $gw-gutter: 40px; // Gutter Width 9 | // 10 | // div { 11 | // width: grid-width(4); // returns 520px; 12 | // margin-left: $gw-gutter; // returns 40px; 13 | // } 14 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Scaling Variables 2 | $golden: 1.618; 3 | $minor-second: 1.067; 4 | $major-second: 1.125; 5 | $minor-third: 1.2; 6 | $major-third: 1.25; 7 | $perfect-fourth: 1.333; 8 | $augmented-fourth: 1.414; 9 | $perfect-fifth: 1.5; 10 | $minor-sixth: 1.6; 11 | $major-sixth: 1.667; 12 | $minor-seventh: 1.778; 13 | $major-seventh: 1.875; 14 | $octave: 2; 15 | $major-tenth: 2.5; 16 | $major-eleventh: 2.667; 17 | $major-twelfth: 3; 18 | $double-octave: 4; 19 | 20 | @function modular-scale($value, $increment, $ratio) { 21 | $v1: nth($value, 1); 22 | $v2: nth($value, length($value)); 23 | $value: $v1; 24 | 25 | // scale $v2 to just above $v1 26 | @while $v2 > $v1 { 27 | $v2: ($v2 / $ratio); // will be off-by-1 28 | } 29 | @while $v2 < $v1 { 30 | $v2: ($v2 * $ratio); // will fix off-by-1 31 | } 32 | 33 | // check AFTER scaling $v2 to prevent double-counting corner-case 34 | $double-stranded: $v2 > $v1; 35 | 36 | @if $increment > 0 { 37 | @for $i from 1 through $increment { 38 | @if $double-stranded and ($v1 * $ratio) > $v2 { 39 | $value: $v2; 40 | $v2: ($v2 * $ratio); 41 | } @else { 42 | $v1: ($v1 * $ratio); 43 | $value: $v1; 44 | } 45 | } 46 | } 47 | 48 | @if $increment < 0 { 49 | // adjust $v2 to just below $v1 50 | @if $double-stranded { 51 | $v2: ($v2 / $ratio); 52 | } 53 | 54 | @for $i from $increment through -1 { 55 | @if $double-stranded and ($v1 / $ratio) < $v2 { 56 | $value: $v2; 57 | $v2: ($v2 / $ratio); 58 | } @else { 59 | $v1: ($v1 / $ratio); 60 | $value: $v1; 61 | } 62 | } 63 | } 64 | 65 | @return $value; 66 | } 67 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | // Srtips the units from a value. e.g. 12px -> 12 2 | 3 | @function strip-units($val) { 4 | @return ($val / ($val * 0 + 1)); 5 | } 6 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /assets/_sass/bourbon/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | // Convert shorthand to the 4-value syntax 2 | 3 | @function unpack($shorthand) { 4 | @if length($shorthand) == 1 { 5 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 6 | } 7 | @else if length($shorthand) == 2 { 8 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 9 | } 10 | @else if length($shorthand) == 3 { 11 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 12 | } 13 | @else { 14 | @return $shorthand; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; 7 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | @return $number * nth($units, $index); 15 | } 16 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_is-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper for linear-gradient-parser 3 | //************************************************************************// 4 | @function _is-num($char) { 5 | $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; 6 | $index: index($values, $char); 7 | @return if($index, true, false); 8 | } 9 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: _is-num(str-slice($first-val, 0, 0)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 0, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 2 | @each $value in $G1, $G2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $G1: null; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $G1 { 41 | $G1: null; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $G1 { 58 | $G1: null; 59 | } 60 | 61 | @else if $value == $G2 { 62 | $G2: null; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $G1, $G2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ) 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ) 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ) 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ) 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == '-' { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == '.' { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | // Variable settings for /addons/prefixer.scss 2 | $prefix-for-webkit: true !default; 3 | $prefix-for-mozilla: true !default; 4 | $prefix-for-microsoft: true !default; 5 | $prefix-for-opera: true !default; 6 | $prefix-for-spec: true !default; // required for keyframe mixin 7 | -------------------------------------------------------------------------------- /assets/_sass/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /assets/_sass/neat/_neat-helpers.scss: -------------------------------------------------------------------------------- 1 | // Functions 2 | @import "functions/private"; 3 | @import "functions/new-breakpoint"; 4 | 5 | // Settings 6 | @import "settings/grid"; 7 | @import "settings/visual-grid"; 8 | -------------------------------------------------------------------------------- /assets/_sass/neat/_neat.scss: -------------------------------------------------------------------------------- 1 | // Bourbon Neat 1.6.0.pre 2 | // MIT Licensed 3 | // Copyright (c) 2012-2013 thoughtbot, inc. 4 | 5 | // Helpers 6 | @import "neat-helpers"; 7 | 8 | // Grid 9 | @import "grid/private"; 10 | @import "grid/reset"; 11 | @import "grid/grid"; 12 | @import "grid/omega"; 13 | @import "grid/outer-container"; 14 | @import "grid/span-columns"; 15 | @import "grid/row"; 16 | @import "grid/shift"; 17 | @import "grid/pad"; 18 | @import "grid/fill-parent"; 19 | @import "grid/media"; 20 | @import "grid/to-deprecate"; 21 | @import "grid/visual-grid"; 22 | -------------------------------------------------------------------------------- /assets/_sass/neat/functions/_new-breakpoint.scss: -------------------------------------------------------------------------------- 1 | @function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { 2 | 3 | @if length($query) == 1 { 4 | $query: $default-feature nth($query, 1) $total-columns; 5 | } 6 | 7 | @else if length($query) % 2 == 0 { 8 | $query: append($query, $total-columns); 9 | } 10 | 11 | @if not belongs-to($query, $visual-grid-breakpoints) { 12 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; 13 | } 14 | 15 | @return $query; 16 | } 17 | -------------------------------------------------------------------------------- /assets/_sass/neat/functions/_private.scss: -------------------------------------------------------------------------------- 1 | // Checks if a number is even 2 | @function is-even($int) { 3 | @if $int%2 == 0 { 4 | @return true; 5 | } 6 | 7 | @return false; 8 | } 9 | 10 | // Checks if an element belongs to a list 11 | @function belongs-to($tested-item, $list) { 12 | @each $item in $list { 13 | @if $item == $tested-item { 14 | @return true; 15 | } 16 | } 17 | 18 | @return false; 19 | } 20 | 21 | // Contains display value 22 | @function contains-display-value($query) { 23 | @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) { 24 | @return true; 25 | } 26 | 27 | @return false; 28 | } 29 | 30 | // Parses the first argument of span-columns() 31 | @function container-span($span: $span) { 32 | @if length($span) == 3 { 33 | $container-columns: nth($span, 3); 34 | @return $container-columns; 35 | } 36 | 37 | @else if length($span) == 2 { 38 | $container-columns: nth($span, 2); 39 | @return $container-columns; 40 | } 41 | 42 | @else { 43 | @return $grid-columns; 44 | } 45 | } 46 | 47 | @function container-shift($shift: $shift) { 48 | $parent-columns: $grid-columns !global !default; 49 | 50 | @if length($shift) == 3 { 51 | $container-columns: nth($shift, 3); 52 | @return $container-columns; 53 | } 54 | 55 | @else if length($shift) == 2 { 56 | $container-columns: nth($shift, 2); 57 | @return $container-columns; 58 | } 59 | 60 | @else { 61 | @return $parent-columns; 62 | } 63 | } 64 | 65 | // Generates a striped background 66 | @function gradient-stops($grid-columns, $color: $visual-grid-color) { 67 | $transparent: rgba(0,0,0,0); 68 | 69 | $column-width: flex-grid(1, $grid-columns); 70 | $gutter-width: flex-gutter($grid-columns); 71 | $column-offset: $column-width; 72 | 73 | $values: ($transparent 0, $color 0); 74 | 75 | @for $i from 1 to $grid-columns*2 { 76 | @if is-even($i) { 77 | $values: append($values, $transparent $column-offset, comma); 78 | $values: append($values, $color $column-offset, comma); 79 | $column-offset: $column-offset + $column-width; 80 | } 81 | 82 | @else { 83 | $values: append($values, $color $column-offset, comma); 84 | $values: append($values, $transparent $column-offset, comma); 85 | $column-offset: $column-offset + $gutter-width; 86 | } 87 | } 88 | 89 | @return $values; 90 | } 91 | 92 | // Layout direction 93 | @function get-direction($layout, $default) { 94 | $direction: nil; 95 | 96 | @if $layout == LTR or $layout == RTL { 97 | $direction: direction-from-layout($layout); 98 | } @else { 99 | $direction: direction-from-layout($default); 100 | } 101 | 102 | @return $direction; 103 | } 104 | 105 | @function direction-from-layout($layout) { 106 | $direction: nil; 107 | 108 | @if $layout == LTR { 109 | $direction: right; 110 | } @else { 111 | $direction: left; 112 | } 113 | 114 | @return $direction; 115 | } 116 | 117 | @function get-opposite-direction($direction) { 118 | $opposite-direction: left; 119 | 120 | @if $direction == left { 121 | $opposite-direction: right; 122 | } 123 | 124 | @return $opposite-direction; 125 | } 126 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_fill-parent.scss: -------------------------------------------------------------------------------- 1 | @mixin fill-parent() { 2 | width: 100%; 3 | 4 | @if $border-box-sizing == false { 5 | @include box-sizing(border-box); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_grid.scss: -------------------------------------------------------------------------------- 1 | @if $border-box-sizing == true { 2 | * { 3 | @include box-sizing(border-box); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_media.scss: -------------------------------------------------------------------------------- 1 | @mixin media($query:$feature $value $columns, $total-columns: $grid-columns) { 2 | @if length($query) == 1 { 3 | @media screen and ($default-feature: nth($query, 1)) { 4 | $default-grid-columns: $grid-columns; 5 | $grid-columns: $total-columns !global; 6 | @content; 7 | $grid-columns: $default-grid-columns !global; 8 | } 9 | } 10 | 11 | @else { 12 | $loopTo: length($query); 13 | $mediaQuery: 'screen and '; 14 | $default-grid-columns: $grid-columns; 15 | $grid-columns: $total-columns !global; 16 | 17 | @if length($query) % 2 != 0 { 18 | $grid-columns: nth($query, $loopTo) !global; 19 | $loopTo: $loopTo - 1; 20 | } 21 | 22 | $i: 1; 23 | @while $i <= $loopTo { 24 | $mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') '; 25 | 26 | @if ($i + 1) != $loopTo { 27 | $mediaQuery: $mediaQuery + 'and '; 28 | } 29 | 30 | $i: $i + 2; 31 | } 32 | 33 | @media #{$mediaQuery} { 34 | @content; 35 | $grid-columns: $default-grid-columns !global; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_omega.scss: -------------------------------------------------------------------------------- 1 | // Remove last element gutter 2 | @mixin omega($query: block, $direction: default) { 3 | $table: if(belongs-to(table, $query), true, false); 4 | $auto: if(belongs-to(auto, $query), true, false); 5 | 6 | @if $direction != default { 7 | @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead." 8 | } @else { 9 | $direction: get-direction($layout-direction, $default-layout-direction); 10 | } 11 | 12 | @if $table { 13 | @warn "The omega mixin no longer removes padding in table layouts." 14 | } 15 | 16 | @if length($query) == 1 { 17 | @if $auto { 18 | &:last-child { 19 | margin-#{$direction}: 0; 20 | } 21 | } 22 | 23 | @else if contains-display-value($query) and $table == false { 24 | margin-#{$direction}: 0; 25 | } 26 | 27 | @else { 28 | @include nth-child($query, $direction); 29 | } 30 | } 31 | 32 | @else if length($query) == 2 { 33 | @if $auto { 34 | &:last-child { 35 | margin-#{$direction}: 0; 36 | } 37 | } 38 | 39 | @else { 40 | @include nth-child(nth($query, 1), $direction); 41 | } 42 | } 43 | 44 | @else { 45 | @warn "Too many arguments passed to the omega() mixin." 46 | } 47 | } 48 | 49 | @mixin nth-child($query, $direction) { 50 | $opposite-direction: get-opposite-direction($direction); 51 | 52 | &:nth-child(#{$query}) { 53 | margin-#{$direction}: 0; 54 | } 55 | 56 | @if type-of($query) == number { 57 | &:nth-child(#{$query}+1) { 58 | clear: $opposite-direction; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_outer-container.scss: -------------------------------------------------------------------------------- 1 | @mixin outer-container { 2 | @include clearfix; 3 | max-width: $max-width; 4 | margin: { 5 | left: auto; 6 | right: auto; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_pad.scss: -------------------------------------------------------------------------------- 1 | @mixin pad($padding: flex-gutter()) { 2 | $padding-list: null; 3 | @each $value in $padding { 4 | $value: if($value == 'default', flex-gutter(), $value); 5 | $padding-list: join($padding-list, $value); 6 | } 7 | padding: $padding-list; 8 | } 9 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_private.scss: -------------------------------------------------------------------------------- 1 | $parent-columns: $grid-columns !default; 2 | $fg-column: $column; 3 | $fg-gutter: $gutter; 4 | $fg-max-columns: $grid-columns; 5 | $container-display-table: false !default; 6 | $layout-direction: nil !default; 7 | 8 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 9 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($width / $container-width); 12 | } 13 | 14 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 15 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 16 | @return percentage($gutter / $container-width); 17 | } 18 | 19 | @function grid-width($n) { 20 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 21 | } 22 | 23 | @function get-parent-columns($columns) { 24 | @if $columns != $grid-columns { 25 | $parent-columns: $columns !global; 26 | } @else { 27 | $parent-columns: $grid-columns !global; 28 | } 29 | 30 | @return $parent-columns; 31 | } 32 | 33 | @function is-display-table($container-is-display-table, $display) { 34 | $display-table: false; 35 | 36 | @if $container-is-display-table == true { 37 | $display-table: true; 38 | } @else if $display == table { 39 | $display-table: true; 40 | } 41 | 42 | @return $display-table; 43 | } 44 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_reset.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-display { 2 | $container-display-table: false !global; 3 | } 4 | 5 | @mixin reset-layout-direction { 6 | $layout-direction: $default-layout-direction !global; 7 | } 8 | 9 | @mixin reset-all { 10 | @include reset-display; 11 | @include reset-layout-direction; 12 | } 13 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_row.scss: -------------------------------------------------------------------------------- 1 | @mixin row($display: block, $direction: $default-layout-direction) { 2 | @include clearfix; 3 | $layout-direction: $direction !global; 4 | 5 | @if $display == table { 6 | display: table; 7 | @include fill-parent; 8 | table-layout: fixed; 9 | $container-display-table: true !global; 10 | } 11 | 12 | @else { 13 | display: block; 14 | $container-display-table: false !global; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_shift.scss: -------------------------------------------------------------------------------- 1 | @mixin shift($n-columns: 1) { 2 | @include shift-in-context($n-columns); 3 | } 4 | 5 | @mixin shift-in-context($shift: $columns of $container-columns) { 6 | $n-columns: nth($shift, 1); 7 | $parent-columns: container-shift($shift) !global; 8 | 9 | $direction: get-direction($layout-direction, $default-layout-direction); 10 | $opposite-direction: get-opposite-direction($direction); 11 | 12 | margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); 13 | 14 | // Reset nesting context 15 | $parent-columns: $grid-columns !global; 16 | } 17 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_span-columns.scss: -------------------------------------------------------------------------------- 1 | @mixin span-columns($span: $columns of $container-columns, $display: block) { 2 | $columns: nth($span, 1); 3 | $container-columns: container-span($span); 4 | 5 | // Set nesting context (used by shift()) 6 | $parent-columns: get-parent-columns($container-columns) !global; 7 | 8 | $direction: get-direction($layout-direction, $default-layout-direction); 9 | $opposite-direction: get-opposite-direction($direction); 10 | 11 | $display-table: is-display-table($container-display-table, $display); 12 | 13 | @if $display-table { 14 | display: table-cell; 15 | width: percentage($columns / $container-columns); 16 | } @else { 17 | float: #{$opposite-direction}; 18 | 19 | @if $display != no-display { 20 | display: block; 21 | } 22 | 23 | @if $display == collapse { 24 | @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead." 25 | } 26 | 27 | @if $display == collapse or $display == block-collapse { 28 | width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); 29 | 30 | &:last-child { 31 | width: flex-grid($columns, $container-columns); 32 | } 33 | 34 | } @else { 35 | margin-#{$direction}: flex-gutter($container-columns); 36 | width: flex-grid($columns, $container-columns); 37 | 38 | &:last-child { 39 | margin-#{$direction}: 0; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_to-deprecate.scss: -------------------------------------------------------------------------------- 1 | @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { 2 | @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."; 3 | 4 | @if length($query) == 1 { 5 | @media screen and ($default-feature: nth($query, 1)) { 6 | $default-grid-columns: $grid-columns; 7 | $grid-columns: $total-columns; 8 | @content; 9 | $grid-columns: $default-grid-columns; 10 | } 11 | } 12 | 13 | @else if length($query) == 2 { 14 | @media screen and (nth($query, 1): nth($query, 2)) { 15 | $default-grid-columns: $grid-columns; 16 | $grid-columns: $total-columns; 17 | @content; 18 | $grid-columns: $default-grid-columns; 19 | } 20 | } 21 | 22 | @else if length($query) == 3 { 23 | @media screen and (nth($query, 1): nth($query, 2)) { 24 | $default-grid-columns: $grid-columns; 25 | $grid-columns: nth($query, 3); 26 | @content; 27 | $grid-columns: $default-grid-columns; 28 | } 29 | } 30 | 31 | @else if length($query) == 4 { 32 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 33 | $default-grid-columns: $grid-columns; 34 | $grid-columns: $total-columns; 35 | @content; 36 | $grid-columns: $default-grid-columns; 37 | } 38 | } 39 | 40 | @else if length($query) == 5 { 41 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 42 | $default-grid-columns: $grid-columns; 43 | $grid-columns: nth($query, 5); 44 | @content; 45 | $grid-columns: $default-grid-columns; 46 | } 47 | } 48 | 49 | @else { 50 | @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details."; 51 | } 52 | } 53 | 54 | @mixin nth-omega($nth, $display: block, $direction: default) { 55 | @warn "The nth-omega() mixin is deprecated. Please use omega() instead."; 56 | @include omega($nth $display, $direction); 57 | } 58 | -------------------------------------------------------------------------------- /assets/_sass/neat/grid/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @mixin grid-column-gradient($values...) { 2 | background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values); 3 | background-image: -webkit-linear-gradient(left, $values); 4 | background-image: -moz-linear-gradient(left, $values); 5 | background-image: -ms-linear-gradient(left, $values); 6 | background-image: -o-linear-gradient(left, $values); 7 | background-image: unquote("linear-gradient(left, #{$values})"); 8 | } 9 | 10 | @if $visual-grid == true or $visual-grid == yes { 11 | body:before { 12 | content: ''; 13 | display: inline-block; 14 | @include grid-column-gradient(gradient-stops($grid-columns)); 15 | height: 100%; 16 | left: 0; 17 | margin: 0 auto; 18 | max-width: $max-width; 19 | opacity: $visual-grid-opacity; 20 | position: fixed; 21 | right: 0; 22 | width: 100%; 23 | pointer-events: none; 24 | 25 | @if $visual-grid-index == back { 26 | z-index: -1; 27 | } 28 | 29 | @else if $visual-grid-index == front { 30 | z-index: 9999; 31 | } 32 | 33 | @each $breakpoint in $visual-grid-breakpoints { 34 | @if $breakpoint != nil { 35 | @include media($breakpoint) { 36 | @include grid-column-gradient(gradient-stops($grid-columns)); 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /assets/_sass/neat/settings/_grid.scss: -------------------------------------------------------------------------------- 1 | $column: golden-ratio(1em, 3) !default; // Column width 2 | $gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns 3 | $grid-columns: 12 !default; // Total number of columns in the grid 4 | $max-width: em(1088) !default; // Max-width of the outer container 5 | $border-box-sizing: true !default; // Makes all elements have a border-box layout 6 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin 7 | $default-layout-direction: LTR !default; 8 | -------------------------------------------------------------------------------- /assets/_sass/neat/settings/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | $visual-grid: false !default; // Display the base grid 2 | $visual-grid-color: #EEE !default; 3 | $visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front) 4 | $visual-grid-opacity: 0.4 !default; 5 | $visual-grid-breakpoints: () !default; 6 | -------------------------------------------------------------------------------- /assets/_sass/styles.scss: -------------------------------------------------------------------------------- 1 | @import "bourbon/bourbon"; 2 | @import "neat/neat"; 3 | 4 | // Colors 5 | $atlantic_blue: #323A45; // gray-dark 6 | $pacific_blue: #046B99; // primary-alt-darkest 7 | $miami_vice_blue: $pacific_blue; // original 8 | $white: #fff; 9 | $black: #323A45; // gray-dark 10 | $usds-navy: #103c68; 11 | $usds-navy-dark: #122d44; 12 | $usds-navy-light: #577795; 13 | $usds-blue-medium: #064e96; 14 | $usds-blue-bright-dark: #0071bc; 15 | $usds-gray: #5d5d5d; 16 | $usds-gray-dark: #3f3f3f; 17 | 18 | // Fonts 19 | $serif: 'Merriweather', Georgia, serif; 20 | $sans-serif: 'Source Sans Pro', sans-serif; 21 | 22 | // Mobile Breakpoints 23 | $mobile: new-breakpoint(min-width 0px max-width 640px 4); 24 | $slimmer: new-breakpoint(min-width 641px max-width 980px 12); 25 | 26 | @media screen { 27 | body { 28 | background: $white; 29 | font-family: $serif; 30 | margin: 0; 31 | line-height: 1.5em; 32 | } 33 | 34 | body#techfar_landing_page { 35 | background: $atlantic_blue; 36 | } 37 | 38 | a { 39 | color: inherit; 40 | font-family: inherit; 41 | font-weight: inherit; 42 | text-decoration: none; 43 | } 44 | 45 | a.anchor_offset { 46 | display: block; 47 | position: relative; 48 | top: -60px; 49 | visibility: hidden; 50 | } 51 | 52 | a:hover { 53 | text-decoration: underline; 54 | } 55 | 56 | ol, ul { 57 | list-style-type: decimal; 58 | list-style-position: inside; 59 | li { 60 | margin: 1em 0; 61 | color: $black; 62 | } 63 | } 64 | 65 | h1 { 66 | font-size: 52px; 67 | font-weight: 300; 68 | border-bottom: 1px solid $white; 69 | padding-bottom: 0.25em; 70 | margin-bottom: 20px; 71 | line-height: 1.375em; 72 | @include media($mobile){ 73 | font-size: 28px; 74 | } 75 | } 76 | 77 | h2 { 78 | font-family: $serif; 79 | font-size: 30px; 80 | line-height: 1.375em; 81 | font-weight: 300; 82 | } 83 | 84 | h2.display { 85 | font-family: $serif; 86 | font-size: 54px; 87 | line-height: 1.3em; 88 | font-weight: 300; 89 | margin-top: 0; 90 | color: $black; 91 | @include media($mobile) { 92 | font-size: 32px; 93 | } 94 | } 95 | 96 | h3 { 97 | font-family: $serif; 98 | font-size: 20px; 99 | font-weight: 700; 100 | } 101 | 102 | h4 { 103 | font-family: $serif; 104 | font-size: 17px; 105 | font-weight: 700; 106 | line-height: 1.5em; 107 | color: $pacific_blue; 108 | margin-bottom: 0; 109 | } 110 | 111 | h6 { 112 | font-family: $sans-serif; 113 | font-size: 14px; 114 | font-weight: 300; 115 | line-height: 1.5em; 116 | margin-bottom: 15px; 117 | } 118 | 119 | p { 120 | color: $black; 121 | font-weight: 400; 122 | font-size: 17px; 123 | line-height: 2.0em; 124 | } 125 | 126 | .outer_container { 127 | @include outer-container(); 128 | padding: 40px; 129 | 130 | @include media($mobile) { 131 | padding: 20px; 132 | } 133 | } 134 | 135 | .inner_container { 136 | @include shift(1); 137 | @include span-columns(10); 138 | 139 | @include media($mobile) { 140 | @include shift(0); 141 | @include span-columns(4); 142 | } 143 | 144 | @include media($slimmer) { 145 | @include shift(0); 146 | @include span-columns(12); 147 | } 148 | } 149 | 150 | .button { 151 | font-size: 17px; 152 | font-family: $sans-serif; 153 | font-weight: 700; 154 | line-height: 1.5em; 155 | display: inline-block; 156 | margin-top: 40px; 157 | margin-right: 20px; 158 | 159 | a { 160 | display: inline-block; 161 | border-radius: 3px; 162 | padding: 10px 20px; 163 | text-decoration: none; 164 | border: 2px solid $white; 165 | min-width: 172px; 166 | text-align: center; 167 | } 168 | a:hover { 169 | background: $white; 170 | color: $atlantic_blue; 171 | text-decoration: none; 172 | } 173 | @include media($mobile) { 174 | margin-top: 20px; 175 | display: block; 176 | margin-right: 0; 177 | text-align: left; 178 | } 179 | } 180 | 181 | #alpha_tag { 182 | float: right; 183 | background: green; 184 | color: $white; 185 | padding: 10px; 186 | font-family: $sans-serif; 187 | } 188 | 189 | 190 | #introduction { 191 | background: $usds-navy; 192 | color: $white; 193 | padding-bottom: 60px; 194 | 195 | a { 196 | text-decoration: underline; 197 | } 198 | 199 | a:hover { 200 | background: $white; 201 | color: $atlantic_blue; 202 | } 203 | 204 | #usds_logo { 205 | display: inline-block; 206 | img { 207 | max-height: 100%; 208 | max-width: 100%; 209 | width: 150px; 210 | } 211 | } 212 | 213 | #usds_logo:hover { 214 | background: none; 215 | img{ 216 | opacity: 0.9; 217 | } 218 | } 219 | 220 | .button a { 221 | text-decoration: none; 222 | } 223 | 224 | p { 225 | max-width: 700px; 226 | font-family: $serif; 227 | font-size: 20px; 228 | font-weight: 300; 229 | line-height: 2.0em; 230 | margin-top: 40px; 231 | 232 | color: $white; 233 | } 234 | 235 | p.download_links { 236 | font-size: 16px; 237 | } 238 | 239 | @include media($mobile) { 240 | p { 241 | font-size: 16px; 242 | line-height: 24px; 243 | margin-top: 20px; 244 | } 245 | padding-bottom: 20px; 246 | } 247 | } 248 | 249 | #navigation_bar { 250 | visibility: hidden; 251 | display: none; 252 | position: fixed; 253 | width: 100%; 254 | height: 0; 255 | background: $usds-navy; 256 | color: $white; 257 | .outer_container { 258 | padding: 0 40px; 259 | } 260 | 261 | h3 { 262 | padding: 20px 0; 263 | margin-top: 0; 264 | font-weight: 300; 265 | color: $white; 266 | // line-height: 20px; 267 | display: inline-block; 268 | 269 | } 270 | h3:hover { 271 | text-decoration: underline; 272 | } 273 | 274 | ul { 275 | float: right; 276 | display: inline; 277 | padding: 0; 278 | list-style-position: outside; 279 | } 280 | 281 | .active { 282 | a { 283 | background: $usds-blue-bright-dark; 284 | color: $white; 285 | text-decoration: none; 286 | } 287 | } 288 | 289 | li { 290 | display: inline; 291 | margin-left: 5px; 292 | list-style-type: none; 293 | 294 | a { 295 | display: inline-block; 296 | height: 24px; 297 | width: 24px; 298 | line-height: 22px; 299 | text-align: center; 300 | font-family: $serif; 301 | font-weight: lighter; 302 | color: $white; 303 | border: 1px solid $usds-blue-bright-dark; 304 | } 305 | a:hover { 306 | background: $usds-blue-bright-dark; 307 | color: $white; 308 | text-decoration: none; 309 | } 310 | } 311 | 312 | #menu_icon { 313 | display: none; 314 | height: 14px; 315 | width: 16px; 316 | margin-top: 16px; 317 | float: right; 318 | background-image: url('../images/menu_icon.svg'); 319 | background-size: contain; 320 | a { 321 | display: block; 322 | height: 100%; 323 | width: 100%; 324 | } 325 | } 326 | 327 | @include media($mobile) { 328 | ul { 329 | display: none; 330 | } 331 | #menu_icon { 332 | display: inline-block; 333 | } 334 | .outer_container { 335 | padding: 0 20px; 336 | } 337 | h3 { 338 | font-size: 16px; 339 | padding: 16px 0; 340 | line-height: 16px; 341 | } 342 | } 343 | 344 | @include media($slimmer) { 345 | ul { 346 | display: none; 347 | } 348 | #menu_icon { 349 | display: inline-block; 350 | margin-top: 20px; 351 | height: 18px; 352 | width: 20px; 353 | } 354 | } 355 | } 356 | 357 | #navigation_bar.show { 358 | visibility: visible; 359 | display: block; 360 | height: 60px; 361 | 362 | @include media($mobile) { 363 | height: 48px; 364 | visibility: visible; 365 | display: block; 366 | } 367 | } 368 | 369 | #plays_index { 370 | background: $usds-blue-medium; 371 | padding-bottom: 60px; 372 | color: $white; 373 | 374 | h2 { 375 | margin-bottom: 38px; 376 | } 377 | 378 | .columns { 379 | -moz-column-count: 2; 380 | -moz-column-gap: 20px; 381 | -webkit-column-count: 2; 382 | -webkit-column-gap: 20px; 383 | column-count: 2; 384 | column-gap: 20px; 385 | } 386 | 387 | ol { 388 | list-style-position: inside; 389 | padding-left: 0px; 390 | margin-top: 0px; 391 | 392 | a { 393 | vertical-align: top; 394 | color: $white; 395 | margin-top: 0; 396 | display: inline-block; 397 | width: 85%; 398 | } 399 | } 400 | 401 | ol, li { 402 | font-size: 20px; 403 | font-weight: 300; 404 | line-height: 1.5em; 405 | margin: 0; 406 | color: $white; 407 | } 408 | 409 | li { 410 | padding-bottom: 20px; 411 | } 412 | 413 | .button { 414 | a { 415 | color: white; 416 | } 417 | a:hover { 418 | color: $black; 419 | } 420 | } 421 | 422 | @include media($mobile) { 423 | h2 { 424 | font-size: 18px; 425 | margin-bottom: 20px; 426 | } 427 | ol, li { 428 | font-size: 16px; 429 | line-height: 24px; 430 | } 431 | padding-bottom: 20px; 432 | } 433 | 434 | @include media($slimmer) { 435 | .columns { 436 | -moz-column-count: 1; 437 | -moz-column-gap: 0px; 438 | -webkit-column-count: 1; 439 | -webkit-column-gap: 0px; 440 | column-count: 1; 441 | column-gap: 00px; 442 | } 443 | } 444 | 445 | @include media($mobile) { 446 | .columns { 447 | -moz-column-count: 1; 448 | -moz-column-gap: 0px; 449 | -webkit-column-count: 1; 450 | -webkit-column-gap: 0px; 451 | column-count: 1; 452 | column-gap: 00px; 453 | } 454 | } 455 | } 456 | 457 | #plays, #techfar { 458 | h2, h3 { 459 | @include span-columns(8); 460 | } 461 | h3 { 462 | // margin-top: 0px; 463 | color: $atlantic_blue; 464 | } 465 | 466 | h2 { 467 | margin-bottom: 24px; 468 | } 469 | 470 | p { 471 | @include span-columns(9); 472 | } 473 | 474 | ol, ul { 475 | @include span-columns(8); 476 | list-style-position: outside; 477 | padding-left: 25px; 478 | } 479 | 480 | ol { 481 | list-style-image: url("../images/bullet-sq.svg"); 482 | margin-top: 0px; 483 | } 484 | 485 | li { 486 | padding-left: 5px; 487 | font-size: 15px; 488 | } 489 | 490 | ul { 491 | list-style-image: url("../images/bullet-circle.svg"); 492 | } 493 | 494 | a { 495 | color: #0071bc; 496 | text-decoration: underline; 497 | display: inline-block; 498 | } 499 | 500 | a:visited { 501 | color: #4c2c92; 502 | } 503 | 504 | @include media($mobile) { 505 | p { 506 | font-size: 16px; 507 | // line-height: 24px; 508 | } 509 | ol, li { 510 | font-size: 16px; 511 | // line-height: 20px; 512 | } 513 | 514 | h2, h3, p, ol, ul { 515 | @include span-columns(4); 516 | } 517 | } 518 | 519 | @include media($slimmer) { 520 | h2, h3 { 521 | @include span-columns(9); 522 | } 523 | p { 524 | @include span-columns(10); 525 | } 526 | } 527 | } 528 | 529 | #techfar { 530 | em { 531 | font-size: 12px; 532 | // margin-right: 5px; 533 | line-height: 0; 534 | vertical-align: super; 535 | } 536 | h2, h4 { 537 | margin-top: 20px; 538 | } 539 | img { 540 | max-width: 100%; 541 | } 542 | } 543 | } 544 | 545 | @media print { 546 | body { 547 | background: white; 548 | font-family: $serif; 549 | font-weight: lighter; 550 | line-height: 1.5em; 551 | font-size: 12px; 552 | margin-left: 16.5%; 553 | margin-right: 16.5% 554 | } 555 | 556 | #plays_index { 557 | ol { 558 | list-style-type: decimal; 559 | } 560 | a { 561 | text-decoration: none; 562 | } 563 | } 564 | 565 | #navigation_bar { 566 | display: none; 567 | } 568 | 569 | a { 570 | color: $black; 571 | text-decoration: underline; 572 | } 573 | 574 | ol, ul { 575 | width: 80%; 576 | } 577 | 578 | ol { 579 | list-style-type: square; 580 | } 581 | 582 | p { 583 | width: 100%; 584 | } 585 | 586 | h2, h4 { 587 | width: 66%; 588 | } 589 | 590 | h2 { 591 | margin-top: 0px; 592 | } 593 | 594 | h5 { 595 | margin-top: 60px; 596 | margin-bottom: 0px; 597 | } 598 | 599 | .button { 600 | display: none; 601 | } 602 | } 603 | -------------------------------------------------------------------------------- /assets/css/styles.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import "styles"; -------------------------------------------------------------------------------- /assets/images/bullet-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slice 1 4 | Created with Sketch (http://www.bohemiancoding.com/sketch) 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/images/bullet-circle1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slice 1 4 | Created with Sketch (http://www.bohemiancoding.com/sketch) 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/images/bullet-sq.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slice 1 4 | Created with Sketch (http://www.bohemiancoding.com/sketch) 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/images/bullet-sq1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slice 1 4 | Created with Sketch (http://www.bohemiancoding.com/sketch) 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/favicon-16x16.png -------------------------------------------------------------------------------- /assets/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/favicon-32x32.png -------------------------------------------------------------------------------- /assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/favicon.ico -------------------------------------------------------------------------------- /assets/images/menu_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slice 1 4 | Created with Sketch (http://www.bohemiancoding.com/sketch) 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/images/techfar1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/techfar1.jpg -------------------------------------------------------------------------------- /assets/images/techfar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/techfar1.png -------------------------------------------------------------------------------- /assets/images/techfar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/techfar2.png -------------------------------------------------------------------------------- /assets/images/techfar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/techfar3.png -------------------------------------------------------------------------------- /assets/images/techfar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/techfar4.png -------------------------------------------------------------------------------- /assets/images/techfar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/techfar5.png -------------------------------------------------------------------------------- /assets/images/usds-logo-seal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usds/playbook/716deefd0e201e41327e8a6f8bb7b2e132a6d23d/assets/images/usds-logo-seal.png -------------------------------------------------------------------------------- /assets/js/federated-analytics.all.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * v0.1 121011 : First Test Version 3 | * v1.0 121012 : Added Cookie Synchronizing and filtered out Outbound tracking of cross- and sub-domain links 4 | * v1.1 121015 : Changed cross-domain to use setAllowAnchor and fixed problem with some links 5 | * v1.2 121015-2 : Added incoming cross-domain tracking to default _gaq tracker by adding _setAllowLinker and _setAllowAnchor 6 | * v1.3 121015-3 : All Cross-domain Tracking removed 7 | * v1.4 121015-4 : Multiple Search parameters and XDT links tracked as events 8 | * v1.5 121122 : Change to sub-domain level visits (cookies). _DOMReady delays tracking so goes last. ECereto Review. JSHinted 9 | * v1.6 130107 : Added Agency, sub-agency and Cookie timeout variables and functions 10 | * v1.61 130115 : Fix for (elm in ... now for (var elm = 0 Added Agency, sub-agency and Cookie timeout variables and functions 11 | * v1.62 130123 : Using Slots 33, 34, 35 for Page Level Custom Vars 12 | * v1.7 130503 : Single File Version 13 | * v1.71 130708 : Single File s/d Ver and AGENCY/SUB defaulting to hostnames instead of 'unspecified' 14 | * v1.72 130719 : SFS PUAs and exts 15 | */ 16 | /** 17 | * @preserve 18 | * Google Analytics Government Wide Site Usage Measurement Reference:Brian Katz, Cardinal Path 19 | * v1.73 130827 : Final Katz-CP Version. exts, multiple devuas 20 | **/ 21 | 22 | /* 23 | * Begin E-Nor 24 | * v1.74 131022 : Fix for multiple PUA loop 25 | * v1.75 140221 : Added option to use dc.js for demographic data 26 | * v1.76 140514 : Fix for bug in routine triggered by sdor=true. Routine wrote an extra sub-domain cookie in addition to the cross-sub-domain cookie. 27 | */ 28 | 29 | var _gaq=_gaq||[];var _gas=_gas||[];var GSA_CPwrapGA=(function(){var h;var i=document.location.hostname;var d={VERSION:"v1.76 140514 : Fix for subdomain cookie in cross subdomain tracking",SEARCH_PARAMS:"q|querytext|nasaInclude|k|QT",HOST_DOMAIN_OR:i,LEADING_PERIOD:".",GWT_UAID:["UA-33523145-1"],AGENCY:"",VISITOR_TIMEOUT:-1,CAMPAIGN_TIMEOUT:-1,VISIT_TIMEOUT:-1,ANONYMIZE_IP:true,YOUTUBE:true};var k={agency:{key:"Agency",slot:33,scope:3},sub_agency:{key:"Sub-Agency",slot:34,scope:3},version:{key:"Code Ver",slot:35,scope:3}};var j=function(){a();d.HOST_DOMAIN_OR=d.HOST_DOMAIN_OR.replace(/^www\./i,"");var n=e(d.HOST_DOMAIN_OR);d.LEADING_PERIOD=n[1];for(var m=0;m-1){_gaq.push(["_setSessionCookieTimeout",d.VISIT_TIMEOUT*1000*60])}if(d.VISITOR_TIMEOUT>-1){_gaq.push(["_setVisitorCookieTimeout",d.VISITOR_TIMEOUT*1000*60*60*24*30.416667])}if(d.CAMPAIGN_TIMEOUT>-1){_gaq.push(["_setCampaignCookieTimeout",d.CAMPAIGN_TIMEOUT*1000*60*60*24*30.416667])}};var f=function(n){n=n||i;n=n.match(/^(?:https?:\/\/)?([^\/:]+)/)[1];if(n.match(/(\d+\.){3}(\d+)/)||n.search(/\./)==-1){return n}try{if(/\.(gov|mil)$/i.test(n)){n=n.match(/\.([^.]+\.(gov|mil)$)/i)[1]}else{n=n.match(/(([^.\/]+\.[^.\/]{2,3}\.[^.\/]{2})|(([^.\/]+\.)[^.\/]{2,4}))(\/.*)?$/)[1]}}catch(m){}return n.toLowerCase()};var c=function(m){var o=function(p){return undefined==p||"-"==p||""==p};var n=function(t){var q=1,p=0,r,s;if(!o(t)){q=0;for(r=t.length-1;r>=0;r--){s=t.charCodeAt(r);q=(q<<6&268435455)+s+(s<<14);p=q&266338304;q=p!==0?q^p>>21:q}}return q};return n(m)};var e=function(n){var m=document.cookie.match(/__utma=[^.]+/g);var q=[false,""];if(!m){return q}h=c(n);for(var p=0;p0){this["tracker"]=H[0]}}};c.prototype.inArray=function(J,I){if(J&&J.length){for(var H=0;H=0){return}var r=i.document,y=Object.prototype.toString,m=Object.prototype.hasOwnProperty,g=Array.prototype.push,w=Array.prototype.slice,z=String.prototype.trim,E=String.prototype.indexOf,d=r.location.href,B=r.documentElement;function t(){var H=this;H.version="1.10.1";H._accounts={};H._accounts_length=0;H._queue=p;H._default_tracker="_gas1";H.gh={};H._hooks={_addHook:[H._addHook]};H.push(function(){H.gh=new c()})}t.prototype._addHook=function(I,H){if(typeof I==="string"&&typeof H==="function"){if(typeof _gas._hooks[I]==="undefined"){_gas._hooks[I]=[]}_gas._hooks[I].push(H)}return false};function h(H){return H===_gas._default_tracker?"":H+"."}function x(H){if(_gas.debug_mode){try{console.log(H)}catch(I){}}return i._gaq.push(H)}t.prototype._execute=function(){var O=w.call(arguments),R=this,H=O.shift(),M=true,K,P,Q,J,L,S=0;if(typeof H==="function"){return x((function(U,T){return function(){U.call(T)}}(H,R.gh)))}else{if(typeof H==="object"&&H.length>0){P=H.shift();if(E.call(P,".")>=0){J=P.split(".")[0];P=P.split(".")[1]}else{J=e}Q=R._hooks[P];if(Q&&Q.length>0){for(K=0;K0){H=L}}}catch(N){if(P!=="_trackException"){R.push(["_trackException",N])}}}}if(M===false){return 1}if(P==="_setAccount"){for(K in R._accounts){if(R._accounts[K]===H[0]){if(J===e){return 1}}}J=J||"_gas"+String(R._accounts_length+1);if(typeof R._accounts._gas1==="undefined"&&E.call(J,"_gas")!==-1){J="_gas1"}R._accounts[J]=H[0];R._accounts_length+=1;J=h(J);S=x([J+P,H[0]]);R.gh._setDummyTracker();return S}if(P==="_link"||P==="_linkByPost"||P==="_require"||P==="_anonymizeIp"){O=w.call(H);O.unshift(P);return x(O)}var I;if(J&&R._accounts[J]){I=h(J)+P;O=w.call(H);O.unshift(I);return x(O)}if(R._accounts_length>0){for(K in R._accounts){if(m.call(R._accounts,K)){I=h(K)+P;O=w.call(H);O.unshift(I);S+=x(O)}}}else{O=w.call(H);O.unshift(P);return x(O)}return S?1:0}}};t.prototype.push=function(){var H=this;var I=w.call(arguments);for(var J=0;J=1){J={extensions:J}}}}J.category=J.category||"Download";var I="xls,xlsx,doc,docx,ppt,pptx,pdf,txt,zip";I+=",rar,7z,gz,tgz,exe,wma,mov,avi,wmv,mp3,mp4,csv,tsv,mobi,epub,swf";I=I.split(",");J.extensions=J.extensions.concat(I);H._liveEvent("a","mousedown",function(M){var L=this;if(L.href){var K=s.call(H,L.href,J.extensions);if(K){_gas.push(["_trackEvent",J.category,K,L.href])}}});return false};_gas.push(["_addHook","_gasTrackDownloads",k]);_gas.push(["_addHook","_trackDownloads",k]);var q=function(I){if(!this._outboundTracked){this._outboundTracked=true}else{return}var H=this;if(!I){I={}}I.category=I.category||"Outbound";H._liveEvent("a","mousedown",function(M){var J=this;if((J.protocol==="http:"||J.protocol==="https:")&&E.call(J.hostname,r.location.hostname)===-1){var L=(J.pathname+J.search+""),K=E.call(L,"__utm");if(K!==-1){L=L.substring(0,K)}_gas.push(["_trackEvent",I.category,J.hostname,L])}})};_gas.push(["_addHook","_gasTrackOutboundLinks",q]);_gas.push(["_addHook","_trackOutboundLinks",q]);var G=function(H){if(!this._mailtoTracked){this._mailtoTracked=true}else{return}if(!H){H={}}H.category=H.category||"Mailto";this._liveEvent("a","mousedown",function(J){var I=J.target;if(I&&I.href&&I.href.toLowerCase&&E.call(I.href.toLowerCase(),"mailto:")===0){_gas.push(["_trackEvent",H.category,I.href.substr(7)])}});return false};_gas.push(["_addHook","_gasTrackMailto",G]);_gas.push(["_addHook","_trackMailto",G]);var f=[];var o;var l={};function v(K,J){if(l[J]===e||l[J].timeTriggers.length<=0){return false}var I=K.getCurrentTime()/K.getDuration()*100;if(I>=l[J].timeTriggers[0]){var H=l[J].timeTriggers.shift();_gas.push(["_trackEvent",o.category,H+"%",K.getVideoUrl()])}l[J].timer=setTimeout(v,1000,K,J)}function u(I){var H=I.getVideoUrl();if(l[H]&&l[H].timer){v(I,H);clearTimeout(l[H].timer)}}function j(I){if(f&&f.length){var H=I.getVideoUrl();if(l[H]){u(I)}else{l[H]={};l[H].timeTriggers=w.call(f)}l[H].timer=setTimeout(v,1000,I,H)}}function n(H){var I="";switch(H.data){case 0:I="finish";u(H.target);break;case 1:I="play";j(H.target);break;case 2:I="pause";u(H.target);break}if(I){_gas.push(["_trackEvent",o.category,I,H.target["getVideoUrl"]()])}}function A(H){_gas.push(["_trackEvent",o.category,"error ("+H.data+")",H.target["getVideoUrl"]()])}function D(){var M=r.getElementsByTagName("object");var J,N,L;var K=/(https?:\/\/www\.youtube(-nocookie)?\.com[^\/]*).*\/v\/([^&?]+)/;for(var I=0;I-1){if(E.call(L[K].src,"enablejsapi=1")<0){if(I){if(E.call(L[K].src,"?")<0){L[K].src+="?enablejsapi=1"}else{L[K].src+="&enablejsapi=1"}}else{continue}}O.push(L[K])}}if(O.length>0){if(J&&J.length){f=J}i.onYouTubePlayerAPIReady=function(){var S;for(var R=0;R0){_gas.push(_gas._queue.shift())}var a=C("display-advertising");function C(J){var I=r.getElementsByTagName("script");ThisScriptPath=I[I.length-1].src;J=J.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var H="[\\?&]"+J+"=([^&#]*)";var L=new RegExp(H);var K=L.exec(ThisScriptPath);if(K==null){return"Not Set"}else{return decodeURIComponent(K[1].replace(/\+/g," "))}}if(typeof i._gat==="undefined"){(function(){var I=r.createElement("script");I.type="text/javascript";I.async=true;if(a=="true"){I.src=("https:"===r.location.protocol?"https://":"http://")+"stats.g.doubleclick.net/dc.js"}else{I.src=("https:"===r.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js"}var H=r.getElementsByTagName("script")[0];H.parentNode.insertBefore(I,H)}())}})(window);_gas.push(function(){this._DOMReady(function(){try{var a=new GSA_CPwrapGA();if(!document._gsaDelayGA){a.onEveryPage()}}catch(b){try{console.log(b.message);console.log(b.stack.toString())}catch(b){}}})}); 30 | -------------------------------------------------------------------------------- /assets/js/scrollspy.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Bootstrap: scrollspy.js v3.2.0 3 | * http://getbootstrap.com/javascript/#scrollspy 4 | * ======================================================================== 5 | * Copyright 2011-2014 Twitter, Inc. 6 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 7 | * ======================================================================== */ 8 | 9 | 10 | +function ($) { 11 | 'use strict'; 12 | 13 | // SCROLLSPY CLASS DEFINITION 14 | // ========================== 15 | 16 | function ScrollSpy(element, options) { 17 | var process = $.proxy(this.process, this) 18 | 19 | this.$body = $('body') 20 | this.$scrollElement = $(element).is('body') ? $(window) : $(element) 21 | this.options = $.extend({}, ScrollSpy.DEFAULTS, options) 22 | this.selector = (this.options.target || '') + ' .nav li > a' 23 | this.offsets = [] 24 | this.targets = [] 25 | this.activeTarget = null 26 | this.scrollHeight = 0 27 | 28 | this.$scrollElement.on('scroll.bs.scrollspy', process) 29 | this.refresh() 30 | this.process() 31 | } 32 | 33 | ScrollSpy.VERSION = '3.2.0' 34 | 35 | ScrollSpy.DEFAULTS = { 36 | offset: 10 37 | } 38 | 39 | ScrollSpy.prototype.getScrollHeight = function () { 40 | return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight) 41 | } 42 | 43 | ScrollSpy.prototype.refresh = function () { 44 | var offsetMethod = 'offset' 45 | var offsetBase = 0 46 | 47 | if (!$.isWindow(this.$scrollElement[0])) { 48 | offsetMethod = 'position' 49 | offsetBase = this.$scrollElement.scrollTop() 50 | } 51 | 52 | this.offsets = [] 53 | this.targets = [] 54 | this.scrollHeight = this.getScrollHeight() 55 | 56 | var self = this 57 | this.$body 58 | .find(this.selector) 59 | .map(function () { 60 | var $el = $(this) 61 | var href = $el.data('target') || $el.attr('href') 62 | var $href = /^#./.test(href) && $(href) 63 | return ($href 64 | && $href.length 65 | // HACK - allow for invisible targets 66 | // && $href.is(':visible') 67 | && [[$href[offsetMethod]().top + offsetBase, href]]) || null 68 | }) 69 | .sort(function (a, b) { return a[0] - b[0] }) 70 | .each(function () { 71 | self.offsets.push(this[0]) 72 | self.targets.push(this[1]) 73 | }) 74 | } 75 | 76 | ScrollSpy.prototype.process = function () { 77 | var scrollTop = this.$scrollElement.scrollTop() + this.options.offset 78 | var scrollHeight = this.getScrollHeight() 79 | var maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height() 80 | var offsets = this.offsets 81 | var targets = this.targets 82 | var activeTarget = this.activeTarget 83 | var i 84 | 85 | if (this.scrollHeight != scrollHeight) { 86 | this.refresh() 87 | } 88 | 89 | if (scrollTop >= maxScroll) { 90 | return activeTarget != (i = targets[targets.length - 1]) && this.activate(i) 91 | } 92 | 93 | if (activeTarget && scrollTop <= offsets[0]) { 94 | return activeTarget != (i = targets[0]) && this.activate(i) 95 | } 96 | 97 | for (i = offsets.length; i--;) { 98 | activeTarget != targets[i] 99 | && scrollTop >= offsets[i] 100 | && (!offsets[i + 1] || scrollTop <= offsets[i + 1]) 101 | && this.activate(targets[i]) 102 | } 103 | } 104 | 105 | ScrollSpy.prototype.activate = function (target) { 106 | this.activeTarget = target 107 | 108 | $(this.selector) 109 | .parentsUntil(this.options.target, '.active') 110 | .removeClass('active') 111 | 112 | var selector = this.selector + 113 | '[data-target="' + target + '"],' + 114 | this.selector + '[href="' + target + '"]' 115 | 116 | var active = $(selector) 117 | .parents('li') 118 | .addClass('active') 119 | 120 | if (active.parent('.dropdown-menu').length) { 121 | active = active 122 | .closest('li.dropdown') 123 | .addClass('active') 124 | } 125 | 126 | active.trigger('activate.bs.scrollspy') 127 | } 128 | 129 | 130 | // SCROLLSPY PLUGIN DEFINITION 131 | // =========================== 132 | 133 | function Plugin(option) { 134 | return this.each(function () { 135 | var $this = $(this) 136 | var data = $this.data('bs.scrollspy') 137 | var options = typeof option == 'object' && option 138 | 139 | if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options))) 140 | if (typeof option == 'string') data[option]() 141 | }) 142 | } 143 | 144 | var old = $.fn.scrollspy 145 | 146 | $.fn.scrollspy = Plugin 147 | $.fn.scrollspy.Constructor = ScrollSpy 148 | 149 | 150 | // SCROLLSPY NO CONFLICT 151 | // ===================== 152 | 153 | $.fn.scrollspy.noConflict = function () { 154 | $.fn.scrollspy = old 155 | return this 156 | } 157 | 158 | 159 | // SCROLLSPY DATA-API 160 | // ================== 161 | 162 | $(window).on('load.bs.scrollspy.data-api', function () { 163 | $('[data-spy="scroll"]').each(function () { 164 | var $spy = $(this) 165 | Plugin.call($spy, $spy.data()) 166 | }) 167 | }) 168 | 169 | }(jQuery); 170 | -------------------------------------------------------------------------------- /assets/js/site.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | var $navBar = $('#navigation_bar'); 4 | var showNavBarMinimum = $('#introduction').height() - $navBar.height(); 5 | 6 | var wasNavBarVisible = false; 7 | // change nav bar visibility on scroll 8 | function onScroll() { 9 | var isNavBarVisible = window.pageYOffset >= showNavBarMinimum; 10 | if ( isNavBarVisible !== wasNavBarVisible ) { 11 | $navBar.toggleClass('show'); 12 | wasNavBarVisible = isNavBarVisible; 13 | } 14 | } 15 | // initial check 16 | onScroll(); 17 | 18 | // https://davidwalsh.name/function-debounce 19 | function debounce( fn, wait ) { 20 | var timeout; 21 | return function() { 22 | var _this = this; 23 | var args = arguments; 24 | var later = function() { 25 | timeout = null; 26 | fn.apply( _this, args ); 27 | }; 28 | clearTimeout( timeout ); 29 | timeout = setTimeout( later, wait || 100 ); 30 | }; 31 | } 32 | 33 | $(window).scroll( debounce( onScroll, 30 ) ); 34 | 35 | $('body').scrollspy({ target: '#navigation_bar' }); 36 | 37 | // Scroll Animations 38 | $('a[href*=#]:not([href=#])').click(function() { 39 | if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { 40 | var target = $(this.hash); 41 | target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 42 | if (target.length) { 43 | $('html,body').animate({ 44 | scrollTop: target.offset().top 45 | }, 1000); 46 | return true; 47 | } 48 | } 49 | }); 50 | 51 | }); 52 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | The Digital Services Playbook — from the U.S. Digital Service 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 34 | 35 |
36 |
37 |
38 | 39 | {% capture introduction %}{% include introduction.md %}{% endcapture %} 40 | {{ introduction | markdownify }} 41 |
42 | See the plays 43 |
44 |
45 | Help improve this content 46 |
47 |
48 |
49 |
50 | 51 |
52 |
53 |
54 | 55 |

Digital Service Plays

56 |
57 |
    58 | {% for play in site.plays %} 59 |
  1. {{ play.title }}
    2. 60 | {% endfor %} 61 |
62 |
63 |
64 | In detail 65 |
66 |
67 |
68 |
69 | 70 |
71 | {% for play in site.plays %} 72 |
73 | 74 |
PLAY {{ play.play_number }}
75 |

{{ play.title }}

76 | 77 | {{ play.output }} 78 |
79 | {% endfor %} 80 |
81 | 82 | 83 | 84 | 85 | 86 | {% include google-analytics.html %} 87 | 88 | 89 | -------------------------------------------------------------------------------- /pages/techFAR_upcase.md: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /techFAR/ 3 | layout: techfar 4 | --- 5 | 6 | 7 | # The TechFAR Handbook 8 | 9 | The TechFAR Handbook highlights the flexibilities in the Federal Acquisition Regulation (FAR) that can help agencies implement [“plays” from the Digital Services Playbook](https://playbook.cio.gov/ "The Digital Services Playbook") that would be accomplished with acquisition support — with a particular focus on how to use contractors to support an iterative, customer-driven software development process, as is routinely done in the private sector. 10 | -------------------------------------------------------------------------------- /pages/techfar.md: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /techfar/ 3 | layout: techfar 4 | --- 5 | 6 | # The TechFAR Handbook 7 | 8 | The TechFAR Handbook highlights the flexibilities in the Federal Acquisition Regulation (FAR) that can help agencies implement [“plays” from the Digital Services Playbook](https://playbook.cio.gov/ "The Digital Services Playbook") that would be accomplished with acquisition support — with a particular focus on how to use contractors to support an iterative, customer-driven software development process, as is routinely done in the private sector. 9 | -------------------------------------------------------------------------------- /plays.json: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | {{ site.plays | map:"to_liquid" | jsonify }} 5 | --------------------------------------------------------------------------------