├── .gitignore ├── .npmignore ├── .pa11yci ├── .scss-lint.yml ├── .travis.yml ├── CHANGELOG.md ├── INSTALL.md ├── LICENSE ├── README.md ├── design-toolkit.gemspec ├── docs ├── Gemfile ├── Gemfile.lock ├── _config.yml ├── _includes │ ├── blog-nav.html │ ├── examples-nav.html │ ├── latest-version.html │ ├── left-nav.html │ ├── newSvg.html │ ├── resource-nav.html │ └── section-nav.html ├── _layouts │ ├── default.html │ └── home.html ├── _plugins │ └── toc_filter.rb ├── _resources │ ├── Regions.md │ ├── Skip Links.md │ ├── development-checklist.md │ ├── glossary.md │ ├── nypl-index.md │ └── resources.md ├── _sections │ ├── about.md │ ├── buttons.html │ ├── color-a11y.html │ ├── color.md │ ├── forms.html │ ├── icons │ │ ├── 3dots.icon.svg │ │ ├── 3dots.vert.icon.svg │ │ ├── add.circle.icon.svg │ │ ├── add.circle.svg │ │ ├── add.icon.svg │ │ ├── add.reverse.icon.svg │ │ ├── add.reverse.svg │ │ ├── add.svg │ │ ├── apple.icon.svg │ │ ├── applied.icon.svg │ │ ├── applied.svg │ │ ├── apply.icon.svg │ │ ├── arrow.icon.svg │ │ ├── audio.icon.svg │ │ ├── blueray.icon.svg │ │ ├── cd.icon.svg │ │ ├── check.circle.icon.svg │ │ ├── check.circle.rev.icon.svg │ │ ├── check.circle.svg │ │ ├── check.icon.svg │ │ ├── check.rev.icon.svg │ │ ├── check.svg │ │ ├── circle.wedge.rev.icon.svg │ │ ├── circle.wedge.svg │ │ ├── close.cancel.rev.icon.svg │ │ ├── close.cancel.svg │ │ ├── close.circle.icon.svg │ │ ├── dash.circle.icon.svg │ │ ├── dash.icon.svg │ │ ├── dash.rev.icon.svg │ │ ├── disc.icon.svg │ │ ├── e-reader.icon.svg │ │ ├── envelope.icon.svg │ │ ├── equal.icon.svg │ │ ├── exclaim.icon.svg │ │ ├── facebook.icon.svg │ │ ├── fastforward.icon.svg │ │ ├── file.icon.svg │ │ ├── filter.icon.svg │ │ ├── grid.icon.svg │ │ ├── hidden.icon.svg │ │ ├── instagram.icon.svg │ │ ├── libcard.icon.svg │ │ ├── list.icon.svg │ │ ├── loggedin.icon.svg │ │ ├── login.icon.svg │ │ ├── logout.icon.svg │ │ ├── marker.empty.icon.svg │ │ ├── marker.icon.svg │ │ ├── marker.smalldot.icon.svg │ │ ├── menu.burger.icon.svg │ │ ├── neoclassic.icon.svg │ │ ├── nypl.lockup.logo.svg │ │ ├── nypl.reverse.logo.svg │ │ ├── openbook.icon.svg │ │ ├── pencil.icon.svg │ │ ├── play.icon.svg │ │ ├── pushpin.icon.svg │ │ ├── pyramid.icon.svg │ │ ├── radioButton.active.icon.svg │ │ ├── radioButton.inactive.icon.svg │ │ ├── reset.icon.svg │ │ ├── search.circle.icon.svg │ │ ├── search.icon.svg │ │ ├── settings.icon.svg │ │ ├── soundCloud.icon.svg │ │ ├── tag.icon.svg │ │ ├── text.icon.svg │ │ ├── trash.icon.svg │ │ ├── tumblr.icon.svg │ │ ├── twitter.icon.svg │ │ ├── typesize.icon.svg │ │ ├── unapplied.icon.svg │ │ ├── unapplied.svg │ │ ├── visible.icon.svg │ │ ├── wedge.circle.icon.svg │ │ ├── wedge.circle.rev.icon.svg │ │ ├── wedge.icon.svg │ │ └── youtube.icon.svg │ ├── layout.html │ ├── microformats.html │ ├── svg-index.html │ ├── tables.html │ └── visible-focus.md ├── css │ ├── docs.css │ ├── example-search-styles.css │ ├── example-search-styles.v2.css │ └── example-styles.css ├── discovery-holds.html ├── discovery-home.html ├── discovery-item.html ├── discovery-request.html ├── discovery-search.html ├── edd-request-form.html ├── example.html ├── example_card.html ├── example_events.html ├── header_login.html ├── header_logout.html ├── img │ ├── lion.svg │ ├── nypl-rev.svg │ └── nypl.svg ├── index.md ├── js │ ├── googlecode.css │ ├── header.js │ ├── highlight.pack.js │ ├── holds.js │ └── toc.js ├── request-confirmation.html └── svg │ ├── apply.icon.svg │ ├── check.solo.svg │ ├── dash.icon.svg │ ├── filter.icon.3.svg │ ├── filter.icon.svg │ ├── reset.icon.svg │ ├── wedge.left.icon.svg │ ├── wedge.right.icon.svg │ └── x.close.icon.svg ├── eyeglassConfig.js ├── gulpfile.js ├── index.js ├── lib ├── design-toolkit.rb └── design-toolkit │ ├── engine.rb │ └── version.rb ├── package-lock.json ├── package.json └── sass ├── _buttons.scss ├── _colors.scss ├── _css3.scss ├── _footer.scss ├── _forms.scss ├── _general-mixins.scss ├── _grid-ie.scss ├── _grid.scss ├── _header.scss ├── _holds-table.scss ├── _icons.scss ├── _measurements.scss ├── _media-queries.scss ├── _microformats.scss ├── _modal-container.scss ├── _modal.scss ├── _normalize.scss ├── _nypl-normalize.scss ├── _omni-search.scss ├── _pager.scss ├── _tables-results.scss ├── _toolkit.scss ├── _typography.scss ├── docs.scss ├── example-search-styles.scss ├── example-search-styles.v2.scss └── example-styles.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # OS generated files # 2 | ###################### 3 | .DS_Store 4 | .DS_Store? 5 | 6 | #InDesign Temp Files 7 | *.idlk 8 | 9 | #ignore the sass cache... 10 | .sass-cache 11 | 12 | #ignore .map files too... 13 | *.map 14 | 15 | _site 16 | 17 | npm-debug.log 18 | node_modules/ 19 | 20 | .vscode 21 | 22 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs 2 | lib 3 | -------------------------------------------------------------------------------- /.pa11yci: -------------------------------------------------------------------------------- 1 | { 2 | "defaults": { 3 | "timeout": 15000 4 | }, 5 | "urls": [ 6 | "http://127.0.0.1:4000/design-toolkit/discovery-item.html", 7 | "http://127.0.0.1:4000/design-toolkit/edd-request-form.html", 8 | "http://127.0.0.1:4000/design-toolkit/discovery-home.html", 9 | "http://127.0.0.1:4000/design-toolkit/discovery-request.html", 10 | "http://127.0.0.1:4000/design-toolkit/request-confirmation.html", 11 | "http://127.0.0.1:4000/design-toolkit/discovery-search.html" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.scss-lint.yml: -------------------------------------------------------------------------------- 1 | severity: error 2 | 3 | linters: 4 | 5 | BorderZero: 6 | enabled: true 7 | convention: zero 8 | 9 | BemDepth: 10 | enabled: true 11 | 12 | DeclarationOrder: 13 | enabled: false 14 | 15 | ExtendDirective: 16 | enabled: true 17 | 18 | LeadingZero: 19 | enabled: true 20 | style: include_zero 21 | 22 | NameFormat: 23 | enabled: true 24 | 25 | NestingDepth: 26 | enabled: true 27 | max_depth: 5 #because collapsible header (refactor that) 28 | 29 | SelectorDepth: 30 | enabled: true 31 | max_depth: 4 #because collapsible header (refactor that) 32 | 33 | PrivateNamingConvention: 34 | enabled: true 35 | prefix: _ 36 | 37 | PropertySortOrder: 38 | enabled: false 39 | 40 | PropertyUnits: 41 | global: ['rem', '%', 's', 'vw', 'em'] # Allow relative units globally 42 | properties: 43 | line-height: [] # No units allowed 44 | margin: ['rem', '%'] 45 | 46 | QualifyingElement: 47 | enabled: false 48 | 49 | SelectorFormat: 50 | enabled: true 51 | convention: hyphenated_BEM 52 | class_convention: ^(?!js-).* 53 | class_convention_explanation: should not be written in the form js-* 54 | 55 | SingleLinePerProperty: 56 | enabled: true 57 | allow_single_line_rule_sets: false 58 | 59 | StringQuotes: 60 | enabled: true 61 | style: double_quotes 62 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | # NYPL Travis Travis 2 | 3 | language: node_js 4 | node_js: 5 | - 6 6 | install: 7 | - gem install jekyll bundler 8 | - npm install 9 | before_script: 10 | - cd ./docs 11 | - bundle install 12 | - bundle exec jekyll serve --detach 13 | script: npm run test-pa11y 14 | cache: 15 | directories: 16 | - "node_modules" 17 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### Change Log 2 | 3 | ###v0.1.38 4 | - Remove global styling of `a:focus` background color to `$nypl-white` 5 | 6 | ## v0.1.37 7 | - Updated node and npm engines, as well as node-sass version. 8 | - Added an `.npmignore` file to not publish unnecessary folders. 9 | 10 | ## v0.1.36 11 | - Focus ring updates 12 | - Tighter list layout 13 | - Now we can use gulp to watch & compile css, gulp is _not_ a requirement for development. See docs for more details 14 | 15 | ### v0.1.35 16 | - fixes #270 w/ a micro soft vendor prefix 17 | - fixes #268 increase type size to 0.9rem (14.4px) for help text 18 | - fixes #269 changes the foreground color to a darker green 19 | 20 | ### v0.1.34 21 | - fixes #265 & #266 22 | - added flex box for better layout of the returned results module 23 | 24 | ### v0.1.33 25 | - fixing #260 26 | - better checkbox alignment 27 | - removed `em` from `texarea`'s help text 28 | - typo 29 | 30 | ### v0.1.32 31 | - Layout fixes: #256 32 | - alignment to the current header logo see issue #256 33 | 34 | ### v0.1.31 35 | - Added in `textarea` pattern; default ("normal"), successful input, and an error state (Addresses: #254) 36 | - Added a "Successful" submission message pattern. Kin to the "You have errors" pattern found on form submissions (Fixes: #252) 37 | - Updated the README.md to be a little more helpful and explicit in instructing on how to install and run this application. 38 | - Bump Version package.json 39 | 40 | 41 | ### v0.1.30 42 | - Setting `whitespace: normal` for buttons and layout changes for Discovery search results. 43 | 44 | ### v0.1.29 45 | - added the ux/visual design index. and index of projects that will eventually fall under sway of the toolkit. 46 | 47 | ### v0.1.28 48 | - Finally getting the toolkit's ````svg```` house in order 49 | - Icons added and the generally made to be consistent from one to the next 50 | - fixed up some other redundant code issue 51 | - fixed #246 52 | 53 | ### v0.1.27 54 | - fixes #236 z-index missing from modal's close Button 55 | 56 | ### v0.1.26.3 57 | - improvements to filtering layout 58 | - added documentation covering Modals 59 | - created a generic modal pattern, separate from the filtering functions 60 | 61 | ### v0.1.26.2 62 | - CSS Columns added to filter modal 63 | 64 | ### v0.1.26.1 65 | - release candidate 66 | - Simple Modal for filtering. styles and js 67 | 68 | ### v0.1.26 69 | - TK Look and feel changes 70 | - New Changelog 71 | - Checkbox Updates 72 | - Button patterns added 73 | - `pa11y` automated testing w/ travis added 74 | - Installation instructions added & Updated 75 | 76 | ### v0.1.25 77 | - fixes: #158 78 | 79 | ### v0.1.24.2 80 | - Fixes: #214, #213, #210, #209, #208, #206, #192, #196 81 | - Fixes: [DIS-118](https://jira.nypl.org/browse/DIS-118), [DIS-119](https://jira.nypl.org/browse/DIS-119) 82 | 83 | ### v0.1.23 84 | - Fixes: #201, #199, #195, #194, #183, #181, #180 85 | - Fixes: discover #692, #679, #676, #675, #674, #673 86 | 87 | 88 | ### v0.1.22 89 | - Design Patterns added 90 | - home page example page 91 | * created new breakpoint for special classes 92 | * created new component for image/text lockups 93 | - holds form example page 94 | - electronic document delivery example 95 | - simplified code 96 | - 97 | 98 | ### v0.1.21 99 | - Updates to design patterns for search results 100 | - added inline table for requests on single items 101 | - sorting button Updated 102 | - new pagination 103 | - Updates Toolkit docs 104 | - the above design patterns codified in the docs 105 | 106 | ### v0.1.20 107 | - Updates to design patterns 108 | - added traditional pager for search results 109 | - comments to `sass` to enhance readbility 110 | 111 | 112 | ### v0.1.19 113 | - adding new visual design 114 | - adding new design pattern 115 | - new example page 116 | 117 | ### v0.1.18 118 | - added additional nypl colors 119 | - added nypl color accessibiliy index page 120 | 121 | ### v0.1.17 122 | - Better accessibiliy in breadcrumbs. 123 | - Fixes: #153. 124 | 125 | ### v0.1.16 126 | - New omnibox field order 127 | - Fixes: #150, #156. 128 | 129 | ### v0.1.15 130 | - Bundle for Discovery Beta. 131 | - New collapsible field. 132 | - Added research item holds mockup. 133 | - Fixes: #121, #122, #123, #125, #128, #130, #132, #133, #134, #135, #137, #139, #141, #143, #145. 134 | 135 | ### v0.1.14 136 | - Better item detail page 137 | - Fixes: #104, #106, #107, #108, #111, #116, #119. 138 | 139 | ### v0.1.13 140 | - Improved search results. 141 | - Improved item page. 142 | - Added design statement. 143 | - Searchable facets should default to open but close with JS. 144 | - Sorter docs complete. 145 | - Fixes: #76, #89, #87, #82, #94, #97, #100. 146 | 147 | ### v0.1.12 148 | - Searchable facets now collapsible (#75) 149 | - Omni search spinner example added. 150 | - Added design of discovery homepage. 151 | - Revisiting the “Start over” pattern in a better, Github-inspired way. (#85) 152 | - Plus fixes issue #74. 153 | 154 | ### v0.1.11 155 | - Crankin' it up to eleven! 156 | - Now with spinner fields! (#67) 157 | - Now with search results microformat. (#57) 158 | - Added green state to terms checkbox. 159 | - Fixed more minor stuff and issue #62 and also PRs: #64 #68 #69 #70 #71 #72 #73 #77 (and moar). 160 | 161 | ### v0.1.10 162 | - Various fixes including: #59, #61. 163 | 164 | ### v0.1.9 165 | - Added name field and docs. 166 | - Applying `1rem` value to inputs to avoid overrides. 167 | - Added some keyboard shortcuts to Sorting example. 168 | 169 | ### v0.1.8 170 | - Form validation examples (including JS). 171 | - Search results documentation. 172 | - Some `aria-live` support included. 173 | 174 | ### v0.1.7 175 | - Font settings mixin. 176 | 177 | ### v0.1.6 178 | - Big refactor so that normalize, header, and footer can be loaded separately from the general toolkit. 179 | - Removed font-based icons. 180 | 181 | ### v0.1.5 182 | - Added error states in text fields. 183 | - Discovery results improvements. 184 | 185 | ### v0.1.4 186 | - Minor fixes including: #43, #47, #48. 187 | 188 | ### v0.1.3 189 | - Removed invocation of SVG file. 190 | - Updated `node-sass`. 191 | 192 | ### v0.1.2 193 | - Many new classes and documentation. 194 | - Jekyll-based docs. 195 | 196 | ### v0.1.1 197 | - Using namespace-based classes. 198 | 199 | ### v0.1.0 200 | - Published on NPM. 201 | -------------------------------------------------------------------------------- /INSTALL.md: -------------------------------------------------------------------------------- 1 | # Installing the toolkit 2 | 3 | You can install the toolkit using NPM and as a Ruby gem. See below for instructions on each method. 4 | Additionally, If you are contributing to the Toolkit you will need follow the commands outlined below. 5 | 1. [Node](#node) 6 | 2. [Ruby](#ruby) 7 | 3. [Accessiblity Testing w/ pa11y](#pa11y) 8 | 9 | ## Installing with npm and using a Node-based asset pipeline 10 | 11 | 1. Add nypl-toolkit as a dependency: 12 | 13 | ```bash 14 | npm install --save @nypl/design-toolkit 15 | ``` 16 | 17 | 2. If you’re using [Eyeglass](https://www.npmjs.com/package/eyeglass), skip to Step 3. Otherwise, you’ll need to add nypl-toolkit to your node-sass `includePaths` option. `require("@nypl/design-toolkit").includePaths` is an array of directories that you should pass to node-sass. How you do this depends on how node-sass is integrated into your project. 18 | 19 | ##### Webpack 1.x Example 20 | 21 | ```javascript 22 | const ROOT_PATH = path.resolve(__dirname); 23 | // Assign the sassPaths 24 | const sassPaths = require('@nypl/design-toolkit').includePaths.map((sassPath) => 25 | `includePaths[]=${sassPath}` 26 | ).join('&'); 27 | 28 | // In the `module.exports` object in `webpack.config.js` 29 | // Using the ExtractText Plugin - typically when building for production 30 | module.exports = { 31 | // ... 32 | plugins: [ 33 | new ExtractTextPlugin('styles.css'), 34 | // ... 35 | ], 36 | module: { 37 | loaders: [ 38 | { 39 | test: /\.scss$/, 40 | include: path.resolve(ROOT_PATH, 'src'), 41 | loader: ExtractTextPlugin.extract(`css?sourceMap!sass?sourceMap&${sassPaths}`), 42 | }, 43 | ], 44 | }, 45 | }; 46 | 47 | // Using the SASS loader - typically with the webpack dev server 48 | module.exports = { 49 | // ... 50 | module: { 51 | loaders: [ 52 | { 53 | test: /\.scss?$/, 54 | loader: `style!css!sass?${sassPaths}`, 55 | include: path.resolve(ROOT_PATH, 'src'), 56 | }, 57 | ], 58 | }, 59 | }; 60 | ``` 61 | 62 | ##### Webpack 2.x Example (Tested with 2.7.x) 63 | 64 | ```javascript 65 | const ROOT_PATH = path.resolve(__dirname); 66 | // Assign the sassPaths 67 | const sassPaths = require('@nypl/design-toolkit').includePaths 68 | .map((sassPath) => sassPath).join('&'); 69 | const loaders = [ 70 | { 71 | loader: 'css-loader', 72 | options: { 73 | sourceMap: true, 74 | }, 75 | }, 76 | { 77 | loader: 'sass-loader', 78 | options: { 79 | sourceMap: true, 80 | includePaths: sassPaths, 81 | }, 82 | }, 83 | ]; 84 | 85 | // In the `module.exports` object in `webpack.config.js` 86 | // Using the ExtractText Plugin - typically when building for production 87 | module.exports = { 88 | // ... 89 | plugins: [ 90 | new ExtractTextPlugin('styles.css'), 91 | // ... 92 | ], 93 | module: { 94 | rules: [ 95 | { 96 | test: /\.scss$/, 97 | include: path.resolve(ROOT_PATH, 'src'), 98 | use: ExtractTextPlugin.extract({ 99 | fallback: 'style-loader', 100 | use: loaders, 101 | }), 102 | }, 103 | ], 104 | }, 105 | }; 106 | 107 | // Using the SASS loader - typically with the webpack dev server 108 | module.exports = { 109 | // ... 110 | module: { 111 | rules: [ 112 | { 113 | test: /\.scss?$/, 114 | use: [ 115 | 'style-loader', 116 | 'css-loader', 117 | `sass-loader?includePaths=${sassPaths}`, 118 | ], 119 | include: path.resolve(ROOT_PATH, 'src'), 120 | }, 121 | ], 122 | }, 123 | }; 124 | ``` 125 | 126 | 3. Import the NYPL Toolkit SASS library into your Sass files: 127 | 128 | ```scss 129 | @import "toolkit"; 130 | ``` 131 | 132 | 4. If you also need the header or footer styles, add those: 133 | 134 | ```scss 135 | @import "header"; 136 | @import "footer"; 137 | ``` 138 | 139 | 5. You can also load the normalization file to remove any browser or other colliding styles (must be the first import): 140 | 141 | ```scss 142 | @import "nypl-normalize"; 143 | ``` 144 | 145 | ## Installing as a Ruby gem 146 | 147 | This instructions are mainly for Rails-based apps but should also cover other Ruby-based applications. Please let us know if it doesn't by opening an issue. 148 | 149 | 1. In your `Gemfile` you need to add the `design-toolkit` gem: 150 | 151 | ````ruby 152 | # loading toolkit from the main repo 153 | gem 'design-toolkit', :git => 'git@github.com:NYPL/design-toolkit.git' 154 | ```` 155 | 156 | Ensure that the `sass-rails` gem is present - it is added to new Rails applications by default. 157 | 158 | 2. Stop your server if it is running. 159 | 160 | 3. Run `bundle install` 161 | 162 | 4. Import the toolkit styles to your stylesheets. For example, in the default `app/assets/stylesheets/application.scss`: 163 | 164 | ````scss 165 | @import "toolkit"; 166 | ```` 167 | 168 | Avoid using the `*= require_self`, `*= require_tree .`, and `*= require` statements or your stylesheets will not be able to access the mixins or variables properly. 169 | 170 | 5. If you also need the header or footer styles, add those: 171 | 172 | ```scss 173 | @import "header"; 174 | @import "footer"; 175 | ``` 176 | 177 | 6. You can also load the normalization file to remove any browser or other colliding styles (must be the first import): 178 | 179 | ```scss 180 | @import "nypl-normalize"; 181 | ``` 182 | 183 | **Important:** Make sure the file has `.scss` extension (or `.sass` for Sass syntax). 184 | 185 | ## Accessiblity Testing with pa11y 186 | `pa11y` tests are running against the set of example page URLs (see `.pa11yci` for the complete list) . For example, pa11y is calling `http://127.0.0.1:4000/design-toolkit/discovery-item.html` and running its tests on that URL, not the Toolkit Documentation itself. Testing should be run locally before committing to your your branch. 187 | 188 | 1. If you haven't already run the install steps from the [README.md](README.md) please do so before proceeding. 189 | 2. `cd` to the `docs/` folder 190 | 3. run this command: `bundle exec jekyll serve` to run the server locally 191 | 4. run this command: `npm run test-pa11y` to run the accessiblity test 192 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 The New York Public Library 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/NYPL/design-toolkit.svg?branch=master)](https://travis-ci.org/NYPL/design-toolkit) 2 | [![Stories in Ready](https://badge.waffle.io/NYPL/design-toolkit.png?label=ready&title=Ready)](https://waffle.io/NYPL/design-toolkit?utm_source=badge) 3 | # NYPL Digital Design Toolkit 4 | Design toolkit (SASS) for the NYPL Digital team 5 | 6 | ## Version: 0.1.38 7 | 8 | ## [View documentation](http://nypl.github.io/design-toolkit/) 9 | 10 | ## Viewing documentation locally 11 | ### Setting up Jekyll 12 | 1. Install [Jekyll](https://jekyllrb.com/) Enter `gem install jekyll bundler` in your terminal. 13 | 2. Change directories to the `docs/` folder. 14 | 3. Run `bundle install` to install necessary gems. 15 | 4. Run `bundle exec jekyll serve` to compile and watch the site as well as start a local server. Or just run `jekyll serve`. 16 | 5. Navigate your favorite internet browser to http://127.0.0.1:4000/design-toolkit/ 17 | 18 | ### Compiling SCSS to CSS with Gulp or SASS CLI 19 | 1. To view, edit and complie `sass` to `css`: 20 | 21 | a. For `gulp`: Make sure you have [Node.js](http://nodejs.org/) installed and up to date. From the root of the project run `npm i`. This will install the `gulp` dependencies. 22 | - Once `gulp` is installed, from the root, run `gulp`. This will compile your `scss` files to `css` and place them in the correct directory. 23 | - You can choose to run `gulp watch`, this command will actively watch the correct directory and complie files on save. 24 | 25 | b. Alternately you can run / compile `sass` directly (no Gulp required), via its CLI. 26 | - From the root of the project run: `sass --watch sass:css/docs`. 27 | 28 | 2. Have a milkshake. 🥛 29 | 30 | ## [Install the toolkit in your application](INSTALL.md) 31 | 32 | ## [View Change Log](CHANGELOG.md) 33 | 34 | ## License 35 | 36 | See [LICENSE](LICENSE) -------------------------------------------------------------------------------- /design-toolkit.gemspec: -------------------------------------------------------------------------------- 1 | lib = File.expand_path('../lib', __FILE__) 2 | $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) 3 | require 'design-toolkit/version' 4 | 5 | Gem::Specification.new do |s| 6 | s.name = 'design-toolkit' 7 | s.version = Toolkit::VERSION 8 | s.date = '2017-06-02' 9 | s.summary = "NYPL Design Toolkit" 10 | s.description = "Design toolkit (CSS/SASS) for the NYPL Digital team" 11 | s.authors = ["Mauricio Giraldo Arteaga"] 12 | s.email = 'mauriciogiraldo@nypl.org' 13 | s.files = `git ls-files`.split("\n") 14 | s.homepage = 'https://github.com/NYPL/design-toolkit/' 15 | s.license = 'MIT' 16 | 17 | s.add_runtime_dependency 'sass', '~> 3.3', '>= 3.3.4' 18 | end 19 | -------------------------------------------------------------------------------- /docs/Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | # Hello! This is where you manage which Jekyll version is used to run. 4 | # When you want to use a different version, change it below, save the 5 | # file and run `bundle install`. Run Jekyll with `bundle exec`, like so: 6 | # 7 | # bundle exec jekyll serve 8 | # 9 | # This will help ensure the proper Jekyll version is running. 10 | # Happy Jekylling! 11 | # gem "jekyll", "3.4.0" 12 | 13 | # This is the default theme for new Jekyll sites. You may change this to anything you like. 14 | gem "minima", "~> 2.0" 15 | 16 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and 17 | # uncomment the line below. To upgrade, run `bundle update github-pages`. 18 | gem "github-pages", group: :jekyll_plugins 19 | 20 | # If you have any plugins, put them here! 21 | group :jekyll_plugins do 22 | gem "jekyll-feed", "~> 0.6" 23 | end 24 | 25 | # Windows does not include zoneinfo files, so bundle the tzinfo-data gem 26 | gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 27 | # Windows polling issue fix 28 | gem 'wdm', '>= 0.1.0' if Gem.win_platform? 29 | -------------------------------------------------------------------------------- /docs/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (4.2.7) 5 | i18n (~> 0.7) 6 | json (~> 1.7, >= 1.7.7) 7 | minitest (~> 5.1) 8 | thread_safe (~> 0.3, >= 0.3.4) 9 | tzinfo (~> 1.1) 10 | addressable (2.5.0) 11 | public_suffix (~> 2.0, >= 2.0.2) 12 | coffee-script (2.4.1) 13 | coffee-script-source 14 | execjs 15 | coffee-script-source (1.12.2) 16 | colorator (1.1.0) 17 | ethon (0.10.1) 18 | ffi (>= 1.3.0) 19 | execjs (2.7.0) 20 | faraday (0.11.0) 21 | multipart-post (>= 1.2, < 3) 22 | ffi (1.9.18) 23 | ffi (1.9.18-x64-mingw32) 24 | forwardable-extended (2.6.0) 25 | gemoji (3.0.0) 26 | github-pages (129) 27 | activesupport (= 4.2.7) 28 | github-pages-health-check (= 1.3.3) 29 | jekyll (= 3.4.3) 30 | jekyll-avatar (= 0.4.2) 31 | jekyll-coffeescript (= 1.0.1) 32 | jekyll-default-layout (= 0.1.4) 33 | jekyll-feed (= 0.9.1) 34 | jekyll-gist (= 1.4.0) 35 | jekyll-github-metadata (= 2.3.1) 36 | jekyll-mentions (= 1.2.0) 37 | jekyll-optional-front-matter (= 0.1.2) 38 | jekyll-paginate (= 1.1.0) 39 | jekyll-readme-index (= 0.0.4) 40 | jekyll-redirect-from (= 0.12.1) 41 | jekyll-relative-links (= 0.3.0) 42 | jekyll-sass-converter (= 1.5.0) 43 | jekyll-seo-tag (= 2.1.0) 44 | jekyll-sitemap (= 1.0.0) 45 | jekyll-swiss (= 0.4.0) 46 | jekyll-theme-architect (= 0.0.3) 47 | jekyll-theme-cayman (= 0.0.3) 48 | jekyll-theme-dinky (= 0.0.3) 49 | jekyll-theme-hacker (= 0.0.3) 50 | jekyll-theme-leap-day (= 0.0.3) 51 | jekyll-theme-merlot (= 0.0.3) 52 | jekyll-theme-midnight (= 0.0.3) 53 | jekyll-theme-minimal (= 0.0.3) 54 | jekyll-theme-modernist (= 0.0.3) 55 | jekyll-theme-primer (= 0.1.7) 56 | jekyll-theme-slate (= 0.0.3) 57 | jekyll-theme-tactile (= 0.0.3) 58 | jekyll-theme-time-machine (= 0.0.3) 59 | jekyll-titles-from-headings (= 0.1.4) 60 | jemoji (= 0.8.0) 61 | kramdown (= 1.13.2) 62 | liquid (= 3.0.6) 63 | listen (= 3.0.6) 64 | mercenary (~> 0.3) 65 | minima (= 2.0.0) 66 | nokogiri (= 1.6.8.1) 67 | rouge (= 1.11.1) 68 | terminal-table (~> 1.4) 69 | github-pages-health-check (1.3.3) 70 | addressable (~> 2.3) 71 | net-dns (~> 0.8) 72 | octokit (~> 4.0) 73 | public_suffix (~> 2.0) 74 | typhoeus (~> 0.7) 75 | html-pipeline (2.5.0) 76 | activesupport (>= 2) 77 | nokogiri (>= 1.4) 78 | i18n (0.8.1) 79 | jekyll (3.4.3) 80 | addressable (~> 2.4) 81 | colorator (~> 1.0) 82 | jekyll-sass-converter (~> 1.0) 83 | jekyll-watch (~> 1.1) 84 | kramdown (~> 1.3) 85 | liquid (~> 3.0) 86 | mercenary (~> 0.3.3) 87 | pathutil (~> 0.9) 88 | rouge (~> 1.7) 89 | safe_yaml (~> 1.0) 90 | jekyll-avatar (0.4.2) 91 | jekyll (~> 3.0) 92 | jekyll-coffeescript (1.0.1) 93 | coffee-script (~> 2.2) 94 | jekyll-default-layout (0.1.4) 95 | jekyll (~> 3.0) 96 | jekyll-feed (0.9.1) 97 | jekyll (~> 3.3) 98 | jekyll-gist (1.4.0) 99 | octokit (~> 4.2) 100 | jekyll-github-metadata (2.3.1) 101 | jekyll (~> 3.1) 102 | octokit (~> 4.0, != 4.4.0) 103 | jekyll-mentions (1.2.0) 104 | activesupport (~> 4.0) 105 | html-pipeline (~> 2.3) 106 | jekyll (~> 3.0) 107 | jekyll-optional-front-matter (0.1.2) 108 | jekyll (~> 3.0) 109 | jekyll-paginate (1.1.0) 110 | jekyll-readme-index (0.0.4) 111 | jekyll (~> 3.0) 112 | jekyll-redirect-from (0.12.1) 113 | jekyll (~> 3.3) 114 | jekyll-relative-links (0.3.0) 115 | jekyll (~> 3.3) 116 | jekyll-sass-converter (1.5.0) 117 | sass (~> 3.4) 118 | jekyll-seo-tag (2.1.0) 119 | jekyll (~> 3.3) 120 | jekyll-sitemap (1.0.0) 121 | jekyll (~> 3.3) 122 | jekyll-swiss (0.4.0) 123 | jekyll-theme-architect (0.0.3) 124 | jekyll (~> 3.3) 125 | jekyll-theme-cayman (0.0.3) 126 | jekyll (~> 3.3) 127 | jekyll-theme-dinky (0.0.3) 128 | jekyll (~> 3.3) 129 | jekyll-theme-hacker (0.0.3) 130 | jekyll (~> 3.3) 131 | jekyll-theme-leap-day (0.0.3) 132 | jekyll (~> 3.3) 133 | jekyll-theme-merlot (0.0.3) 134 | jekyll (~> 3.3) 135 | jekyll-theme-midnight (0.0.3) 136 | jekyll (~> 3.3) 137 | jekyll-theme-minimal (0.0.3) 138 | jekyll (~> 3.3) 139 | jekyll-theme-modernist (0.0.3) 140 | jekyll (~> 3.3) 141 | jekyll-theme-primer (0.1.7) 142 | jekyll (~> 3.3) 143 | jekyll-theme-slate (0.0.3) 144 | jekyll (~> 3.3) 145 | jekyll-theme-tactile (0.0.3) 146 | jekyll (~> 3.3) 147 | jekyll-theme-time-machine (0.0.3) 148 | jekyll (~> 3.3) 149 | jekyll-titles-from-headings (0.1.4) 150 | jekyll (~> 3.3) 151 | jekyll-watch (1.5.0) 152 | listen (~> 3.0, < 3.1) 153 | jemoji (0.8.0) 154 | activesupport (~> 4.0) 155 | gemoji (~> 3.0) 156 | html-pipeline (~> 2.2) 157 | jekyll (>= 3.0) 158 | json (1.8.6) 159 | kramdown (1.13.2) 160 | liquid (3.0.6) 161 | listen (3.0.6) 162 | rb-fsevent (>= 0.9.3) 163 | rb-inotify (>= 0.9.7) 164 | mercenary (0.3.6) 165 | mini_portile2 (2.1.0) 166 | minima (2.0.0) 167 | minitest (5.10.1) 168 | multipart-post (2.0.0) 169 | net-dns (0.8.0) 170 | nokogiri (1.6.8.1) 171 | mini_portile2 (~> 2.1.0) 172 | nokogiri (1.6.8.1-x64-mingw32) 173 | mini_portile2 (~> 2.1.0) 174 | octokit (4.6.2) 175 | sawyer (~> 0.8.0, >= 0.5.3) 176 | pathutil (0.14.0) 177 | forwardable-extended (~> 2.6) 178 | public_suffix (2.0.5) 179 | rb-fsevent (0.9.8) 180 | rb-inotify (0.9.8) 181 | ffi (>= 0.5.0) 182 | rouge (1.11.1) 183 | safe_yaml (1.0.4) 184 | sass (3.4.23) 185 | sawyer (0.8.1) 186 | addressable (>= 2.3.5, < 2.6) 187 | faraday (~> 0.8, < 1.0) 188 | terminal-table (1.7.3) 189 | unicode-display_width (~> 1.1.1) 190 | thread_safe (0.3.6) 191 | typhoeus (0.8.0) 192 | ethon (>= 0.8.0) 193 | tzinfo (1.2.3) 194 | thread_safe (~> 0.1) 195 | tzinfo-data (1.2017.2) 196 | tzinfo (>= 1.0.0) 197 | unicode-display_width (1.1.3) 198 | 199 | PLATFORMS 200 | ruby 201 | x64-mingw32 202 | 203 | DEPENDENCIES 204 | github-pages 205 | jekyll-feed (~> 0.6) 206 | minima (~> 2.0) 207 | tzinfo-data 208 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | baseurl: "/design-toolkit" 2 | 3 | defaults: 4 | - 5 | scope: 6 | path: "" 7 | values: 8 | layout: default 9 | 10 | collections: 11 | sections: 12 | output: true 13 | resources: 14 | output: true 15 | blogs: 16 | output: true 17 | 18 | exclude: 19 | - Gemfile 20 | - README.md 21 | 22 | #custom variables 23 | current-version: 0.1.36 24 | -------------------------------------------------------------------------------- /docs/_includes/blog-nav.html: -------------------------------------------------------------------------------- 1 |

Blogs

2 | 7 | -------------------------------------------------------------------------------- /docs/_includes/examples-nav.html: -------------------------------------------------------------------------------- 1 |

Examples

2 | 10 | 11 | View code on Github 12 | -------------------------------------------------------------------------------- /docs/_includes/latest-version.html: -------------------------------------------------------------------------------- 1 | v0.1.26.3 2 | -------------------------------------------------------------------------------- /docs/_includes/left-nav.html: -------------------------------------------------------------------------------- 1 | 2 | {% include section-nav.html %} 3 | {% include resource-nav.html %} 4 | 5 | {% include examples-nav.html %} 6 | -------------------------------------------------------------------------------- /docs/_includes/newSvg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

+++ {{ include.icon.title }} +++

4 |

{{ svg-meta.usage }}

5 |
6 | Example 7 | 8 | 9 | {{ svg-meta.jekyll-template }} 10 |
11 | 12 | 
13 | 
14 |     {{ svg-meta.scss-example.class }} {
15 |     {{ svg-meta.scss-example.include }}
16 |     }
17 |
18 | 

19 | 
20 | 
21 |
22 | -------------------------------------------------------------------------------- /docs/_includes/resource-nav.html: -------------------------------------------------------------------------------- 1 |

Resources

2 | 7 | -------------------------------------------------------------------------------- /docs/_includes/section-nav.html: -------------------------------------------------------------------------------- 1 |

NYPL Design Toolkit

2 | 7 | -------------------------------------------------------------------------------- /docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | NYPL Design toolkit 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | You are here: 22 | 26 |

NYPL Design Toolkit

Version: {{ site.current-version }} 27 |
28 |
29 |
30 |
31 | {% include left-nav.html %} 32 |
33 |
34 |

{{ page.title }}

35 |
36 | {{ content }} 37 |
38 |
39 |
40 | 45 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /docs/_layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NYPL Design toolkit 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | You are here: 18 | 21 |

NYPL Design Toolkit

Version: {{ site.current-version }} 22 |
23 |
24 |
25 |
26 | {% include left-nav.html %} 27 |
28 |
29 | {{ content }} 30 |
31 |
32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/_plugins/toc_filter.rb: -------------------------------------------------------------------------------- 1 | module TocFilter 2 | def toc(input) 3 | output = "' 14 | output 15 | end 16 | end 17 | Liquid::Template.register_filter(TocFilter) -------------------------------------------------------------------------------- /docs/_resources/Regions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Landmark roles & Regions 3 | description: Documentation and resources around landmarks & regions 4 | --- 5 | ### Regions 6 | Regions are the basic building blocks of a page. WCAG 2.1 [defines regions](https://www.w3.org/TR/WCAG21/#dfn-regions) as "perceivable, programmatically determined section of content." Examples of a region are a page's header or footer. Different regions classify the different uses and functions of a page. Similar to headings, regions programmatically represent the organization of a page, which is often visually conveyed as well. 7 | 8 | Regions should block out large areas of the page. Because regions can be used for browsing a page at a top level, too many regions, say 15, can counter that. Remember Regions are only one of the ways to organize a page. For example, a complex page with a lot of different content in the main region may be further organized with headings. 9 | 10 | All content on the page should be included in a region. If content is not included in a region, it may be missed by an AT user skimming the page by region. 11 | 12 | Users of Assistive Technology can navigate by regions using shortcuts. They may browse through all the regions of the page or navigate directly to one in particular. For instance, a user may use the "main" region to skip through repeated information in the header. When navigating through a page, a screenreader will announce changes between regions with the type of regions and the region name (if added). 13 | 14 | ### Skip links 15 | The `main` region is generally the target of a skip link. While some Assistive Technology affords browsing by region, we include a standard skip link at the top of all pages to ensure that all users can skip repeated content. 16 | 17 | ### Regions 18 | HTML5 introduced sectioning region elements which map to ARIA landmark roles. NYPL continues to use HTML and corresponding, ARIA roles together but will eventually do away with use of ARIA roles as recommended. 19 | 20 | ### Labeling Conventions 21 | Regions can be labeled using an `aria-label` or `aria-labeledby`. (Use `aria-labeledby` to associate existing text on the page, otherwise use aria label.) Some single use regions, like main, do not need a label. However, when there are multiple regions of a type, they should each always be labeled with a unique and descriptive name. Labels can also be applied to make clear the content of a landmark such as an aside. 22 | 23 | Note, a screenreader will announce the label and announce the type of region. For instance, a nav region named "secondary navigation" would be announced "Secondary navigation navigation region". To prevent repetition do not include "Region" in the region label. 24 | #### NYPL Label Patterns 25 | ##### Navigation Regions 26 | * Secondary: In some current Drupal templates page orders, there is a subnavigation between the banner/header and the main content. On desktop, secondary navigation is anchored to the left of the screen and in mobile, secondary navigation is contained in an expandable menu. 27 | "Secondary" is the label for these subnavs. 28 | * Pagnation: Nav regions for pagination should have the label "Pagination". 29 | 30 | | HTML5 | Aria Role | Notes | 31 | | :------------- |:-------------| :----- | 32 | | `aside`| `complementary`|Used for content related or supplemental to the main content of the page, but not integral. For instance, we've used this for a region following the main region in page order with the heading "Related blogs" and links to blog posts which may be of interest.| 33 | | `footer`| `contentinfo` (if nested under `body` element)|| 34 | | `form`| `form` | Must be named with one of labeling techniques | 35 | | `header`| `banner` (if nested under `body` element)| | 36 | | `main` | `main`| | 37 | | `nav`| `navigation`| Often multiple navs on the page so best practice is to have labels. | 38 | | `section`| `region` if has label ||| 39 | 40 | ### Resources 41 | 42 | * [Aria Landmark Regions spec](https://www.w3.org/TR/wai-aria-practices/#aria_landmark) 43 | * [Aria Landmark Examples](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/navigation.html) 44 | * [Aria Breadcrumb example](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html) 45 | -------------------------------------------------------------------------------- /docs/_resources/Skip Links.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Skip Links 3 | description: Documentation and resources around skip links 4 | --- 5 | ## Draft page 6 | This page is a draft. 7 | 8 | ## Skip Links 9 | The purpose of a skip link is to provide users to skip repeated content. The purpose of a Skip to main content link is to let users skip repeated header and navigation regions to navigate directly to the unique content of a page. 10 | The skip link is one way in which we fulfill success criteria 2.4.1 Bypass Blocks (Level A). Success criteria 2.4.1 Bypass Blocks requires: 11 | >A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. 12 | 13 | This criterion is to save the time of users by reducing the time spent wading through repeated content, particularly for users of assistive technology such as alternate keyboard interface, screen magnifiers, and screen readers. 14 | 15 | Some users of assistive technology also navigate segments of the page using landmarks, which include main. This does not replace the Skip to Main Content link. 16 | 17 | Most core websites and apps use the NYPL Global header to implement and configure a skip to main content link. 18 | 19 | ### Main 20 | The `main` Landmark region is generally the target of a skip link. While some Assistive Technology affords browsing by region, we include a standard skip link at the top of all pages to ensure that all users can skip repeated content. 21 | 22 | ## Skip Link Pattern 23 | This Skip Link pattern should be true for all viewports. It should be the default skip nav of a page with a properly configured global header. If a page does not use a global header, this is the recommendation for a skip to main content functionality. 24 | 25 | * The Skip to Main content link is the first element in the page order 26 | * The Skip to Main content link is in the tab order 27 | * On focus, the skip link(s) are visible 28 | * When not in focus, the skip link(s) are not visible 29 | * When not in focus the skip link(s) are still available to screen readers 30 | * If there are multiple Skip links, the Skip to Main link is the first in the order 31 | * The text “Skip to main content” is the main link text for the link with target to main section of the page 32 | * The text of the skip links is rendered in sentence or capital case. It is not rendered in all caps which can cause AT to read out text letter by letter. 33 | * Skip links are organized in a nav element with role=”navigation” and a descriptive aria-label. 34 | * If there are multiple skip links, they are organized as an unordered list. 35 | * The second skip link is “Click to learn about accessibility at the library” with target https://www.nypl.org/accessibility 36 | 37 | 38 | ## Resources 39 | 40 | * [W3C article Understanding SC 2.4.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html) 41 | * NYPL Universal header repo & Documentation 42 | -------------------------------------------------------------------------------- /docs/_resources/glossary.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Glossary 3 | description: Glossary of various terms, tools, and technologies relating to the NYPL Design Toolkit. 4 | --- 5 | 6 | ### Accessibility Working Group 7 | The digital department’s accessibility working group is open to all members of the digital department. It convenes monthly to foster knowledge exchange and collaboration. 8 | * [Running meeting minutes](https://docs.google.com/document/d/15dmnEikuegYyQrlA_dvpAc6qe4Grx7XD9w9YtCq-vS0/edit). 9 | 10 | ### Andrew Heiskell 11 | The [Andrew Heiskell Braille and Talking Book Library](https://www.nypl.org/locations/heiskell) is a branch library which 12 | provides talking books and magazines and braille for people who are blind, visually impaired, or are otherwise physically unable to read standard print. The library serves residents who live in New York City and Long Island and is regional library for the [NLS](https://nypl.github.io/design-toolkit/resources/glossary.html#nls). 13 | 14 | For more information on the history of the Andrew Heiskell branch and the services offered there, visit the [About Page](https://www.nypl.org/about/locations/heiskell). 15 | 16 | ### ARIA 17 | ARIA labels are used to create Accessible Rich Internet Applications (ARIA). For example, if you have a search page where search results change dynamically, the aria-live and aria-relevant labels can alert the user of a screen reader that content on the page has changed. Visit the [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/) documentation for clear applications of these tags in widgets, landmark regions, and more. 18 | 19 | ### Bard 20 | Braille and Audio Download service for active Talking Book patrons registered with an NLS network library. 21 | [For more FAQs](https://www.nypl.org/node/83979). 22 | 23 | ### Bookshare 24 | 25 | ### National Library Service for the Blind and Physically Handicapped (NLS) 26 | [NLS](https://www.loc.gov/nls/). provides braille and audio materials to eligible borrowers across the United States. Material is distributed through the mail from network libraries. NYPL's Andrew Heiskell branch is a network library serving NYC, Long Island, and greater New York. 27 | 28 | ### klas 29 | A portion of the Andrew Heiskell collection is served through a separate discovery layer called [Klas](https://webopac.klas.com/ny1aopac/). 30 | 31 | ### Section 508 32 | 33 | 34 | 35 | ### VPATs 36 | Voluntary Product Accessibility Templates (VPATS) document a product's conformance and interpretation of accessibility standards; in the case of NYPL, these standards are WCAG 2.0 AA and Section 508 standards. They can be used as a rubric for evaluating products during development, generating issues to resolve compliance conflicts, and documenting any subjective decisions made. For example, see [Standard 3.1.2 in the Maps by Decade VPAT](https://docs.google.com/document/d/1xHhy6qQfZhWq-KktV__cWSfCnPQtTe0fhapS_Ka2HWs/edit). Product teams are responsible for maintaining VPATs. 37 | 38 | ### WCAG 2.0 39 | The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) is a [global standard](https://www.w3.org/TR/WCAG20/) for web accessibility created by the Web Accessibility Initiative (WAI) of W3C. 40 | 41 | Twelve guidelines are arranged by the standard’s four principles: [Perceivable, Operable, Operable, Robust](https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head). Three levels of conformance are judged by success criteria. The library strives for compliance with level AA. 42 | 43 | -------------------------------------------------------------------------------- /docs/_resources/nypl-index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: NYPL User Experience & Visual Design Project Index 3 | description: A project to corral and organize past, present and future design projects at the New York Public Library. 4 | --- 5 | 6 | **Note:** Many of these links lead to Google Drive folders. In order to see them you must be inside the NYPL organization and will need to request permission to view and /or edit them. 7 | 8 | ### Accessibilty 9 | A spread sheet of accessibility tools 10 | * [Accessibilty Toolset >>](https://docs.google.com/a/nypl.org/spreadsheets/d/1WhV-AJ6Tb6xF7BxI1RBU0f93KqwV1XlymL6Z4jSykEc/edit?usp=sharing) 11 | 12 | ### Account 13 | Work dedicated to user accounts: 14 | * [NYPL User Account Project >>](https://drive.google.com/open?id=0B6GgKeOxL8IeRWhCU3RSVW5LTzA) 15 | * [Account Login and Registration (2015) >>](https://drive.google.com/open?id=0B6GgKeOxL8IefjlwTkJYUmxFMnR1RVROMU5jMEFYdXNrQk00RUo1eXFOTlBwVzZrTERBR2s) 16 | * [Login-Logout in Header Dropdown (2016-2017) >>](https://drive.google.com/open?id=0ByFzLyCjDJzWMDhUR1lRNlpNeUU) 17 | * [Get a Library Card (2017) >>](https://drive.google.com/open?id=0ByFzLyCjDJzWWi1UTXhpS092amc) 18 | * [Research and Circ Item Holds View (2017) >>](https://drive.google.com/open?id=0ByFzLyCjDJzWRDRkLXRTb0tDZTg) 19 | * [Mobile Barcode (2017) >>](https://drive.google.com/open?id=0ByFzLyCjDJzWUUpKVUpHTm1KWWM) 20 | 21 | ### Staff Picks & Book Lists 22 | A variety of librarian driven book lists 23 | * [Book Lists Design Work >>](https://drive.google.com/drive/folders/0B_L4KDeJ_XcoZkw0ak9WMTF0bDQ?usp=sharing) 24 | * [NYPL Book Lists >>](https://www.nypl.org/books-music-dvds/recommendations/lists/nypl_mid_manhattan/) 25 | * [Best Books 2017 wireframe >>](https://app.moqups.com/courtneylmcgee/UWrYrdtSFF/edit/page/a366d3e87) 26 | * [Best Books Teens 2017 >>](https://www.nypl.org/books-music-dvds/recommendations/best-books/ya) 27 | * [Best Books Childrens 2017 >>](https://www.nypl.org/books-music-dvds/recommendations/best-books/childrens) 28 | * [Staff Picks >>](https://drive.google.com/drive/folders/0B_L4KDeJ_XcoRHl3QWVELW5rbFU?usp=sharing) 29 | 30 | ### Browse New Arrivals 31 | * [Browse New Arrivals](http://new-arrivals.nypl.org/) 32 | 33 | ### Discovery (aka: ReCAP) 34 | * [Initial Discovery work from first & second teams >>](https://nypl-discovery.github.io/discovery-designs/) 35 | * [UX & Design Files >>](https://drive.google.com/drive/folders/0B2LQIUUuUDJdNTdPaDYxSTBENEU?usp=sharing) 36 | * [http://discovery.nypl.org >>](http://discovery.nypl.org/research/collections/shared-collection-catalog/) 37 | 38 | ### End of Year Fundraising 2017 39 | * Example: [nypl.org/books-music-dvds >>](https://www.nypl.org/books-music-dvds) (12.1.2017) 40 | * [Wireframe >>](https://app.moqups.com/courtneylmcgee/yIW1Hti5DS/share) 41 | 42 | ### Iconography 43 | * [NYPL Iconographix >>](https://drive.google.com/drive/folders/0B_L4KDeJ_XcoOVptcnl6OGM3b0U?usp=sharing) _SVG & Adobe Illustrator files_ 44 | * [DGX SVG Icons >>](https://nypl.github.io/dgx-svg-icons/) 45 | 46 | ### MTA / Subway Library 47 | [Project Files >>](https://drive.google.com/drive/folders/0B5uAYbtOQBxGNFUySWNaUkc4WXc?usp=sharing) 48 | 49 | ### NYPL Search Beta 50 | [Search Beta >>](https://www.nypl.org/searchbeta/cactus/) 51 | 52 | ### Second Story 53 | * [Final Concept >>](https://drive.google.com/drive/folders/0B6GgKeOxL8IefnNQeG9JckNMMHZCdExUSUNDX2QyZHIxMWI0UGJkaEk0UWpDUkNJMFNtMEk?usp=sharing) 54 | * [NYPL Home Page >>](https://drive.google.com/drive/folders/0B_L4KDeJ_XcoS1g1QTZFM3h1Q2c?usp=sharing) 55 | * [NYPL Landing Pages >>](https://drive.google.com/drive/folders/0B_L4KDeJ_XcoQzIwZUVJZXJPX00?usp=sharing) 56 | * Beta Blogs (2015-2016) 57 | * [Static Files >>](https://drive.google.com/drive/folders/0B_L4KDeJ_XcoMTlLVi05YmV3d1E?usp=sharing) 58 | * [Production Beta Blog Landing Page >>](https://www.nypl.org/blog/beta/) 59 | * [Example Beta Blog Post >>](https://www.nypl.org/blog/beta/2017/11/21/librarian-podcast-ep-67) 60 | * Grid Examples (Static ````.png```` files) 61 | * [3 Column Mobile](https://drive.google.com/open?id=1AsNOpo5OvXcXBznY85x-DtQG0vQNMTr4) 62 | * [Tablet](https://drive.google.com/open?id=1xkJ3z_zsF5ZEowCQzOBZRZeWt7_KWjg7) 63 | * [9 Column Desktop](https://drive.google.com/open?id=1ACIRJl-zPXBjPHT3KqyoKFUsRHEmaxpc) 64 | 65 | ### SimplyE 66 | * _Git repo w/ static Sketch files_: [List & Lane Manager Admin UI >>](https://github.com/ricardoom/SE-Admin-UI) 67 | * [OPDS Web Catalog >>](http://opds-browser-demo.herokuapp.com/collection/http%3A%2F%2Fcirculation.librarysimplified.org/) 68 | * [OPDS Web Catalog (Client) Repo >>](https://github.com/NYPL-Simplified/opds-web-client) 69 | * [Circulation Alpha >>](http://circulation.alpha.librarysimplified.org/admin/) 70 | 71 | ### Style Guides 72 | * [NYPL Base Github pages >>](http://nypl.github.io/NYPLBase/styleguide/index.html) (_Powers most NYPL Drupal pages_) 73 | * [NYPL Base Github repo >>](https://github.com/NYPL/NYPLBase) 74 | * Styles based on [Second Storey Work](#Second-Storey) 75 | * [Static Second Story Styleguide](http://nypl.github.io/dgx-styleguide/) 76 | * [Ethyl Web Standards >>](http://ethyl.nypl.org/) 77 | * [NYPL Design Toolkit >>](https://nypl.github.io/design-toolkit/) 78 | 79 | ### Typography 80 | [NYPL Typefaces >>](https://drive.google.com/drive/folders/0B_L4KDeJ_XcobVpuak5HZkt2eE0?usp=sharing) 81 | -------------------------------------------------------------------------------- /docs/_resources/resources.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Visible Focus 3 | description: Documentation on resources around visible focus. 4 | --- 5 | ### Considerations 6 | * At a minimum we should never use outline: 0, which removes default focus indicators. 7 | * Visible focus should work and be tested on smaller viewports as well. 8 | * The team could consider setting different focus styles for certain elements. For example changing the background color of inline links on focus. 9 | * If we refine the color of the focus indicator, it should have a contrast of 3:1 with the background, see the Standards section for more information on that. 10 | 11 | ### Standards 12 | #### WCAG 2.0, 2.4.7 Focus Visible 13 | This is the success criteria requiring visible focus. 14 | 15 | * WCAG Article: [Focus Visible: Understanding SC 2.4.7](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) 16 | 17 | #### WCAG 2.1, 1.4.11 Non-text Contrast 18 | WCAG 2.1 set a contrast ratio minimum of 3:1 for user interface components. 19 | Reminder, you can test contrast ratios with tools like [WebAIM's Color Contrast Checker](https://webaim.org/resources/contrastchecker/). 20 | 21 | * [WCAG 2.1 Non-text contrast](https://www.w3.org/TR/WCAG21/#non-text-contrast) 22 | * [WCAG 2.1 article Understanding Success Criterion 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) 23 | 24 | ### Resources 25 | Additional resources which may be of interest. 26 | 27 | * Paciello article around backwards compatibility [:focus-visible and backwards compatibility](https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/) 28 | * Deque article with general intro to focus indicators [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) 29 | -------------------------------------------------------------------------------- /docs/_sections/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About This Toolkit 3 | description: Why this toolkit exists and how to use it. 4 | --- 5 | 6 | ### Introduction 7 | 8 | This toolkit aims to serve multiple purposes: 9 | 10 | - facilitate the rapid creation of new web user interfaces 11 | - ensure consistency in design and quality 12 | - serve as the main repository for documenting the web design efforts at NYPL Digital 13 | - establish and promote universal design best practices 14 | 15 | **This is a work in progress.** We will be constantly updating it, making additions and modifications to suit the needs of the team and the organization. If you see something missing or wrong, please [open an issue on the Github repository](https://github.com/NYPL/design-toolkit/issues/new). 16 | 17 | ### How This Site Is Organized 18 | 19 | Each section deals with a specific topic (for example [Forms]({{ "/sections/forms.html" | relative_url }}) or [Buttons]({{ "/sections/buttons.html" | relative_url }})) which detail the different widgets to use in interfaces (for example [Primary Action Buttons]({{ "/sections/buttons.html#primaryButton" | relative_url }})). Each widget has a working example, the CSS class or classes involved, the HTML expected, and a JavaScript example, if applicable. 20 | 21 | While the goal is to make this toolkit as easy to use as possible, some web development experience is required to be able to use it successfully. 22 | 23 | ### Copy/Paste Everything 24 | 25 | The main idea behind this toolkit is to have as much of the design and functionality for any user interface available “out of the box”. **You shouldn't need to be writing any custom CSS**. If you are working on a NYPL Digital project and you think the functionality or widget you need is not covered, please [open an issue in Github](https://github.com/NYPL/design-toolkit/issues/new). This way future projects will benefit from new developments and you won't need to do the heavy lifting of coming up with a custom solution to a design problem. As [someone else put it best](http://mrmrs.io/writing/2016/03/24/scalable-css/): “the real way to scale CSS, is to stop writing CSS.” 26 | 27 | ### System Fonts 28 | 29 | After relying on custom web fonts for a while, we have decided that it is in our patron's best interest for NYPL websites to rely on system fonts instead. These fonts have several benefits: 30 | 31 | - they are already installed in your computer or mobile device so there is no additional download required to use them, thus reducing bandwidth usage costs 32 | - having the nuances of **bold text**, _italic text_, or `code text` also increases the size of the download (and we want those) 33 | - our materials are multilanguage, making finding a custom font that supports, say, Persian or Chinese very expensive 34 | - even if a custom font supports every single language, like the commendable [Noto free font](https://www.google.com/get/noto/) by Google, it will be a _very_ big download for our patrons (the complete Google Noto set is 970 megabytes!) 35 | 36 | These are just the main reasons why we decided, for now, to use system fonts in this toolkit. 37 | 38 | ### Accessibility And Mobile First 39 | 40 | This toolkit puts universal design and mobile use first. All features should be accessible to all users in all devices. We strive to conform to [WCAG 2.0 AA standard](https://www.w3.org/TR/WCAG20/). If you see something that does not conform to this goal and standard, please [open an issue in Github](https://github.com/NYPL/design-toolkit/issues/new). 41 | 42 | ### Installation 43 | 44 | There are [installation instructions](https://github.com/NYPL/design-toolkit/blob/master/INSTALL.md) in the Github repository. 45 | 46 | ### Acknowledgements 47 | 48 | The idea behind this toolkit borrows heavily from initiatives such as the [Gov.UK Service Manual](https://www.gov.uk/service-manual) or the [US Web Design Standards](https://standards.usa.gov/). We hope this code, which is [available on Github](https://github.com/NYPL/design-toolkit/), will be of use to others. 49 | -------------------------------------------------------------------------------- /docs/_sections/color.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Color Reference 3 | description: Color Usage 4 | --- 5 | 6 | ### Swatches 7 | 8 | 17 | 31 | 48 | 59 | 68 | 77 | 86 | -------------------------------------------------------------------------------- /docs/_sections/icons/3dots.icon.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/_sections/icons/3dots.vert.icon.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/_sections/icons/add.circle.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/add.circle.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/add.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/add.reverse.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/add.reverse.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/add.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/apple.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/applied.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/applied.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/apply.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/arrow.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/audio.icon.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/_sections/icons/blueray.icon.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/_sections/icons/cd.icon.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/_sections/icons/check.circle.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/check.circle.rev.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/check.circle.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/check.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/check.rev.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/check.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/circle.wedge.rev.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/circle.wedge.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/close.cancel.rev.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/close.cancel.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/close.circle.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/dash.circle.icon.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/_sections/icons/dash.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/dash.rev.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/disc.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/e-reader.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/envelope.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/equal.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/exclaim.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/facebook.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/fastforward.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/file.icon.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/_sections/icons/filter.icon.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/_sections/icons/grid.icon.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/_sections/icons/hidden.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/instagram.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/libcard.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/list.icon.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/_sections/icons/loggedin.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/login.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/logout.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/marker.empty.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/marker.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/marker.smalldot.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/menu.burger.icon.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docs/_sections/icons/neoclassic.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/nypl.lockup.logo.svg: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /docs/_sections/icons/openbook.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/pencil.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/play.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/pushpin.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/pyramid.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/radioButton.active.icon.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/_sections/icons/radioButton.inactive.icon.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/_sections/icons/reset.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/search.circle.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/search.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/settings.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/soundCloud.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/tag.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/text.icon.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/_sections/icons/trash.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/tumblr.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/twitter.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/typesize.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/unapplied.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/unapplied.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/visible.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/wedge.circle.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/icons/wedge.circle.rev.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/wedge.icon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /docs/_sections/icons/youtube.icon.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_sections/visible-focus.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Visible Focus 3 | description: Documentation on resources around visible focus. 4 | --- 5 | ### Considerations 6 | At a minimum we should never use outline: 0, which removes default focus indicators. 7 | Visible focus should work and be tested on smaller viewports as well. 8 | The team could consider setting different focus styles for certain elements. For example changing the background color of inline links on focus. 9 | If we refine the color of the focus indicator, it should have a contrast of 3:1 with the background, see the Standards section for more information on that. 10 | 11 | ### Standards 12 | #### WCAG 2.0, 2.4.7 Focus Visible 13 | This is the success criteria requiring visible focus. 14 | * WCAG Article: [Focus Visible: Understanding SC 2.4.7][https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html] 15 | 16 | #### WCAG 2.1, 1.4.11 Non-text Contrast 17 | WCAG 2.1 set a contrast ratio minimum of 3:1 for user interface components. 18 | Reminder, you can test contrast ratios with tools like [WebAIM's Color Contrast Checker][https://webaim.org/resources/contrastchecker/]. 19 | * [WCAG 2.1 Non-text contrast][https://www.w3.org/TR/WCAG21/#non-text-contrast] 20 | * [WCAG 2.1 article Understanding Success Criterion 1.4.11: Non-text Contrast][https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html] 21 | 22 | ### Resources 23 | Additional resources which may be of interest. 24 | * Paciello article around backwards compatibility [:focus-visible and backwards compatibility][https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/] 25 | * Deque article with general intro to focus indicators [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators][https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/] 26 | -------------------------------------------------------------------------------- /docs/css/docs.css: -------------------------------------------------------------------------------- 1 | .hljs-selector-class { 2 | color: #d0343a; } 3 | 4 | #skip a { 5 | background-color: #fff; 6 | border: 0; 7 | color: #1b7fa7; 8 | display: block; 9 | font-size: 13px; 10 | height: 1px; 11 | left: -10000px; 12 | line-height: 2; 13 | overflow: hidden; 14 | padding: 5px 10px 3px; 15 | position: absolute; 16 | top: 7px; 17 | width: 1px; 18 | z-index: 1000; } 19 | 20 | #skip a:focus { 21 | border: 5px solid #0f465c; 22 | height: auto; 23 | left: 7px; 24 | outline: 0; 25 | overflow: visible; 26 | padding: 0.5rem 0; 27 | width: auto; } 28 | 29 | .hidden { 30 | display: none; } 31 | 32 | .centered { 33 | text-align: center; } 34 | 35 | code { 36 | -webkit-border-radius: 0.2rem; 37 | border-radius: 0.2rem; 38 | padding: 0; } 39 | 40 | code::before, code::after { 41 | letter-spacing: -0.2em; 42 | content: "\00a0"; } 43 | 44 | pre { 45 | border: 0.0625rem solid #d7d4d0; } 46 | 47 | h1 { 48 | margin-top: 0; } 49 | 50 | .toolkit-svg-icon { 51 | border: 1px dotted #d7d4d0; 52 | margin-right: 1rem; } 53 | 54 | .clickable-header { 55 | cursor: pointer; } 56 | 57 | .clickable-header:hover { 58 | text-decoration: underline; } 59 | 60 | .top-level-header { 61 | display: inline-block; } 62 | 63 | .back-to-top { 64 | cursor: pointer; 65 | font-style: normal; 66 | margin-left: 0.5rem; } 67 | 68 | .back-to-top:hover { 69 | text-decoration: underline; } 70 | 71 | .nypl-red-swatch { 72 | background-color: #d0343a; } 73 | 74 | .nypl-red-dark-swatch { 75 | background-color: #97272c; } 76 | 77 | .nypl-red-tint-swatch { 78 | background-color: #de7175; } 79 | 80 | .nypl-blue-swatch { 81 | background-color: #1b7fa7; } 82 | 83 | .nypl-blue-dark-swatch { 84 | background-color: #135772; } 85 | 86 | .nypl-light-blue-swatch { 87 | background-color: #73c7e8; } 88 | 89 | .nypl-blue-tint-swatch { 90 | background-color: #d1e5ed; } 91 | 92 | .nypl-gray-cool-swatch { 93 | background-color: #76777b; } 94 | 95 | .nypl-gray-swatch { 96 | background-color: #776e64; } 97 | 98 | .nypl-gray-brown-swatch { 99 | background-color: #54514a; } 100 | 101 | .nypl-dark-gray-swatch { 102 | background-color: #080807; } 103 | 104 | .nypl-light-gray-swatch { 105 | background-color: #d7d4d0; } 106 | 107 | .nypl-white-swatch { 108 | background-color: #fff; } 109 | 110 | .nypl-black-swatch { 111 | background-color: #111; } 112 | 113 | .nypl-yellow-swatch { 114 | background-color: #fee24a; } 115 | 116 | .nypl-yellow-tint-swatch { 117 | background-color: #fff1a5; } 118 | 119 | .nypl-orange-swatch { 120 | background-color: #ffb81d; } 121 | 122 | .nypl-orange-desaturated-swatch { 123 | background-color: #d2a74a; } 124 | 125 | .nypl-green-swatch { 126 | background-color: #799a05; } 127 | 128 | .nypl-green-dark-swatch { 129 | background-color: #497629; } 130 | 131 | .nypl-green-tint-swatch { 132 | background-color: #f3f7e6; } 133 | 134 | .nypl-purple-swatch { 135 | background-color: #72256d; } 136 | 137 | .nypl-purple-dark-swatch { 138 | background-color: #52174f; } 139 | 140 | .nypl-purple-tint-swatch { 141 | background-color: #f2d7f0; } 142 | 143 | .nypl-teal-swatch { 144 | background-color: #07818d; } 145 | 146 | .nypl-teal-dark-swatch { 147 | background-color: #047074; } 148 | 149 | .nypl-teal-tint-swatch { 150 | background-color: #caf8fc; } 151 | 152 | .swatches { 153 | -webkit-box-sizing: border-box; 154 | box-sizing: border-box; } 155 | 156 | .swatches .reverse { 157 | color: #111; } 158 | 159 | .color-box { 160 | list-style: none; 161 | padding: 0.25rem; 162 | margin-left: 0; } 163 | 164 | .color-box > .main { 165 | height: 8rem; 166 | padding-top: 3rem; } 167 | 168 | .color-box > div { 169 | color: #fff; 170 | min-height: 4rem; 171 | margin: 0; 172 | padding: 1rem 0 1rem 1rem; 173 | text-align: left; } 174 | 175 | .nypl-ally-table th { 176 | text-align: left; } 177 | 178 | .toolkit .nypl-toolkit-header { 179 | background-color: #efedeb; 180 | background-color: #caeaf7; 181 | border-bottom: solid 0.25rem #135772; } 182 | 183 | .toolkit .nypl-toolkit-header h1, 184 | .toolkit .nypl-toolkit-header h2 { 185 | font-family: "Milo-Light"; 186 | font-size: 2rem; 187 | margin: 0; } 188 | 189 | .toolkit .nypl-toolkit-header h1 { 190 | font-weight: 400; 191 | margin: 1rem 0 1.5rem; } 192 | 193 | .toolkit .nypl-toolkit-header h1.item-title, 194 | .toolkit .nypl-toolkit-header h2.item-title { 195 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 196 | font-weight: 400; } 197 | 198 | .toolkit .nypl-toolkit-header h2 { 199 | line-height: 1; } 200 | 201 | .toolkit .nypl-toolkit-header h2 { 202 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 203 | font-weight: 400; 204 | margin: 1rem 0 1.5rem; } 205 | 206 | @media (max-width: 965px) { 207 | .toolkit .nypl-toolkit-header h2 { 208 | margin-top: 0.5rem; } } 209 | 210 | .toolkit .nypl-toolkit-header h2 { 211 | color: #135772; 212 | margin-bottom: 0.25rem; } 213 | 214 | .toolkit .nypl-toolkit-header h2 + span { 215 | color: #135772; 216 | font-style: italic; } 217 | 218 | .toolkit .main-page h3.top-level-header::before { 219 | background: #135772; 220 | content: ""; 221 | display: block; 222 | height: 0.25rem; 223 | margin-bottom: 0.5rem; 224 | width: 5rem; } 225 | 226 | .toolkit .nypl-toolkit-example .nypl-basic-modal-container .nypl-modal-content { 227 | margin: 1rem; 228 | padding: 2.5rem; 229 | width: 90%; } 230 | 231 | .toolkit .nypl-toolkit-example .nypl-basic-modal-container .nypl-modal-underlay { 232 | background: rgba(255, 255, 255, 0.8); } 233 | 234 | .toolkit footer { 235 | background-color: #caeaf7; 236 | color: #135772; 237 | height: 6rem; } 238 | 239 | textarea { 240 | color: #111; 241 | font-family: monospace; 242 | font-size: 0.85rem; 243 | padding: 1rem; 244 | width: 96.2%; } 245 | 246 | .nypl-toolkit-example .nypl-logo { 247 | height: 13em; 248 | width: 20em; } 249 | 250 | /*# sourceMappingURL=docs.css.map */ 251 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: NYPL Digital Toolkit 4 | --- 5 | 6 | # NYPL Design Toolkit 7 | 8 | {% for section in site.sections %} 9 | ## {{ section.title }} 10 | {{ section.description }} 11 | {% endfor %} -------------------------------------------------------------------------------- /docs/js/googlecode.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Google Code style (c) Aahan Krish 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | background: white; 12 | color: black; 13 | } 14 | 15 | .hljs-comment, 16 | .hljs-quote { 17 | color: #800; 18 | } 19 | 20 | .hljs-keyword, 21 | .hljs-selector-tag, 22 | .hljs-section, 23 | .hljs-title, 24 | .hljs-name { 25 | color: #008; 26 | } 27 | 28 | .hljs-variable, 29 | .hljs-template-variable { 30 | color: #660; 31 | } 32 | 33 | .hljs-string, 34 | .hljs-selector-attr, 35 | .hljs-selector-pseudo, 36 | .hljs-regexp { 37 | color: #080; 38 | } 39 | 40 | .hljs-literal, 41 | .hljs-symbol, 42 | .hljs-bullet, 43 | .hljs-meta, 44 | .hljs-number, 45 | .hljs-link { 46 | color: #066; 47 | } 48 | 49 | .hljs-title, 50 | .hljs-doctag, 51 | .hljs-type, 52 | .hljs-attr, 53 | .hljs-built_in, 54 | .hljs-builtin-name, 55 | .hljs-params { 56 | color: #606; 57 | } 58 | 59 | .hljs-attribute, 60 | .hljs-subst { 61 | color: #000; 62 | } 63 | 64 | .hljs-formula { 65 | background-color: #eee; 66 | font-style: italic; 67 | } 68 | 69 | .hljs-selector-id, 70 | .hljs-selector-class { 71 | color: #9B703F 72 | } 73 | 74 | .hljs-addition { 75 | background-color: #baeeba; 76 | } 77 | 78 | .hljs-deletion { 79 | background-color: #ffc8bd; 80 | } 81 | 82 | .hljs-doctag, 83 | .hljs-strong { 84 | font-weight: bold; 85 | } 86 | 87 | .hljs-emphasis { 88 | font-style: italic; 89 | } 90 | -------------------------------------------------------------------------------- /docs/js/holds.js: -------------------------------------------------------------------------------- 1 | // This File provides some helper fuctions that supplies mock data and 2 | // does a little work fo us so we can update our mock data freely without having 3 | // to update the number of holds shown in the example. 4 | 5 | // Mock data; mimics an API response. 6 | 7 | const tableBody = document.querySelector('.nypl-holds-table tbody'); 8 | 9 | const itemHold = [ 10 | { 11 | title: 'British intelligence and Hitler\'s empire in the Soviet Union, 1941-1945 / Benjamin William Wheatley', 12 | url: 'https://catalog.nypl.org/search~S1?/Xsoviet+union&searchscope=1&SORT=DZ/Xsoviet+union&searchscope=1&SORT=DZ&extended=0&SUBKEY=soviet+union/1%2C32000%2C32000%2CB/frameset&FF=Xsoviet+union&searchscope=1&SORT=DZ&1%2C1%2C', 13 | author: 'Wheatley, Benjamin William', 14 | format: 'Book', 15 | imprint: 'London ; New York, NY : Bloomsbury Academic, an imprint of Bloomsbury Publishing Plc, 2017.', 16 | location: 'Stephen A. Schwarzman Building, General Research, Room 315', 17 | locLink: '#', 18 | status: 'In transit from ReCAP', 19 | statusClass: 'in-transit', 20 | recapClass: 'recap', 21 | manageUrl: '#', 22 | }, 23 | { 24 | title: 'Protest, reform and repression in Khrushchev\'s Soviet Union / Robert Hornsby', 25 | url: 'https://catalog.nypl.org/search~S98?/Xsoviet+union&searchscope=98&SORT=DZ/Xsoviet+union&searchscope=98&SORT=DZ&SUBKEY=soviet+union/1%2C32000%2C32000%2CB/frameset&FF=Xsoviet+union&searchscope=98&SORT=DZ&13%2C13%2C', 26 | author: 'Hornsby, Rob', 27 | format: 'Book', 28 | imprint: 'Cambridge, U.K. ; New York : Cambridge University Press, 2013', 29 | location: 'Stephen A. Schwarzman Building, General Research, Room 315', 30 | locLink: '#', 31 | status: 'Requested from ReCAP', 32 | statusClass: 'requested', 33 | recapClass: 'recap', 34 | manageUrl: '#', 35 | }, 36 | { 37 | title: 'String quartet in F minor, op. 95 "serioso" [sound recording] / Ludwig van Beethoven. Five fugues from the Well-tempered clavier, arr. for string quartet, K. 405 / Johann Sebastian Bach ; Wolfgang Amadeus Mozart. String quartet, op. 3 / Alban Berg. String quartet no. 1 in D major, op. 11 / Peter Ilich Tchaikovsky.', 38 | url: 'https://catalog.nypl.org/search~S61?/abach/abach/101%2C590%2C20076%2CB/frameset&FF=abach+joahnn+sebastian+1685+1750&1%2C1%2C/indexsort=-', 39 | author: 'Chamber Music Society of Lincoln Center. Performer.', 40 | format: 'Audio Tape', 41 | imprint: 'Jan. 4, 1985.', 42 | location: 'Performing Arts Research Collections - Recorded Sound', 43 | locLink: '#', 44 | status: 'Available', 45 | statusClass: 'available', 46 | recapClass: '', 47 | manageUrl: '#', 48 | }, 49 | { 50 | title: 'History of Russia & the Soviet Union in humorous verse / Sabrina P. Ramet', 51 | url: 'https://catalog.nypl.org/search~S98?/Xsoviet+union&searchscope=98&SORT=DZ/Xsoviet+union&searchscope=98&SORT=DZ&SUBKEY=soviet+union/1%2C32000%2C32000%2CB/frameset&FF=Xsoviet+union&searchscope=98&SORT=DZ&12%2C12%2C', 52 | author: 'Ramet, Sabina P., 1949', 53 | format: 'Book', 54 | imprint: 'Washington, DC : New Academia Publishing : Scarith, 2014', 55 | location: 'Stephen A. Schwarzman Building, General Research, Room 315', 56 | locLink: '#', 57 | status: 'In transit from ReCAP', 58 | statusClass: 'in-transit', 59 | recapClass: 'recap', 60 | manageUrl: '#', 61 | }, 62 | { 63 | title: 'Rostropovich: in memoriam : 9 solos in honor of the maestro\'s legacy / compiled and edited by Marion Feldman.', 64 | url: 'https://catalog.nypl.org/search~S1?/Xrostropovich&searchscope=1&SORT=D/Xrostropovich&searchscope=1&SORT=D&SUBKEY=rostropovich/1%2C340%2C340%2CB/frameset&FF=Xrostropovich&searchscope=1&SORT=D&4%2C4%2C', 65 | author: 'Mstislav Rostropovich (and others?)', 66 | format: 'Notated music (part of a series?)', 67 | imprint: '[New York] : Carl Fischer, LLC, [2013]', 68 | location: 'Performing Arts Research Collections - Music', 69 | locLink: '#', 70 | status: 'Available', 71 | statusClass: 'available', 72 | recapClass: '', 73 | manageUrl: '#', 74 | }, 75 | { 76 | title: 'Mstislav Rostropovich: cellist, teacher, legend / Elizabeth Wilson.', 77 | url: 'https://catalog.nypl.org/search~S1?/Xrostropovich&searchscope=1&SORT=D/Xrostropovich&searchscope=1&SORT=D&SUBKEY=rostropovich/1%2C340%2C340%2CB/frameset&FF=Xrostropovich&searchscope=1&SORT=D&8%2C8%2C', 78 | author: 'Wilson, Elizabeth A. M.', 79 | format: 'Book', 80 | imprint: 'London: Faber, 2007.', 81 | location: 'Performing Arts Research Collections - Music', 82 | locLink: '#', 83 | status: 'In transit from ILL', 84 | statusClass: 'in-transit ill', 85 | recapClass: '', 86 | manageUrl: '#', 87 | }, 88 | { 89 | title: 'The art of dance in the U.S.S.R. : A study of politics, ideology, and culture', 90 | url: 'https://catalog.nypl.org/search~S101?/Xsoviet+union&searchscope=101&SORT=DZ/Xsoviet+union&searchscope=101&SORT=DZ&SUBKEY=soviet+union/1%2C80%2C80%2CB/frameset&FF=Xsoviet+union&searchscope=101&SORT=DZ&33%2C33%2C', 91 | author: 'Swift, Mary Grace', 92 | format: 'Microfilm', 93 | imprint: '1968', 94 | location: 'Stephen A. Schwarzman Building, Milstein Microform Reading Room, Room 119', 95 | locLink: '#', 96 | status: 'Available', 97 | statusClass: 'available', 98 | manageUrl: '#', 99 | }, 100 | { 101 | title: 'We demand peace! : Soviet posters of the Cold War', 102 | url: 'https://catalog.nypl.org/search~S1?/Xrussian+posters&searchscope=1&SORT=DZ/Xrussian+posters&searchscope=1&SORT=DZ&extended=0&SUBKEY=russian+posters/1%2C175%2C175%2CB/frameset&FF=Xrussian+posters&searchscope=1&SORT=DZ&3%2C3%2C', 103 | author: 'Snopkov A.E., Snopkov P.A. and Shklyaruk A.F.', 104 | format: 'Portfolio', 105 | imprint: 'Moskva: Kontakt-Kul’tura, 2007', 106 | location: 'Stephen A. Schwarzman Building, Art & Architecture Collection, Room 300', 107 | locLink: '#', 108 | status: 'Available', 109 | statusClass: 'available', 110 | recapClass: '', 111 | manageUrl: '#', 112 | }, 113 | ]; 114 | 115 | itemHold.forEach(item => { 116 | const tableRow = ` 117 | 118 | 119 |
120 |
${item.title}
121 |
Author
122 |
${item.author}
123 |
Imprint
124 |
${item.imprint}
125 |
Format
126 |
${item.format}
127 |
128 | 129 | 130 | ${item.status} 131 | 132 | 133 | ${item.location} 134 | 135 | 136 | Manage this item 137 | 138 | 139 | `; 140 | 141 | tableBody.insertAdjacentHTML('beforeend', tableRow); 142 | // console.table(tableRow); 143 | }); 144 | 145 | // #### 146 | // Helper so we can put the number of table rowss at the top of the table 147 | const trItems = document.querySelectorAll('tbody tr').length; 148 | // console.log(trItems); 149 | const totalNumber = document.getElementById('number-of-holds'); 150 | totalNumber.innerHTML = trItems; 151 | -------------------------------------------------------------------------------- /docs/js/toc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/ghiculescu/jekyll-table-of-contents 2 | (function($){ 3 | $.fn.toc = function(options) { 4 | var defaults = { 5 | noBackToTopLinks: false, 6 | title: 'Jump to...', 7 | minimumHeaders: 3, 8 | headers: 'h1, h2, h3, h4, h5, h6', 9 | listType: 'ol', // values: [ol|ul] 10 | showEffect: 'show', // values: [show|slideDown|fadeIn|none] 11 | showSpeed: 'slow', // set to 0 to deactivate effect 12 | classes: { list: '', 13 | item: '' 14 | } 15 | }, 16 | settings = $.extend(defaults, options); 17 | 18 | function fixedEncodeURIComponent (str) { 19 | return encodeURIComponent(str).replace(/[!'()*]/g, function(c) { 20 | return '%' + c.charCodeAt(0).toString(16); 21 | }); 22 | } 23 | 24 | function createLink (header) { 25 | var innerText = (header.textContent === undefined) ? header.innerText : header.textContent; 26 | return "" + innerText + ""; 27 | } 28 | 29 | var headers = $(settings.headers).filter(function() { 30 | // get all headers with an ID 31 | var previousSiblingName = $(this).prev().attr( "name" ); 32 | if (!this.id && previousSiblingName) { 33 | this.id = $(this).attr( "id", previousSiblingName.replace(/\./g, "-") ); 34 | } 35 | return this.id; 36 | }), output = $(this); 37 | if (!headers.length || headers.length < settings.minimumHeaders || !output.length) { 38 | $(this).hide(); 39 | return; 40 | } 41 | 42 | if (0 === settings.showSpeed) { 43 | settings.showEffect = 'none'; 44 | } 45 | 46 | var render = { 47 | show: function() { output.hide().html(html).show(settings.showSpeed); }, 48 | slideDown: function() { output.hide().html(html).slideDown(settings.showSpeed); }, 49 | fadeIn: function() { output.hide().html(html).fadeIn(settings.showSpeed); }, 50 | none: function() { output.html(html); } 51 | }; 52 | 53 | var get_level = function(ele) { return parseInt(ele.nodeName.replace("H", ""), 10); }; 54 | var highest_level = headers.map(function(_, ele) { return get_level(ele); }).get().sort()[0]; 55 | var return_to_top = 'Back to top'; 56 | 57 | var level = get_level(headers[0]), 58 | this_level, 59 | html = settings.title + " <" +settings.listType + " class=\"" + settings.classes.list +"\">"; 60 | headers.on('click', function() { 61 | if (!settings.noBackToTopLinks) { 62 | window.location.hash = this.id; 63 | } 64 | }) 65 | .addClass('clickable-header') 66 | .each(function(_, header) { 67 | this_level = get_level(header); 68 | if (!settings.noBackToTopLinks && this_level === highest_level) { 69 | $(header).addClass('top-level-header').after(return_to_top); 70 | } 71 | if (this_level === level) // same level as before; same indenting 72 | html += "
  • " + createLink(header); 73 | else if (this_level <= level){ // higher level than before; end parent ol 74 | for(var i = this_level; i < level; i++) { 75 | html += "
    • " 76 | } 77 | html += "
  • " + createLink(header); 78 | } 79 | else if (this_level > level) { // lower level than before; expand the previous to contain a ol 80 | for(i = this_level; i > level; i--) { 81 | html += "<" + settings.listType + " class=\"" + settings.classes.list +"\">" + 82 | "
  • " 83 | } 84 | html += createLink(header); 85 | } 86 | level = this_level; // update for the next one 87 | }); 88 | html += ""; 89 | if (!settings.noBackToTopLinks) { 90 | $(document).on('click', '.back-to-top', function() { 91 | $(window).scrollTop(0); 92 | window.location.hash = ''; 93 | }); 94 | } 95 | 96 | render[settings.showEffect](); 97 | }; 98 | })(jQuery); 99 | -------------------------------------------------------------------------------- /docs/svg/apply.icon.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /docs/svg/check.solo.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/svg/dash.icon.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/svg/filter.icon.3.svg: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /docs/svg/filter.icon.svg: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /docs/svg/reset.icon.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/svg/wedge.left.icon.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/svg/wedge.right.icon.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/svg/x.close.icon.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /eyeglassConfig.js: -------------------------------------------------------------------------------- 1 | var designToolkit = require('./index'); 2 | 3 | module.exports = function(eyeglass, sass) { 4 | return { 5 | sassDir: designToolkit.includePaths[0] 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const gulp = require('gulp'); 3 | 4 | const shell = require('gulp-shell'); 5 | 6 | const sass = require('gulp-sass'); 7 | 8 | const sourcemaps = require('gulp-sourcemaps'); 9 | 10 | const autoprefixer = require('gulp-autoprefixer'); 11 | 12 | const concat = require('gulp-concat'); 13 | 14 | const uglify = require('gulp-uglify'); 15 | 16 | // variables used in our sass tasks 17 | const input = 'sass/**/*.scss'; 18 | const output = 'docs/css'; 19 | 20 | // 21 | // update, autoprefix and other stuff to the sass: 22 | // options ot pass: 23 | const sassOptions = { 24 | errLogToConsole: true, 25 | //outputStyle: 'compressed' 26 | }; 27 | 28 | // autoprefixer options 29 | // this covers 90.87% of all browsers. run npx autoprefixer --info to see full report. 30 | const autoprefixerOptions = { 31 | browsers: ['last 10 versions', '> 5%', 'Firefox ESR'], 32 | flexbox: 'true', 33 | grid: 'true' 34 | }; 35 | 36 | // 37 | // main gulp task 38 | // 39 | gulp.task('sass', function () { 40 | return gulp.src(input) 41 | .pipe(sass()) 42 | .pipe(autoprefixer(autoprefixerOptions)) 43 | .pipe(sourcemaps.init()) 44 | .pipe(sass(sassOptions).on('error', sass.logError)) 45 | .pipe(sourcemaps.write('./')) 46 | .pipe(gulp.dest(output)); 47 | }); 48 | 49 | gulp.task('watch', function () { 50 | gulp.watch('sass/**/*.scss', ['sass']); 51 | }); 52 | 53 | gulp.task('default', ['sass']); 54 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | includePaths: [ 5 | path.join(__dirname, 'sass'), 6 | ] 7 | }; 8 | -------------------------------------------------------------------------------- /lib/design-toolkit.rb: -------------------------------------------------------------------------------- 1 | # inspired by bootstrap-sass 2 | require 'design-toolkit/version' 3 | 4 | module Toolkit 5 | class << self 6 | 7 | def load! 8 | if rails? 9 | register_rails_engine 10 | elsif lotus? 11 | register_lotus 12 | elsif sprockets? 13 | register_sprockets 14 | end 15 | 16 | configure_sass 17 | end 18 | 19 | # Paths 20 | def gem_path 21 | @gem_path ||= File.expand_path '..', File.dirname(__FILE__) 22 | end 23 | 24 | def stylesheets_path 25 | File.join assets_path, 'sass' 26 | end 27 | 28 | def assets_path 29 | @assets_path ||= File.join gem_path, '' 30 | end 31 | 32 | # Environment detection helpers 33 | def sprockets? 34 | defined?(::Sprockets) 35 | end 36 | 37 | def rails? 38 | defined?(::Rails) 39 | end 40 | 41 | def lotus? 42 | defined?(::Lotus) 43 | end 44 | 45 | private 46 | 47 | def configure_sass 48 | require 'sass' 49 | 50 | ::Sass.load_paths << stylesheets_path 51 | 52 | # from bootstrap: bootstrap requires minimum precision of 8, see https://github.com/twbs/bootstrap-sass/issues/409 53 | ::Sass::Script::Number.precision = [8, ::Sass::Script::Number.precision].max 54 | end 55 | 56 | def register_rails_engine 57 | require 'design-toolkit/engine' 58 | end 59 | 60 | def register_lotus 61 | Lotus::Assets.sources << assets_path 62 | end 63 | 64 | def register_sprockets 65 | Sprockets.append_path(stylesheets_path) 66 | end 67 | 68 | end 69 | end 70 | 71 | Toolkit.load! -------------------------------------------------------------------------------- /lib/design-toolkit/engine.rb: -------------------------------------------------------------------------------- 1 | # inspired by bootstrap-sass 2 | module Toolkit 3 | module Rails 4 | class Engine < ::Rails::Engine 5 | initializer 'design-toolkit.assets.precompile' do |app| 6 | %w(sass).each do |sub| 7 | app.config.assets.paths << root.join('', sub).to_s 8 | end 9 | end 10 | end 11 | end 12 | end -------------------------------------------------------------------------------- /lib/design-toolkit/version.rb: -------------------------------------------------------------------------------- 1 | # inspired by bootstrap-sass 2 | module Toolkit 3 | VERSION = '0.1.17' 4 | end -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nypl/design-toolkit", 3 | "version": "0.1.38", 4 | "description": "NYPL Design Toolkit", 5 | "author": "NYPL Digital", 6 | "contributors": [ 7 | { 8 | "name": "Mauricio Giraldo", 9 | "email": "mauriciogiraldo@nypl.org" 10 | }, 11 | { 12 | "name": "Rafael Hernandez", 13 | "email": "rafaelhernandez@nypl.org" 14 | }, 15 | { 16 | "name": "Ricardo E. Galvez", 17 | "email": "ricardogalvez@nypl.org" 18 | }, 19 | { 20 | "name": "Willa Armstrong", 21 | "email": "willaarmstrong@nypl.org" 22 | }, 23 | { 24 | "name": "Edwin Guzman", 25 | "email": "edwinguzman@nypl.org" 26 | } 27 | ], 28 | "license": "MIT", 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/NYPL/design-toolkit.git" 32 | }, 33 | "main": "index.js", 34 | "engines": { 35 | "node": ">=10.0.0", 36 | "npm": ">=5.0.0" 37 | }, 38 | "dependencies": { 39 | "node-sass": "4.9.0" 40 | }, 41 | "devDependencies": { 42 | "browser-sync": "^2.24.3", 43 | "gulp": "^3.9.1", 44 | "gulp-shell": "^0.6.5", 45 | "gulp-autoprefixer": "^4.0.0", 46 | "gulp-concat": "^2.6.1", 47 | "gulp-cssnano": "^2.1.2", 48 | "gulp-postcss": "^7.0.1", 49 | "gulp-sass": "^3.1.0", 50 | "gulp-sourcemaps": "^2.6.1", 51 | "gulp-uglify": "^3.0.0", 52 | "lodash": "^4.17.10", 53 | "pa11y-ci": "~1.3.0" 54 | }, 55 | "scripts": { 56 | "test-pa11y": "./node_modules/.bin/pa11y-ci" 57 | }, 58 | "eyeglass": { 59 | "name": "toolkit", 60 | "needs": "*", 61 | "exports": "eyeglassConfig.js" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /sass/_colors.scss: -------------------------------------------------------------------------------- 1 | //@warn "_colors.scss now using set from Marketing. Probably do some magic for eaching to prefix nypl automatically to each variable..."; 2 | // nypl _colors.scss 3 | 4 | // NYPL Reds 5 | $nypl-red: #d0343a; 6 | $nypl-red-dark: #97272c; 7 | 8 | // NYPL Blues 9 | $nypl-blue: #1b7fa7; 10 | $nypl-blue-dark: #135772; 11 | $nypl-light-blue: lighten($nypl-blue, 30%); 12 | 13 | 14 | // NYPL Monochromatic 15 | $nypl-gray-cool: #76777b; 16 | $nypl-gray: #776e64; 17 | $nypl-gray-brown: #54514a; 18 | $nypl-dark-gray: darken($nypl-gray, 40%); 19 | $nypl-light-gray: lighten($nypl-gray, 40%); 20 | $nypl-white: #fff; 21 | $nypl-black: #111; 22 | 23 | 24 | // NYPL Yellows for Alerts & Focus halos etc. 25 | $nypl-yellow: #fee24a; 26 | $nypl-orange: #ffb81d; 27 | $nypl-orange-desaturated: desaturate($nypl-orange, 40%); 28 | 29 | // NYPL Greens ~ Used in Learn 30 | $nypl-green: #799a05; 31 | $nypl-green-dark: #497629; 32 | $nypl-green-bright: #008918; 33 | 34 | // NYPL Purple ~ Attend Colors 35 | $nypl-purple: #72256d; 36 | $nypl-purple-dark: #52174f; 37 | $nypl-purple-tint: lighten($nypl-purple, 60%); 38 | 39 | 40 | // NYPL Teal ~ Research colors 41 | $nypl-teal: #07818d; 42 | $nypl-teal-dark: #047074; 43 | $nypl-teal-tint: lighten($nypl-teal, 60%); 44 | 45 | // Semantic colors 46 | $nypl-search-color: $nypl-light-gray; 47 | $nypl-search-color-dark: $nypl-gray;//darken($nypl-search-color, 10%); 48 | $nypl-search-color-light: lighten($nypl-search-color, 10%); 49 | 50 | // Accessible, high contrast orange yellow for focus rings 51 | $focus-color: darken($nypl-blue-dark, 5%); 52 | 53 | 54 | // General Page Styles 55 | $page-color: $nypl-dark-gray; 56 | $page-text-color: $nypl-dark-gray; 57 | $page-color-light: $nypl-light-gray; 58 | $nypl-bar-color: rgba(0, 0, 0, 0.1); 59 | 60 | // General page background 61 | $page-background-color: $nypl-white; 62 | 63 | // Global Footer background 64 | $nypl-footer-color: $nypl-gray-brown; 65 | 66 | // Alerting and Highlights 67 | $highlight-color: $nypl-red; 68 | $success-color: $nypl-green-bright; 69 | $alert-color: $nypl-yellow; 70 | 71 | // Hyper-link colors 72 | $link-color: $nypl-blue; 73 | $link-visited-color: darken($link-color, 15%); 74 | $link-hover-color: darken($link-color, 5%); 75 | $inverted-link-color: $nypl-white; 76 | $inverted-link-visited-color: darken($inverted-link-color, 10%); 77 | 78 | // button colors not already defined above. 79 | $button-text-color: $nypl-white; 80 | 81 | $button-border-color: $nypl-dark-gray; 82 | 83 | $button-background-color: $nypl-white; 84 | // 85 | 86 | // field error bg 87 | $nypl-red-tint: tint($nypl-red, 30%); 88 | $nypl-red-error: tint($nypl-red, 80%); 89 | $nypl-blue-tint: tint($nypl-blue, 80%); 90 | $nypl-yellow-tint: tint($nypl-yellow, 50%); 91 | $nypl-green-tint: #f3f7e6; 92 | -------------------------------------------------------------------------------- /sass/_css3.scss: -------------------------------------------------------------------------------- 1 | // CSS 3 mixins taken from https://github.com/alphagov/govuk_frontend_toolkit 2 | 3 | // This file includes mixins for CSS properties that require vendor prefixes. 4 | 5 | // Please add more mixins here as you need them, rather than adding them to 6 | // your application - this lets us manage them in one place. 7 | 8 | // You can use the @warn directive to deprecate a mixin where the property 9 | // no longer needs prefixes. 10 | 11 | // This style of indentation is preferred as it is easier to scan 12 | // Allow more than two spaces per indentation level and don't require a space after a colon 13 | // scss-lint:disable Indentation SpaceAfterPropertyColon 14 | 15 | @mixin border-radius($radius) { 16 | -webkit-border-radius: $radius; // Chrome 4.0, Safari 3.1 to 4.0, Mobile Safari 3.2, Android Browser 2.1 17 | -moz-border-radius: $radius; // Firefox 2.0 to 3.6 18 | border-radius: $radius; 19 | } 20 | 21 | @mixin box-shadow($shadow) { 22 | -webkit-box-shadow: $shadow; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0 23 | -moz-box-shadow: $shadow; // Firefox 3.5 to 3.6 24 | box-shadow: $shadow; 25 | } 26 | 27 | @mixin scale($x, $y, $transform-origin: 50% 50% 0) { 28 | // $x and $y should be numeric values without units 29 | -webkit-transform: scale($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1 30 | -moz-transform: scale($x, $y); // Firefox 3.5 to 15.0 31 | -ms-transform: scale($x, $y); // IE9 only 32 | transform: scale($x, $y); 33 | 34 | -webkit-transform-origin: $transform-origin; // Chrome, Safari 3.1 35 | -moz-transform-origin: $transform-origin; // Firefox 10 to 15.0 36 | -ms-transform-origin: $transform-origin; // IE9 37 | transform-origin: $transform-origin; 38 | } 39 | 40 | @mixin translate($x, $y) { 41 | -webkit-transform: translate($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1 42 | -moz-transform: translate($x, $y); // Firefox 3.5 to 15.0 43 | -ms-transform: translate($x, $y); // IE9 only 44 | -o-transform: translate($x, $y); // Opera 10.5 to 12.0 45 | transform: translate($x, $y); 46 | } 47 | 48 | @mixin rotate($degrees) { 49 | -webkit-transform: rotate($degrees); 50 | -moz-transform: rotate($degrees); 51 | -ms-transform: rotate($degrees); 52 | transform: rotate($degrees); 53 | } 54 | 55 | @mixin gradient($from, $to) { 56 | // Creates a vertical gradient where $from is the colour at the top of the element 57 | // and $to is the colour at the bottom. The top colour is used as a background-color 58 | // for browsers that don't support gradients. 59 | background-color: $from; 60 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); // Safari 4.0 to 5.1, Chrome 1.0 to 10.0, old deprecated syntax 61 | background-image: -webkit-linear-gradient($from, $to); // Chrome 10.0 to 25.0, Safari 5.1 to 6.0, Mobile Safari 5.0 to 6.1, Android Browser 4.0 to 4.3 62 | background-image: -moz-linear-gradient($from, $to); // Firefox 3.6 to 15.0 63 | background-image: -o-linear-gradient($from, $to); // Opera 11.1 to 12.0 64 | background-image: linear-gradient($from, $to); 65 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 ); // IE6 to IE9 66 | } 67 | 68 | @mixin transition($property, $duration, $function, $delay: 0s) { 69 | -webkit-transition: ($property $duration $function $delay); // Chrome 4.0 to 25.0, Safari 3.1 to 6.0, Mobile Safari 3.2 to 6.1, Android Browser 2.1 to 4.3 70 | -moz-transition: ($property $duration $function $delay); // Firefox 4.0 to 15.0 71 | -o-transition: ($property $duration $function $delay); // Opera 10.5 to 12.0 72 | transition: ($property $duration $function $delay); 73 | } 74 | 75 | @mixin box-sizing($type) { 76 | // http://www.w3.org/TR/css3-ui/#box-sizing 77 | // $type can be one of: content-box | padding-box | border-box | inherit 78 | -webkit-box-sizing: $type; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0 79 | -moz-box-sizing: $type; // Firefox 2.0 to 28.0, Firefox for Android 26.0 onwards 80 | box-sizing: $type; 81 | } 82 | 83 | @mixin appearance($appearance) { 84 | -webkit-appearance: $appearance; 85 | -moz-appearance: $appearance; 86 | } 87 | 88 | @mixin calc($property, $calc) { 89 | #{$property}: -webkit-calc(#{$calc}); // Chrome 19.0 to 25.0, Safari 6.0, Mobile Safari 6.0 to 6.1 90 | #{$property}: calc(#{$calc}); 91 | } 92 | 93 | @mixin opacity($trans) { 94 | zoom: 1; 95 | filter: unquote('alpha(opacity=' + ($trans * 100) + ')'); // IE6 to IE8 96 | opacity: $trans; 97 | } 98 | 99 | // 100 | // Create generic Columns for a layout 101 | // 102 | @mixin generic-columns( 103 | $column-count: null, 104 | $column-width: null 105 | ) { 106 | -webkit-column-count: $column-count $column-width; 107 | -moz-column-count: $column-count $column-width; 108 | column-count: $column-count $column-width; 109 | } 110 | -------------------------------------------------------------------------------- /sass/_footer.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "measurements"; 3 | @import "general-mixins"; 4 | @import "microformats"; 5 | @import "media-queries"; 6 | 7 | //@warn "do footer"; 8 | 9 | @mixin footer { 10 | background-color: $nypl-footer-color; 11 | color: $nypl-white; 12 | font-size: 0.9rem; 13 | margin-top: 5rem; 14 | // font-weight: bold; 15 | // @include Kievit-Bold; 16 | 17 | ul { 18 | list-style: none; 19 | margin: 1rem 0; 20 | padding: 0; 21 | @include clearfix; 22 | } 23 | 24 | .copyright { 25 | margin-top: 2rem; 26 | margin-bottom: 5rem; 27 | 28 | p { 29 | padding-top: 1rem; 30 | } 31 | } 32 | 33 | .footerLinks { 34 | 35 | li { 36 | margin-left: 0; 37 | } 38 | 39 | > li { 40 | float: left; 41 | width: 25%; 42 | 43 | @include media($mobile-breakpoint) { 44 | float: none; 45 | width: auto; 46 | } 47 | 48 | a:focus { 49 | background-color: transparent; 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /sass/_general-mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::before, 3 | &::after { 4 | content: ""; 5 | display: table; 6 | } 7 | 8 | &::after { 9 | clear: both; 10 | } 11 | } 12 | 13 | $bullet-size: 0.5rem; 14 | 15 | @mixin custom-list-bullet( 16 | $color: $nypl-light-gray, 17 | $hides-on-mobile: true) { 18 | list-style-type: none; 19 | position: relative; 20 | 21 | @if ($hides-on-mobile == true) { 22 | @include media($mobile-breakpoint) { 23 | margin-left: 0; 24 | } 25 | } 26 | } 27 | 28 | @mixin custom-list( 29 | $color: $nypl-light-gray, 30 | $hides-on-mobile: true) { 31 | li { 32 | @include custom-list-bullet( 33 | $color: $nypl-light-gray, 34 | $hides-on-mobile: true); 35 | } 36 | } 37 | 38 | @mixin collapsible { 39 | $collapsing-time: 0.5s; 40 | $max-height: 40rem; // 640 41 | 42 | @include transition(all, $collapsing-time, ease-out); 43 | 44 | max-height: $max-height; 45 | overflow: hidden; 46 | overflow-y: auto; 47 | -webkit-overflow-scrolling: touch; 48 | 49 | &.collapsed { 50 | max-height: 0; 51 | visibility: hidden; 52 | } 53 | } 54 | 55 | @mixin spinner-element { 56 | $bar-color: transparentize($nypl-light-gray, 0.5); 57 | $spinner-time: 1.5s; 58 | 59 | @keyframes spinner-right { 60 | 0% { 61 | right: -5rem; 62 | } 63 | 64 | 100% { 65 | right: -1rem; 66 | } 67 | } 68 | 69 | overflow: hidden; 70 | position: relative; 71 | 72 | &.spinning { 73 | &::after { 74 | animation: spinner-right $spinner-time linear infinite; 75 | background: -moz-repeating-linear-gradient(to right, $bar-color, $bar-color 1rem, transparent 1.1rem, transparent 2rem, $bar-color 2.1rem); 76 | background: repeating-linear-gradient(to right, $bar-color, $bar-color 1rem, transparent 1.1rem, transparent 2rem, $bar-color 2.1rem); 77 | content: ""; 78 | display: block; 79 | height: 100%; 80 | margin-top: 0; 81 | position: absolute; 82 | right: -50%; 83 | top: 0; 84 | transform: skewX(-30deg); 85 | width: 200%; 86 | } 87 | } 88 | } 89 | 90 | @mixin screenreader-only { 91 | // to hide something from view but make it visible to screen readers 92 | // used on some table headers 93 | // based on last.fm tables 94 | position: absolute; 95 | width: 0.1rem; 96 | height: 0.1rem; 97 | margin: -0.1rem; 98 | padding: 0; 99 | overflow: hidden; 100 | clip: rect(0, 0, 0, 0); 101 | border: 0; 102 | } 103 | 104 | $white: #fff; // for tint lint pass 105 | $black: #000; // for shade lint pass 106 | 107 | /// Slightly lighten a color 108 | /// @access public 109 | /// @param {Color} $color - color to tint 110 | /// @param {Number} $percentage - percentage of `$color` in returned color 111 | /// @return {Color} 112 | 113 | @function tint($color, $percentage) { 114 | @return mix($white, $color, $percentage); 115 | } 116 | 117 | /// Slightly darken a color 118 | /// @access public 119 | /// @param {Color} $color - color to shade 120 | /// @param {Number} $percentage - percentage of `$color` in returned color 121 | /// @return {Color} 122 | 123 | @function shade($color, $percentage) { 124 | @return mix($black, $color, $percentage); 125 | } 126 | 127 | 128 | // 129 | // Focus rings... 130 | // 131 | 132 | @mixin basic-focus { 133 | @include box-shadow(inset 0 0 0 0.15rem $focus-color); 134 | border-style: solid; 135 | outline: none; 136 | padding: $focus-padding 0; 137 | } -------------------------------------------------------------------------------- /sass/_grid-ie.scss: -------------------------------------------------------------------------------- 1 | @import "grid"; 2 | 3 | // there should be a call to the grid system with is-ie set to true 4 | 5 | $is-ie: true; 6 | -------------------------------------------------------------------------------- /sass/_grid.scss: -------------------------------------------------------------------------------- 1 | @import "measurements"; 2 | @import "css3"; 3 | @import "general-mixins"; 4 | @import "microformats"; 5 | @import "media-queries"; 6 | 7 | //@warn "remove magic numbers"; 8 | 9 | /// 10 | /// Basic Page header: 11 | /// based on: https://drive.google.com/drive/folders/0B2LQIUUuUDJdUk00VFFLaWJJLU0 12 | /// specifically: Discovery_home_v4a.psd 13 | /// 14 | 15 | @mixin page-header( 16 | $background-color: lighten($page-color-light, 10%), 17 | $font-family: 'Milo-Light', 18 | $font-weight: 400, 19 | $type-color: $nypl-dark-gray) { 20 | background-color: $background-color; 21 | @content; 22 | 23 | h1, 24 | h2 { 25 | font-family: $font-family; 26 | font-size: 2rem; 27 | margin: 0; 28 | } 29 | 30 | h1 { 31 | font-weight: $font-weight; 32 | margin: 1rem 0 1.5rem; 33 | } 34 | 35 | /// 36 | /// TODO: clean this up so its not dependent upon a specific heading level 37 | /// Though its pretty clear at first glance at what its doing... 38 | h1.item-title, 39 | h2.item-title { 40 | font-family: $sans-serif-stack; 41 | font-weight: 400; 42 | } 43 | 44 | h2 { // when it's a secondary title (real title is inside content below) 45 | line-height: 1; 46 | } 47 | 48 | h2 { 49 | font-family: $sans-serif-stack; 50 | font-weight: 400; 51 | margin: 1rem 0 1.5rem; 52 | 53 | @include media($mobile-breakpoint) { 54 | margin-top: 0.5rem; 55 | } 56 | } 57 | } 58 | 59 | 60 | 61 | /// 62 | /// Home Page Hero 63 | /// 64 | 65 | @mixin homepage-hero( 66 | $background-color: lighten($page-color-light, 10%), 67 | $font-family: $sans-serif-stack, 68 | $font-weight: 400, 69 | $type-color: $nypl-red) { 70 | background-color: $background-color; 71 | 72 | h1 { 73 | color: $type-color; 74 | font-family: 'Milo-Light', $font-family; 75 | font-size: 3rem; 76 | font-weight: $font-weight; 77 | margin: 3rem 0 1.5rem; 78 | 79 | @include media($mobile-breakpoint) { 80 | font-size: 2rem; 81 | margin-top: 0.5rem; 82 | margin-bottom: 0.25rem; 83 | } 84 | 85 | @include media($xtrasmall-breakpoint) { 86 | margin: 0.5rem 0 0.75rem; 87 | } 88 | } // /h1 89 | 90 | p { 91 | font-weight: 200; 92 | max-width: none; 93 | 94 | @include media($mobile-breakpoint) { 95 | line-height: 2; 96 | } 97 | } 98 | } // /homepage-hero 99 | 100 | 101 | 102 | /// 103 | /// Breadcrumbs 104 | /// 105 | 106 | @mixin breadcrumbs { 107 | list-style-type: none; 108 | margin: 0 0 0 -0.5rem; 109 | padding-left: 0; 110 | 111 | li { 112 | display: inline-block; 113 | margin-left: 0; 114 | //overflow: hidden; 115 | text-overflow: ellipsis; 116 | white-space: nowrap; 117 | 118 | a { 119 | border-radius: $general-border-radius; 120 | color: $nypl-dark-gray; 121 | padding: 0.25rem 0.45rem; 122 | 123 | &:hover { 124 | background: $nypl-light-gray; 125 | } 126 | 127 | &:visited { 128 | color: lighten($nypl-dark-gray, 20%); 129 | } 130 | } 131 | 132 | 133 | 134 | @include media($mobile-breakpoint) { 135 | max-width: 90vw; 136 | } 137 | 138 | &::before { 139 | content: " > "; 140 | } 141 | 142 | &:first-child::before { 143 | content: ""; 144 | } 145 | } 146 | } 147 | 148 | 149 | 150 | /// 151 | /// Full Width Wrapper(s) Mixin 152 | /// 153 | /// TODO: Find a better way to abstract all this nasty math away from the below calculations... 154 | 155 | @mixin full-width-wrapper($in-header: false) { 156 | @if $in-header == false { 157 | max-width: calc(#{$final-max-width} - #{$final-logo-offset * 2}); 158 | padding: $general-padding $final-logo-offset $general-padding $final-logo-offset; 159 | } @else { 160 | max-width: calc(#{$max-width} - #{$general-padding * 2}); 161 | padding: 0 $general-padding; 162 | } 163 | 164 | position: relative; 165 | margin: 0 auto; 166 | @include clearfix; 167 | 168 | @include media($mobile-breakpoint) { 169 | @if $in-header == false { 170 | padding-left: ($general-padding * 2); 171 | padding-right: ($general-padding * 2); 172 | } @else { 173 | margin: 0; 174 | padding: 0 #{$general-padding * 0.5}; 175 | } 176 | } 177 | } 178 | 179 | 180 | 181 | /// 182 | /// Row Mixin 183 | /// 184 | @mixin row { 185 | margin: 0 -0.5rem; 186 | min-height: 1rem; 187 | @include clearfix; 188 | } 189 | 190 | @mixin column-type( 191 | $border: 0, 192 | $float: left, 193 | $margin-bottom: 1rem, 194 | $width: auto) { 195 | //border: 1px solid $nypl-red; 196 | border: $border; 197 | float: $float; 198 | margin-bottom: $margin-bottom; 199 | min-height: 1rem; 200 | padding: 0 0.5rem; 201 | width: $width; 202 | @include clearfix; 203 | @include box-sizing(border-box); 204 | 205 | @include media($mobile-breakpoint) { 206 | float: none; 207 | padding: 0; 208 | width: auto; 209 | } 210 | } 211 | 212 | @mixin column-full { 213 | @include column-type($float: none); 214 | } 215 | 216 | @mixin column-half { 217 | @include column-type($width: $half); 218 | } 219 | 220 | @mixin column-one-quarter { 221 | @include column-type($width: $one-quarter); 222 | } 223 | 224 | @mixin column-one-third { 225 | @include column-type($width: $one-third); 226 | } 227 | 228 | @mixin column-two-thirds { 229 | @include column-type($width: $two-thirds); 230 | } 231 | 232 | @mixin column-three-quarters { 233 | @include column-type($width: $three-quarters); 234 | } 235 | 236 | @mixin column-offset($column-count) { 237 | margin-left: percentage($column-count / 4); 238 | 239 | @include media($mobile-breakpoint) { 240 | margin-left: 0; 241 | } 242 | } 243 | 244 | // @mixin inner-block { 245 | // @warn "deprecated. use row-column pattern instead."; 246 | // } 247 | -------------------------------------------------------------------------------- /sass/_holds-table.scss: -------------------------------------------------------------------------------- 1 | @mixin holds-table { 2 | @include basic-table; 3 | border-top: 0.25rem solid $page-color; 4 | margin-bottom: 2rem; 5 | margin-top: 1rem; 6 | padding-top: 1rem; 7 | 8 | // make sure we use the right cursors on hover. 9 | // TODO: investigate a more elegant way to accomplish this: 10 | thead tr th { 11 | &[class^=sorting] { // using this attr. selector lets us get 12 | // get at DataTable's injected classes sorting,sort 13 | cursor: pointer; 14 | } 15 | 16 | &[class=sorting_disabled] { 17 | cursor: default; 18 | } 19 | } 20 | 21 | td { 22 | padding-top: 0.75rem; 23 | 24 | @include item-definition-list($dt-width: 10%, $dd-width: 90%); 25 | dl { 26 | padding-left: #{$general-border-width * 5}; 27 | 28 | dt.item-title { // style first item in the Holds table context 29 | font-weight: 700; 30 | width: 100%; 31 | } 32 | } 33 | 34 | &.recap dl { 35 | border-left-color: $nypl-light-blue; 36 | border-left-style: solid; 37 | border-left-width: #{$general-border-width * 2.5}; 38 | } 39 | 40 | .item { 41 | font-weight: 700; 42 | } 43 | } 44 | 45 | td span { 46 | border-left-color: $page-background-color; 47 | border-left-style: solid; 48 | border-left-width: #{$general-border-width * 2.5}; 49 | display: block; 50 | padding: 1rem 0 1rem 0.5rem; 51 | 52 | &.available { 53 | border-left-color: $nypl-green; 54 | color: $nypl-green; 55 | } 56 | 57 | &.in-transit { 58 | border-left-color: $nypl-yellow; 59 | } 60 | 61 | &.ill { 62 | // &::before { 63 | // content: "ill?"; 64 | // } 65 | } 66 | 67 | &.recap { 68 | background-color: lighten($nypl-light-blue, 15%); 69 | } 70 | } 71 | 72 | @include media($mobile-breakpoint) { 73 | thead { 74 | border: 0; 75 | } 76 | 77 | thead tr { 78 | @include screenreader-only; 79 | } 80 | 81 | tr { 82 | border-top: #{$general-border-width * 2.5} solid $nypl-dark-gray; 83 | 84 | &:nth-of-type(1) { 85 | border: 0; 86 | } 87 | } 88 | 89 | td { 90 | border: 0; 91 | display: block; 92 | position: relative; 93 | width: 100%; 94 | 95 | &::before { 96 | display: block; 97 | float: left; 98 | font-weight: bold; 99 | padding-left: #{$general-border-width * 6}; 100 | width: 100%; 101 | } 102 | 103 | a { 104 | display: block; 105 | padding-left: #{$general-border-width * 6}; 106 | } 107 | 108 | dt a { 109 | padding-left: 0; 110 | } 111 | 112 | .item { 113 | font-size: 1.2rem; 114 | padding: 1rem 0; 115 | } 116 | 117 | &:nth-of-type(1)::before { 118 | content: "Item"; 119 | display: none; 120 | } 121 | 122 | &:nth-of-type(2)::before { 123 | content: "Status"; 124 | margin-bottom: 0; 125 | } 126 | 127 | &:nth-of-type(3)::before { 128 | content: "Location"; 129 | } 130 | 131 | &:nth-of-type(4)::before { 132 | content: "Options"; 133 | } 134 | 135 | } 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /sass/_icons.scss: -------------------------------------------------------------------------------- 1 | @mixin nypl-icon( 2 | $background-color: $nypl-white, 3 | $border-radius: 0, 4 | $fill: $page-text-color, 5 | $height: null, 6 | $inverted-color: $inverted-link-color, 7 | $width: null 8 | ) { 9 | background-color: $background-color; 10 | border-radius: $border-radius; 11 | display: inline-block; 12 | fill: $fill; 13 | height: $height; 14 | speak: none; 15 | width: $width; 16 | 17 | &.reversed { 18 | background-color: inherit; 19 | fill: $inverted-color; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /sass/_measurements.scss: -------------------------------------------------------------------------------- 1 | /// Measurements 2 | 3 | /// 4 | /// font base values 5 | /// 6 | 7 | $basefontraw: 16; 8 | 9 | $basefont: $basefontraw * 1px; 10 | 11 | $small-type: ($basefont * 0.9); 12 | 13 | /// 14 | /// page measures 15 | /// 16 | 17 | $max-width-raw: 1315; 18 | $max-width: ($max-width-raw / $basefontraw) * 1rem; // in rems 19 | 20 | /// 21 | /// Breakpoints 22 | /// 23 | 24 | $intermediate-breakpoint: 1120px; 25 | $mobile-breakpoint: 965px; 26 | $xtrasmall-breakpoint: 483px; 27 | 28 | 29 | 30 | /// 31 | /// Borders 32 | /// 33 | 34 | $focus-width: (2 / $basefontraw) * 1rem; 35 | $related-links-border-width: 0.25rem; 36 | $simple-border: (1 / $basefontraw) * 1rem; 37 | 38 | 39 | 40 | /// 41 | /// Grid Measures 42 | /// 43 | 44 | $full-width: 100%; 45 | $one-quarter: $full-width / 4; 46 | $one-third: $full-width / 3; 47 | $half: $full-width / 2; 48 | $two-thirds: ($full-width) - ($one-third); 49 | $three-quarters: ($full-width) - ($one-quarter); 50 | $gutter: 0.5rem; 51 | $general-padding: 1rem; 52 | $general-margin: $general-padding; 53 | $general-border-radius: 0.2rem; 54 | $general-border-width: ($simple-border * 2); 55 | $focus-padding: ($general-padding / 2); 56 | 57 | 58 | 59 | 60 | /// 61 | /// Animation timing 62 | /// 63 | 64 | $hover-time: 0.1s; 65 | 66 | 67 | 68 | /// 69 | /// Header numbers 70 | /// 71 | /// Be advised that much of the DTK's calculations are based on the Header defined herein, NOT the Global Header React Appliction that is in production 72 | /// 73 | 74 | $logo-ratio: 144 / 257; 75 | $logo-width-raw: 16; 76 | $logo-width: $logo-width-raw * 1rem; 77 | $logo-height-raw: $logo-width-raw * $logo-ratio; 78 | $logo-height: $logo-height-raw * 1rem; 79 | $collapsed-service-height: 10px; 80 | $collapsed-nav-height: 30px; 81 | 82 | /// 83 | /// These values are based on the current implementation of the logo in the React App header. 84 | 85 | /// Convert the width of each logo element into rems: 86 | $logo-type-width-raw: 112.53 / $basefontraw; 87 | $logo-type-width: $logo-type-width-raw * 1rem; 88 | $logo-mark-width-raw: 96.37 / $basefontraw; 89 | $logo-mark-width: $logo-mark-width-raw * 1rem; 90 | 91 | /// the gap between the logomark and logotype 92 | $logo-gap-between: $logo-type-width - $logo-mark-width; 93 | 94 | /// More than likely this is the kludgiest way to 95 | /// do the math that sets up the padding & spacing necessary for nice layout that our grid will consume: 96 | /// the first value that sets the max-width of the container: 97 | $final-max-width: $max-width - $general-padding; 98 | 99 | /// this gets the width of the logotype and subracts the width of the gap between the mark and the type: 100 | $logo-offset: $logo-mark-width + $logo-gap-between; 101 | 102 | $final-logo-offset: $logo-width - ($logo-offset + 0.5); 103 | 104 | $final-offset: $logo-offset + $general-padding; 105 | -------------------------------------------------------------------------------- /sass/_media-queries.scss: -------------------------------------------------------------------------------- 1 | $is-ie: false !default; 2 | // $mobile-ie6: true !default; 3 | 4 | @mixin media( 5 | $max-width, 6 | $min-width: false, 7 | $ignore-for-ie: false) { 8 | @media (max-width: $max-width) { 9 | @content; 10 | } 11 | // @if $is-ie and ($ignore-for-ie == false) { 12 | // @if $size != mobile { 13 | // @if ($ie-version == 6 and $mobile-ie6 == false) or $ie-version > 6 { 14 | // @content; 15 | // } 16 | // } 17 | // } @else { 18 | // @if $size == desktop { 19 | // @media (min-width: 769px){ 20 | // @content; 21 | // } 22 | // } @else if $size == tablet { 23 | // @media (min-width: 641px){ 24 | // @content; 25 | // } 26 | // } @else if $size == mobile { 27 | // @media (max-width: 640px){ 28 | // @content; 29 | // } 30 | // } @else if $max-width != false { 31 | // @media (max-width: $max-width){ 32 | // @content; 33 | // } 34 | // } @else if $min-width != false { 35 | // @media (min-width: $min-width){ 36 | // @content; 37 | // } 38 | // } @else { 39 | // @media (min-width: $size){ 40 | // @content 41 | // } 42 | // } 43 | // } 44 | } 45 | 46 | @mixin ie-lte($version) { 47 | @if $is-ie { 48 | @if $ie-version <= $version { 49 | @content; 50 | } 51 | } 52 | } 53 | 54 | // @mixin ie($version) { 55 | // @if $is-ie { 56 | // @if $ie-version == $version { 57 | // @content; 58 | // } 59 | // } 60 | // } 61 | -------------------------------------------------------------------------------- /sass/_microformats.scss: -------------------------------------------------------------------------------- 1 | //@warn "remove magic numbers"; 2 | 3 | @mixin banner-alert() { 4 | background-color: $alert-color; 5 | padding: 0.8rem 0; 6 | } 7 | 8 | @mixin bar($percent: 100) { 9 | background: linear-gradient(to right, transparent 0%, transparent ((100 - $percent) * 1%), $nypl-bar-color ((100 - $percent) * 1%), $nypl-bar-color) 100%; 10 | } 11 | 12 | @mixin lead { 13 | font-size: 1.6rem; 14 | 15 | @include media($mobile-breakpoint) { 16 | font-size: 1.2rem; 17 | } 18 | } 19 | 20 | @mixin basic-list { 21 | list-style-type: none; 22 | 23 | li { 24 | margin-bottom: 0.5rem; 25 | margin-left: 0; 26 | } 27 | } 28 | 29 | @mixin bar-list { 30 | @include basic-list; 31 | 32 | h2 { 33 | font-size: 1.4rem; 34 | } 35 | 36 | li { 37 | span.count { 38 | color: $nypl-gray; 39 | display: inline-block; 40 | float: right; 41 | margin-right: 0.2rem; 42 | } 43 | } 44 | } 45 | 46 | @mixin secondary-title { 47 | font-size: 1.2rem; 48 | font-weight: bold; 49 | line-height: 1.5; 50 | margin: 0; 51 | } 52 | 53 | @mixin a11y-note { 54 | border-left: 1rem solid $alert-color; 55 | padding-left: 1rem; 56 | } 57 | 58 | @mixin general-note { 59 | border-left: 1rem solid $nypl-gray; 60 | padding-left: 1rem; 61 | } 62 | 63 | @mixin progress-indicator { 64 | color: $nypl-gray; 65 | margin: 0; 66 | padding: 0; 67 | } 68 | 69 | @mixin location-info { 70 | border-left: 1rem solid $nypl-light-gray; 71 | margin-bottom: 2rem; 72 | padding-left: 1rem; 73 | 74 | p { 75 | margin: 0; 76 | margin-bottom: 0.5rem; 77 | } 78 | 79 | .nypl-room { 80 | font-weight: bold; 81 | } 82 | 83 | .nypl-access { 84 | color: $highlight-color; 85 | font-weight: bold; 86 | } 87 | } 88 | 89 | @mixin location-hours { 90 | @include basic-table; 91 | 92 | margin-bottom: 2rem; 93 | 94 | .nypl-current { 95 | background-color: $nypl-yellow-tint; 96 | } 97 | 98 | @include media($mobile-breakpoint) { 99 | thead tr { 100 | @include screenreader-only; 101 | } 102 | 103 | tr { 104 | border: 0; 105 | } 106 | 107 | 108 | td { 109 | display: block; 110 | position: relative; 111 | width: 100%; 112 | 113 | &::before { 114 | display: block; 115 | float: left; 116 | font-weight: bold; 117 | margin-bottom: 2rem; 118 | width: 40%; 119 | } 120 | 121 | &:nth-of-type(1)::before { 122 | content: "Monday"; 123 | } 124 | 125 | &:nth-of-type(2)::before { 126 | content: "Tuesday"; 127 | } 128 | 129 | &:nth-of-type(3)::before { 130 | content: "Wednesday"; 131 | } 132 | 133 | &:nth-of-type(4)::before { 134 | content: "Thursday"; 135 | } 136 | 137 | &:nth-of-type(5)::before { 138 | content: "Friday"; 139 | } 140 | 141 | &:nth-of-type(6)::before { 142 | content: "Saturday"; 143 | } 144 | 145 | &:nth-of-type(7)::before { 146 | content: "Sunday"; 147 | } 148 | } 149 | 150 | } 151 | } // /@location-hours 152 | 153 | 154 | 155 | //@warn "Move these mixins out of the microformats partial since they effect the entire style guide..."; 156 | 157 | @mixin related-links { 158 | border-top: $related-links-border-width solid $nypl-gray; 159 | padding-top: 2rem; 160 | } 161 | 162 | @mixin toolkit-example { 163 | border: $simple-border solid $nypl-light-gray; 164 | padding: ($general-padding * 3) $general-padding ($general-padding * 0.5); 165 | position: relative; 166 | 167 | .nypl-example-text { 168 | border: $simple-border solid $nypl-light-gray; 169 | border-left: 0; 170 | border-top: 0; 171 | color: $nypl-gray; 172 | display: inline-block; 173 | font-size: 1rem; 174 | font-weight: normal; 175 | left: 0; 176 | padding: 0.3rem $general-padding; 177 | position: absolute; 178 | top: 0; 179 | } 180 | } 181 | 182 | @mixin toolkit-example-dark { 183 | background: $nypl-footer-color; 184 | 185 | &::before { 186 | background-color: $inverted-link-color; 187 | } 188 | } 189 | 190 | 191 | // 192 | // Discovery HP Image, H4 & copy section below the Hero 193 | // TODO: Make a proper toolkit patter for this 194 | // TODO: This is a bit hacky to override the toolkit's established grid styles, but in this case for medium sized viewports we need an breakpoint to hanle this layout: 195 | //@warn "many magic numbers & work arounds here"; 196 | 197 | // Special case where there is an h3 that has special styling. here it is: 198 | 199 | @mixin special-title( 200 | $color: $nypl-red, 201 | $font-size: 2rem, 202 | $font-weight: 200) { 203 | color: $color; 204 | font-size: $font-size; 205 | font-weight: $font-weight; 206 | 207 | @include media($mobile-breakpoint) { 208 | font-size: 1.75rem; 209 | margin: 0.85rem 0; 210 | } 211 | } 212 | 213 | @mixin quarter-image { 214 | width: 100%; 215 | 216 | .image-column-one-quarter { 217 | 218 | @include media($mobile-breakpoint) { 219 | float: left; 220 | margin-bottom: 1rem; 221 | padding-right: 0.5rem; 222 | width: 25%; 223 | } 224 | 225 | @include media($xtrasmall-breakpoint) { 226 | width: 100%; 227 | } 228 | } 229 | 230 | .image-column-three-quarters { 231 | 232 | @include media($mobile-breakpoint) { 233 | float: left; 234 | margin-bottom: 1rem; 235 | padding: 0 0.5rem; 236 | width: 75%; 237 | } 238 | 239 | @include media($xtrasmall-breakpoint) { 240 | width: 100%; 241 | float: none; 242 | } 243 | } 244 | } 245 | -------------------------------------------------------------------------------- /sass/_modal-container.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Very basic modal container 3 | // 4 | // Import this as: 5 | // .nypl-basic-modal-container { 6 | // @include basic-modal; 7 | // } 8 | 9 | #closeModal { 10 | display: none; 11 | } 12 | 13 | #filterButton { 14 | display: none; 15 | } 16 | 17 | #cancelFiltering { 18 | display: none; 19 | } 20 | 21 | #popup-no-js:target { 22 | display: block; 23 | opacity: 1; 24 | visibility: visible; 25 | } 26 | 27 | @mixin basic-modal { 28 | 29 | &.inactive { 30 | display: none; 31 | opacity: 0; 32 | visibility: hidden; 33 | } 34 | 35 | &.no-js { 36 | display: none; 37 | opacity: 0; 38 | visibility: hidden; 39 | } 40 | 41 | &.no-js:target, 42 | &.active { 43 | display: block; 44 | opacity: 1; 45 | visibility: visible; 46 | 47 | .nypl-modal-underlay { 48 | background: transparentize($nypl-white, 0.2); 49 | bottom: 0; 50 | left: 0; 51 | position: fixed; 52 | right: 0; 53 | top: 0; 54 | z-index: 1000; 55 | } 56 | 57 | 58 | $shadow: 0 0.125rem 0.5rem 0.25rem transparentize($nypl-gray-brown, 0.75); 59 | 60 | .nypl-modal-content { 61 | @include box-shadow($shadow); 62 | background: darken($nypl-white, 0.2); 63 | bottom: 0; 64 | display: block; 65 | left: 0; 66 | height: 100%; 67 | overflow: scroll; 68 | position: fixed; 69 | right: 0; 70 | top: 0; 71 | width: 100%; 72 | z-index: 1001; 73 | -webkit-overflow-scrolling: none; 74 | 75 | h3 { 76 | margin-bottom: 0; 77 | margin-left: ($general-margin * 3.125); 78 | 79 | @include media($xtrasmall-breakpoint) { 80 | margin-left: $general-margin; 81 | } 82 | } 83 | } // /.nypl-modal-content 84 | 85 | .nypl-x-close-button { 86 | display: block; 87 | right: 3%; 88 | height: 3rem; 89 | padding: 0; 90 | position: absolute; 91 | top: ($general-margin * 0.75); 92 | width: 5rem; 93 | z-index: 2001; 94 | 95 | @include media($xtrasmall-breakpoint) { 96 | right: 5%; 97 | width: 1.75rem; 98 | 99 | span { 100 | @include screenreader-only; 101 | } 102 | } 103 | } 104 | } // /.active 105 | } // /.basic-modal 106 | -------------------------------------------------------------------------------- /sass/_modal.scss: -------------------------------------------------------------------------------- 1 | // 2 | // NYPL Search Results Filter Modal 3 | // TODO: Too much quick and dirty in here... needs clean up / refactoring 4 | // TODO: Separate the Modality of this from the specific useage of this particular filtering 5 | 6 | @mixin popup { 7 | 8 | &.inactive { 9 | display: none; 10 | } 11 | 12 | &.no-js-active, 13 | &.active { 14 | background: transparentize($nypl-white, 0.2); 15 | display: block; 16 | height: 100%; 17 | overflow: auto; 18 | position: fixed; 19 | top: 0; 20 | width: 100%; 21 | z-index: 2101; 22 | 23 | .nypl-popup-filter-menu { 24 | $shadow: 0 0.125rem 0.5rem 0.25rem transparentize($nypl-gray-brown, 0.75); 25 | @include box-shadow($shadow); 26 | background: $nypl-white; 27 | border-bottom: $general-border-width solid $nypl-light-gray; 28 | left: 0; 29 | //position: absolute; 30 | top: 0; 31 | width: 100%; 32 | 33 | 34 | @include media($xtrasmall-breakpoint) { 35 | padding-top: ($general-padding * 1.5); 36 | } 37 | 38 | .nypl-parent-fieldset { 39 | border: 0; 40 | margin: 0; 41 | padding-left: 0; 42 | padding-right: 0; 43 | 44 | // TODO: Explore a more elegant way of handling this: 45 | > legend:first-child { 46 | display: block; 47 | margin-left: ($general-margin * 3.125); 48 | width: 100%; 49 | 50 | @include media($xtrasmall-breakpoint) { 51 | margin-left: ($general-margin * 1.25); 52 | } 53 | 54 | h3 { 55 | margin-bottom: 0; 56 | // padding-left: ($general-padding * 2); 57 | // padding-top: $general-padding; 58 | 59 | @include media($xtrasmall-breakpoint) { 60 | padding-left: 0; 61 | } 62 | 63 | &:focus { 64 | outline-color: $focus-color; 65 | outline-style: solid; 66 | outline-width: $focus-width; 67 | padding: ($general-padding / 2) 0; 68 | } // /.:focus 69 | } // /h3 70 | } // / > legend:first-child 71 | 72 | .nypl-inner-fieldset:nth-child(4) { 73 | border: 0; 74 | } 75 | } 76 | 77 | 78 | // 79 | // Here we have rules to layout the inner fieldsets... 80 | // TODO: build a better mixin to handle these kinds of nested fielsets w/ easier ease. 81 | // 82 | .nypl-inner-fieldset { 83 | border: 0; 84 | border-bottom: ($general-border-width * 0.25) solid lighten($nypl-gray-cool, 15%); 85 | padding: 0 $general-padding 0 ($general-padding * 3.125); 86 | 87 | @include media($xtrasmall-breakpoint) { 88 | padding-left: ($general-padding * 1.25); 89 | } 90 | 91 | legend { 92 | font-size: 1.125rem; 93 | margin-top: 0.75rem; 94 | } 95 | 96 | // where we have columns needed: 97 | .nypl-generic-checkbox.nypl-generic-columns { 98 | 99 | @include generic-columns(3); 100 | max-width: 45rem; 101 | 102 | @include media($xtrasmall-breakpoint) { 103 | @include generic-columns(2); 104 | 105 | } 106 | } 107 | } // /.nypl-inner-fieldset 108 | 109 | // 110 | // This handles just the date fiels set since it needs special attention 111 | // 112 | .nypl-inner-fieldset-date { 113 | padding-bottom: ($general-padding * 1.125); 114 | } 115 | 116 | // 117 | // Here we abuse the nicely crafted name field... 118 | // 119 | .nypl-name-field { 120 | margin: 0; 121 | 122 | div { 123 | float: left; 124 | margin-right: ($general-padding * 1.125); 125 | width: 25%; 126 | 127 | @include media($xtrasmall-breakpoint) { 128 | width: 85%; 129 | } 130 | } 131 | } // /.nypl-name-field 132 | 133 | 134 | // 135 | // Buttons for this context need all kinds of overriding and such... 136 | // TODO: do a better job of this too... 137 | // 138 | .nypl-filter-button-container { 139 | //background: $nypl-light-gray; 140 | border-top: ($general-border-width * 0.25) solid lighten($nypl-gray-cool, 15%); 141 | height: 3.5rem; 142 | padding: $general-padding 0 0 ($general-padding * 2); 143 | 144 | @include media($xtrasmall-breakpoint) { 145 | height: 6.5rem; 146 | padding-left: ($general-padding * 1.125); 147 | } 148 | } // /.nypl-filter-button-container 149 | 150 | .nypl-control-buttons { 151 | @include media($mobile-breakpoint) { 152 | height: 2.5rem; 153 | width: 20.5rem; 154 | } 155 | 156 | @include media($xtrasmall-breakpoint) { 157 | height: 5.5rem; 158 | width: 9.5rem; 159 | } 160 | } 161 | 162 | .nypl-filter-button { 163 | @include basic-button-icon( 164 | // $background-color: $nypl-red, 165 | // $border-color: $nypl-red, 166 | // $text-color: $nypl-white 167 | ); 168 | @include media($xtrasmall-breakpoint) { 169 | display: block; 170 | float: left; 171 | margin: 0 ($general-margin * 0.5) $general-margin; 172 | position: relative; 173 | 174 | &:nth-child(2) { 175 | margin-right: 0; 176 | } 177 | } 178 | // .nypl-icon { 179 | // background: $nypl-red; 180 | // fill: $nypl-white; 181 | // position: relative; 182 | // top: 0.125rem; 183 | // } 184 | } // /.nypl-filter-button 185 | 186 | .nypl-x-close-button { 187 | display: block; 188 | // float: right; 189 | position: relative; 190 | margin-left: calc(93% - 5rem); 191 | // margin-right: $general-margin; 192 | // bottom: 43rem; 193 | top: -43rem; 194 | 195 | // @include media($mobile-breakpoint) { 196 | // bottom: 43.5rem; 197 | // } 198 | 199 | @include media($xtrasmall-breakpoint) { 200 | // bottom: 51.75rem; 201 | // right: 1.25rem; 202 | 203 | span { 204 | @include screenreader-only; 205 | } 206 | } 207 | } // /.nypl-x-close-button 208 | } 209 | 210 | // .nypl-popup-filter-overlay { 211 | // //background: transparentize($nypl-white, 0); 212 | // bottom: 0; 213 | // left: 0; 214 | // position: fixed; 215 | // right: 0; 216 | // top: 0; 217 | // z-index: 2100; 218 | // } 219 | } // /.active 220 | } // /@mixin popup 221 | -------------------------------------------------------------------------------- /sass/_nypl-normalize.scss: -------------------------------------------------------------------------------- 1 | @import "normalize"; 2 | @import "css3"; 3 | @import "measurements"; 4 | @import "colors"; 5 | @import "typography"; 6 | @import "icons"; 7 | @import "forms"; 8 | @import "buttons"; 9 | 10 | //@warn "remove magic numbers and convert to mixins?"; 11 | 12 | body { 13 | color: $page-text-color; 14 | 15 | } 16 | 17 | ::selection { 18 | background: $page-text-color; 19 | color: $page-background-color; 20 | } 21 | 22 | ::-moz-selection { 23 | background: $page-text-color; 24 | color: $page-background-color; 25 | } 26 | 27 | html { 28 | @include font-settings; 29 | background-color: $page-background-color; 30 | 31 | //@warn "hard-coded filter to make page grayscale. make mixin?"; 32 | -webkit-filter: grayscale(1); 33 | filter: grayscale(1); 34 | -webkit-filter: none; 35 | filter: none; 36 | } 37 | 38 | 39 | h1, 40 | h2, 41 | h3, 42 | h4, 43 | h5, 44 | h6, 45 | p { 46 | margin-top: 1.5rem; 47 | } 48 | 49 | h1, 50 | h2, 51 | h3, 52 | h4, 53 | h5, 54 | h6, 55 | p, 56 | li { 57 | max-width: 35rem; 58 | word-wrap: break-word; 59 | } 60 | 61 | h1 { 62 | font-size: 2.5rem; 63 | line-height: 1; 64 | } 65 | 66 | h2 { 67 | font-size: 1.6rem; 68 | line-height: 1.1; 69 | } 70 | 71 | h3 { 72 | font-size: 1.4rem; 73 | font-weight: 400; 74 | } 75 | 76 | p { 77 | margin-top: 0; 78 | margin-bottom: 1rem; 79 | } 80 | 81 | h4 { 82 | font-size: 1.2rem; 83 | font-weight: 400; 84 | line-height: 1.5; 85 | margin: 0; 86 | } 87 | 88 | ul, 89 | ol { 90 | margin-top: 0; 91 | padding: 0; 92 | } 93 | 94 | li { 95 | margin-left: 0.5rem; 96 | } 97 | 98 | code, 99 | pre { 100 | background-color: $nypl-light-gray; 101 | font-family: $monospace-stack; 102 | font-size: 0.9rem; 103 | } 104 | 105 | code { 106 | padding-left: 0.25rem; 107 | padding-right: 0.25rem; 108 | } 109 | 110 | strong { 111 | font-weight: bold; 112 | } 113 | 114 | legend { 115 | display: table; 116 | } 117 | 118 | a { 119 | display: inline-flex; 120 | padding: 0 1px; 121 | text-decoration: underline; 122 | 123 | &:link { 124 | color: $link-color; 125 | } 126 | 127 | &:visited { 128 | color: $link-visited-color; 129 | } 130 | 131 | &:hover, 132 | &:visited:hover { 133 | color: $link-hover-color; 134 | text-decoration: none; 135 | } 136 | 137 | &.inverted { 138 | &:link { 139 | color: $inverted-link-color; 140 | } 141 | 142 | &:visited { 143 | color: $inverted-link-visited-color; 144 | } 145 | 146 | &:hover, 147 | &:visited:hover { 148 | color: $inverted-link-color; 149 | } 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /sass/_omni-search.scss: -------------------------------------------------------------------------------- 1 | @import "general-mixins"; 2 | @import "media-queries"; 3 | $form-padding: 0.5rem; 4 | 5 | @mixin basic-omnisearch ( 6 | $background-color: $nypl-white, 7 | $border: 0, 8 | $border-radius: ($general-border-radius * 2), 9 | $padding: $form-padding) { 10 | background-color: $background-color; 11 | border: $border; 12 | border-radius: $border-radius; 13 | padding: $padding; 14 | } 15 | 16 | @mixin nypl-omnisearch { 17 | @include basic-omnisearch( 18 | $background-color: $nypl-white, 19 | $border: solid 0.0625rem $nypl-dark-gray, 20 | $border-radius: $general-border-radius, 21 | $padding: 0); 22 | font-weight: 400; 23 | height: 3rem; 24 | 25 | @include media($mobile-breakpoint) { 26 | width: 97%; 27 | } 28 | 29 | button, 30 | input, 31 | .nypl-omni-fields { 32 | display: block; 33 | float: left; 34 | height: 2rem; 35 | } 36 | 37 | ::placeholder { 38 | color: $nypl-dark-gray; 39 | opacity: 1; 40 | } 41 | 42 | legend { 43 | display: none; 44 | height: 0; 45 | width: 0; 46 | } 47 | 48 | .nypl-omni-fields { 49 | background-color: $nypl-white; 50 | border-right: $general-border-width / 1.5 solid $nypl-dark-gray; 51 | margin-left: 0.25rem; 52 | padding-right: 0.25rem; 53 | position: relative; 54 | top: 0.475rem; 55 | width: 28%; 56 | 57 | @include media($mobile-breakpoint) { 58 | font-size: 0.9rem; 59 | margin-left: 0.25rem; 60 | padding-right: 0.25rem; 61 | width: 28%; 62 | } // /mobile-breakpoint 63 | 64 | label { 65 | @include screenreader-only; 66 | } 67 | 68 | select { 69 | @include select; 70 | border-radius: 0; 71 | border-right: $general-border-width / 1.5; 72 | background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3LjY5OTA1IiBoZWlnaHQ9IjMuOTg3MTMiIHZpZXdCb3g9IjAgMCA3LjY5OTA1IDMuOTg3MTMiPgogIDx0aXRsZT5kb3duLjIud2VkZ2U8L3RpdGxlPgogIDxwb2x5bGluZSBwb2ludHM9IjcuMzk1IDAuMzYgMy44NSAzLjM3IDAuMzA0IDAuMzU4IiBmaWxsPSIjZmZmIiBzdHJva2U9IiMyMzFmMjAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIwLjk0MDUiLz4KPC9zdmc+) no-repeat 95% $nypl-white; 73 | background-color: $nypl-white; 74 | text-overflow: ellipsis; 75 | } 76 | } // /.nypl-omni-fields 77 | 78 | input[type=text], 79 | input[type=email], 80 | input[type=number] { 81 | @include input; 82 | margin: 0 1%; 83 | text-indent: $form-padding; 84 | } 85 | 86 | input[type=text] { 87 | background: $nypl-white; 88 | position: relative; 89 | width: 50%; 90 | top: 0.475rem; 91 | 92 | @include media($mobile-breakpoint) { 93 | width: 45%; 94 | } 95 | } 96 | 97 | input[type=submit] { 98 | background: $nypl-blue; 99 | border: 0; 100 | border-radius: 0.0625rem; 101 | border-top-left-radius: 0; 102 | border-bottom-left-radius: 0; 103 | color: $nypl-white; 104 | float: right; 105 | height: 3rem; 106 | position: relative; 107 | width: 15%; 108 | 109 | @include media($mobile-breakpoint) { 110 | font-size: $small-type; 111 | width: 20%; 112 | } 113 | 114 | &:hover, 115 | &:focus { 116 | background-color: $nypl-white; 117 | border: solid 0.0625rem $nypl-blue; 118 | color: $nypl-blue; 119 | } 120 | } 121 | 122 | svg { 123 | display: inline-block; 124 | fill: $nypl-dark-gray; 125 | height: 1.3125rem; 126 | margin-left: 93.5%; 127 | position: relative; 128 | top: -1.9rem; 129 | width: 0.9375rem; 130 | } 131 | } 132 | 133 | // 134 | // needs a better name, this widget is the remains of the breadcrumbs & save record button below the search field... 135 | // Possibly make this its own mixin? 136 | // 137 | .search-control { 138 | color: $nypl-dark-gray; 139 | font-size: 0.8rem; 140 | font-weight: 700; 141 | letter-spacing: 0.04rem; 142 | margin-top: 1.75rem; 143 | 144 | @include media($mobile-breakpoint) { 145 | margin-top: 0.5rem; 146 | } 147 | // 148 | // Back to results link 149 | // svg back arrow 150 | // 151 | svg { 152 | fill: $nypl-gray-cool; 153 | height: 2rem; 154 | position: relative; 155 | width: 0.5625rem; 156 | top: 0.7rem; 157 | } 158 | 159 | a { 160 | color: $nypl-dark-gray; 161 | margin-left: 0.5rem; 162 | text-decoration: none; 163 | } 164 | 165 | a:hover { 166 | text-decoration: underline; 167 | } 168 | } // /nypl-omnisearch 169 | 170 | 171 | 172 | // Override for the omnisearch div to work as a fieldset and 173 | // allow focus on the search button. 174 | // TODO: Integrate this a little better 175 | div.nypl-omnisearch { 176 | 177 | &.nypl-spinner-field { 178 | overflow: inherit; 179 | } 180 | 181 | &.spinning { 182 | overflow: hidden; 183 | } 184 | } 185 | -------------------------------------------------------------------------------- /sass/_pager.scss: -------------------------------------------------------------------------------- 1 | // Tradional numbered pager 2 | @mixin pager-item( 3 | $width: ($general-padding * 2)) { 4 | li { 5 | border: 1px dotted $nypl-red; 6 | display: inline-block; 7 | text-align: center; 8 | width: $width; 9 | 10 | @include media($mobile-breakpoint) { 11 | margin-left: 0; 12 | } 13 | 14 | a { 15 | float: none; 16 | } 17 | } 18 | } 19 | 20 | @mixin pager-items( 21 | $border: ($general-border-width / 1.5) solid $nypl-gray, 22 | $font-size: 1rem) { 23 | ul { 24 | //display: inline-block; 25 | font-size: $font-size; 26 | list-style: none; 27 | margin: auto; 28 | overflow: hidden; 29 | padding: $general-padding; 30 | position: relative; 31 | width: auto; 32 | 33 | @include media($mobile-breakpoint) { 34 | font-size: ($font-size * 0.85); 35 | padding-left: 0; 36 | padding-right: 0; 37 | } 38 | 39 | .pager-previous { 40 | border-right: $border; 41 | width: 12%; 42 | 43 | @include media($mobile-breakpoint) { 44 | overflow: hidden; 45 | text-overflow: ellipsis; 46 | white-space: nowrap; 47 | } 48 | } 49 | 50 | .pager-next { 51 | border-left: $border; 52 | width: 12%; 53 | 54 | @include media($mobile-breakpoint) { 55 | overflow: hidden; 56 | text-overflow: ellipsis; 57 | white-space: nowrap; 58 | } 59 | } 60 | } 61 | 62 | @include pager-item; 63 | } // /pager-items 64 | 65 | @mixin numbered-pager( 66 | $border-color: $nypl-light-gray, 67 | $border-width: ($general-border-width / 1.5), 68 | $border-radius: $general-border-radius) { 69 | // container 70 | border: $border-color solid $border-width; 71 | border-radius: $border-radius; 72 | // numbers 73 | // forward-backward arrows 74 | @include pager-items; 75 | } 76 | -------------------------------------------------------------------------------- /sass/_typography.scss: -------------------------------------------------------------------------------- 1 | @import "measurements"; 2 | 3 | $sans-serif-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 4 | 5 | $serif-stack: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 6 | 7 | $monospace-stack: "SFMono-Regular", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 8 | 9 | @mixin font-settings { 10 | font-family: $sans-serif-stack; 11 | font-size: $basefont; 12 | line-height: 1.65; 13 | } 14 | -------------------------------------------------------------------------------- /sass/docs.scss: -------------------------------------------------------------------------------- 1 | @import "typography"; 2 | @import "grid"; 3 | @import "general-mixins"; 4 | @import "measurements"; 5 | @import "colors"; 6 | @import "icons"; 7 | 8 | 9 | .hljs-selector-class { 10 | color: $highlight-color; // overriding highlightjs which has low contrast in css class highlighting 11 | } 12 | 13 | #skip a { 14 | background-color: $nypl-white; 15 | border: 0; 16 | color: $link-color; 17 | display: block; 18 | font-size: 13px; 19 | height: 1px; 20 | left: -10000px; 21 | line-height: 2; 22 | overflow: hidden; 23 | padding: 5px 10px 3px; 24 | position: absolute; 25 | top: 7px; 26 | width: 1px; 27 | z-index: 1000; 28 | 29 | &:focus { 30 | border: 5px solid $focus-color; 31 | height: auto; 32 | left: 7px; 33 | outline: 0; 34 | overflow: visible; 35 | padding: ($general-padding / 2) 0; 36 | width: auto; 37 | } 38 | } 39 | 40 | .hidden { 41 | display: none; 42 | } 43 | 44 | .centered { 45 | text-align: center; 46 | } 47 | 48 | $blue: #00f; 49 | $gray: #ccc; 50 | 51 | code { 52 | border-radius: $general-border-radius; 53 | padding: 0; 54 | 55 | &::before, 56 | &::after { 57 | letter-spacing: -0.2em; 58 | content: "\00a0"; 59 | } 60 | } 61 | 62 | pre { 63 | border: $simple-border solid $nypl-light-gray; 64 | } 65 | 66 | h1 { 67 | margin-top: 0; 68 | } 69 | 70 | .toolkit-svg-icon { 71 | border: 1px dotted $nypl-light-gray; 72 | margin-right: 1rem; 73 | } 74 | 75 | .clickable-header { 76 | cursor: pointer; 77 | } 78 | 79 | .clickable-header:hover { 80 | text-decoration: underline; 81 | } 82 | 83 | .top-level-header { 84 | display: inline-block; 85 | } 86 | 87 | .back-to-top { 88 | cursor: pointer; 89 | font-style: normal; 90 | margin-left: 0.5rem; 91 | 92 | &:hover { 93 | text-decoration: underline; 94 | } 95 | } 96 | 97 | // Style the Color swatches in color.html 98 | 99 | // Create the color swatch classes used in sections/color.html 100 | @mixin swatch-box ($color-name: $nypl-light-gray) { 101 | background-color: $color-name; 102 | @content; 103 | } 104 | 105 | $colors: ( 106 | nypl-red: $nypl-red, 107 | nypl-red-dark: $nypl-red-dark, 108 | nypl-red-tint: $nypl-red-tint, 109 | nypl-blue: $nypl-blue, 110 | nypl-blue-dark: $nypl-blue-dark, 111 | nypl-light-blue: $nypl-light-blue, 112 | nypl-blue-tint: $nypl-blue-tint, 113 | nypl-gray-cool: $nypl-gray-cool, 114 | nypl-gray: $nypl-gray, 115 | nypl-gray-brown: $nypl-gray-brown, 116 | nypl-dark-gray: $nypl-dark-gray, 117 | nypl-light-gray: $nypl-light-gray, 118 | nypl-white: $nypl-white, 119 | nypl-black: $nypl-black, 120 | nypl-yellow: $nypl-yellow, 121 | nypl-yellow-tint: $nypl-yellow-tint, 122 | nypl-orange: $nypl-orange, 123 | nypl-orange-desaturated: $nypl-orange-desaturated, 124 | nypl-green: $nypl-green, 125 | nypl-green-dark: $nypl-green-dark, 126 | nypl-green-tint: $nypl-green-tint, 127 | nypl-purple: $nypl-purple, 128 | nypl-purple-dark: $nypl-purple-dark, 129 | nypl-purple-tint: $nypl-purple-tint, 130 | nypl-teal: $nypl-teal, 131 | nypl-teal-dark: $nypl-teal-dark, 132 | nypl-teal-tint: $nypl-teal-tint 133 | ); 134 | 135 | @each $nypl-colors, $color-name in $colors { 136 | .#{$nypl-colors}-swatch { 137 | @include swatch-box ($color-name); 138 | } 139 | } 140 | 141 | 142 | .swatches { 143 | box-sizing: border-box; 144 | 145 | .reverse { 146 | color: $nypl-black; 147 | } 148 | } 149 | 150 | .color-box { 151 | list-style: none; 152 | padding: 0.25rem; 153 | margin-left: 0; 154 | 155 | > .main { 156 | height: 8rem; 157 | padding-top: 3rem; 158 | } 159 | 160 | > div { 161 | color: $nypl-white; 162 | min-height: 4rem; 163 | margin: 0; 164 | padding: 1rem 0 1rem 1rem; 165 | text-align: left; 166 | } 167 | } 168 | 169 | // Customize the A11y Table here: /sections/color-a11y.html 170 | .nypl-ally-table { 171 | th { 172 | text-align: left; 173 | } 174 | } 175 | 176 | 177 | // Creating Some Styles for the TK Docs themselves 178 | // adding a toolkit class to the body tag 179 | // Some of this stuff is purely cosmetic. deal with it. 180 | .toolkit { 181 | .nypl-toolkit-header { 182 | @include page-header; 183 | background-color: lighten($nypl-light-blue, 20%); 184 | border-bottom: solid ($general-border-width * 2) $nypl-blue-dark; 185 | 186 | h2 { 187 | color: $nypl-blue-dark; 188 | margin-bottom: 0.25rem; 189 | //text-shadow: 1px 1px 0 darken($nypl-blue, 0.1); 190 | 191 | + span { 192 | color: $nypl-blue-dark; 193 | font-style: italic; 194 | } 195 | } // h2 block thing... 196 | } // /.nypl-page-header 197 | 198 | .main-page { 199 | h3.top-level-header { 200 | &::before { 201 | background: $nypl-blue-dark; 202 | content: ""; 203 | display: block; 204 | height: ($general-border-width * 2); 205 | margin-bottom: 0.5rem; 206 | width: 5rem; 207 | } 208 | } 209 | } 210 | 211 | // 212 | // Modal Documentation Example: 213 | // 214 | .nypl-toolkit-example { 215 | 216 | .nypl-basic-modal-container { 217 | 218 | .nypl-modal-content { 219 | margin: $general-margin; 220 | padding: ($general-margin * 2.5); 221 | width: 90%; 222 | } 223 | 224 | .nypl-modal-underlay { 225 | background: transparentize($nypl-white, 0.2); 226 | } 227 | } 228 | } 229 | 230 | footer { 231 | background-color: lighten($nypl-light-blue, 20%); 232 | color: $nypl-blue-dark; 233 | height: 6rem; 234 | } 235 | } // /.toolkit 236 | 237 | // SVG Section Specific Styles 238 | // Fix the way the logo is displayed in the toolkit's svg page. 239 | textarea { 240 | color: $nypl-black; 241 | font-family: monospace; 242 | font-size: 0.85rem; 243 | padding: 1rem; 244 | width: 96.2%; 245 | } 246 | 247 | .nypl-toolkit-example { 248 | 249 | .nypl-logo { 250 | height: 13em; 251 | width: 20em; 252 | } 253 | } 254 | -------------------------------------------------------------------------------- /sass/example-search-styles.scss: -------------------------------------------------------------------------------- 1 | @import "nypl-normalize"; 2 | @import "toolkit"; 3 | @import "header"; 4 | @import "footer"; 5 | 6 | .nypl-header { 7 | @include header; 8 | } 9 | 10 | .nypl-footer { 11 | @include footer; 12 | } 13 | 14 | #skip a { 15 | background-color: $nypl-white; 16 | border: 0; 17 | color: $link-color; 18 | display: block; 19 | font-size: 13px; 20 | height: 1px; 21 | left: -10000px; 22 | line-height: 2; 23 | overflow: hidden; 24 | padding: 5px 10px 3px; 25 | position: absolute; 26 | top: 7px; 27 | width: 1px; 28 | z-index: 1000; 29 | 30 | &:focus { 31 | border: 5px solid $link-color; 32 | height: auto; 33 | left: 7px; 34 | outline: 0; 35 | overflow: visible; 36 | width: auto; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /sass/example-search-styles.v2.scss: -------------------------------------------------------------------------------- 1 | @import "nypl-normalize"; 2 | @import "toolkit"; 3 | @import "header"; 4 | @import "footer"; 5 | 6 | .nypl-header { 7 | @include header; 8 | } 9 | 10 | .nypl-footer { 11 | @include footer; 12 | } 13 | 14 | #skip a { 15 | background-color: $nypl-white; 16 | border: 0; 17 | color: $link-color; 18 | display: block; 19 | font-size: 13px; 20 | height: 1px; 21 | left: -10000px; 22 | line-height: 2; 23 | overflow: hidden; 24 | padding: 5px 10px 3px; 25 | position: absolute; 26 | top: 7px; 27 | width: 1px; 28 | z-index: 1000; 29 | 30 | &:focus { 31 | border: 5px solid $link-color; 32 | height: auto; 33 | left: 7px; 34 | outline: 0; 35 | overflow: visible; 36 | width: auto; 37 | } 38 | } 39 | 40 | 41 | 42 | /// 43 | /// Customized page header 44 | /// TODO: Make this a proper design pattern and create a set of mixins that make it easier to implement 45 | /// TODO: Get this out of the example SCSS 46 | /// 47 | 48 | .nypl-page-header { 49 | @include page-header( 50 | $background-color: lighten($nypl-light-gray, 15%), 51 | $font-weight: 100, 52 | $type-color: $nypl-red); 53 | border-bottom: $general-border-width / 1.5 solid darken($nypl-light-gray, 15%); 54 | margin-bottom: 0; 55 | 56 | .nypl-column-three-quarters { 57 | margin-bottom: 0; 58 | } 59 | } 60 | 61 | /// 62 | /// item info / the full item record 63 | /// 64 | 65 | .nypl-item-details { 66 | 67 | h1 { 68 | margin-bottom: 3rem; 69 | line-height: 1.5625; 70 | } 71 | 72 | .nypl-item-info { 73 | @include item-info ($border-width: 0); 74 | padding-left: 0; 75 | } 76 | 77 | dl { 78 | border-left: 0; 79 | font-size: 0.95rem; 80 | padding-left: 0; 81 | 82 | dt { 83 | color: $nypl-dark-gray; 84 | font-size: 0.85rem; 85 | font-weight: 700; 86 | letter-spacing: 0.04rem; 87 | margin: 0 0.5rem 0 0; 88 | width: 20%; 89 | 90 | @include media($mobile-breakpoint) { 91 | float: none; 92 | margin-bottom: 0; 93 | width: 100%; 94 | } 95 | } 96 | 97 | dd { 98 | //font-size: 0.95rem; 99 | margin-bottom: 0; 100 | width: 70%; 101 | 102 | @include media($mobile-breakpoint) { 103 | margin-bottom: 1.25rem; 104 | width: 100%; 105 | } 106 | 107 | &.subject-listing a { 108 | display: block; 109 | } 110 | /// all kinds of kludge... there needs to be cleaner and more global way of handling lists and nested lists... 111 | li { 112 | margin-bottom: 0; 113 | } 114 | } 115 | } 116 | 117 | } // /.nypl-item-details 118 | 119 | dl dt.list-multi-control { 120 | width: 100%; 121 | 122 | h3 { 123 | font-weight: 400; 124 | margin: 0 0 1rem; 125 | text-transform: none; 126 | width: 100%; 127 | } 128 | } 129 | 130 | // 131 | // numbered pager -approach 1: 132 | // 133 | .nypl-numbered-pager { 134 | @include numbered-pager; 135 | } // .nypl-results-pagination 136 | 137 | // 138 | // numbered pager -approach 2: 139 | // 140 | .nypl-numbered-pager-2 { 141 | @include numbered-pager; 142 | position: relative; 143 | 144 | @include media($mobile-breakpoint) { 145 | padding: 0 0 3rem; 146 | } 147 | 148 | .pager { 149 | 150 | .pages { 151 | @include clearfix; 152 | @include media($mobile-breakpoint) { 153 | border-bottom: ($general-border-width / 1.5) solid $nypl-light-gray; 154 | float: none; 155 | padding: 2% 0; 156 | width: 100%; 157 | } 158 | 159 | float: left; 160 | padding: 0.5rem 0; 161 | text-align: center; 162 | width: 62%; 163 | 164 | .pager-item { 165 | @include media($mobile-breakpoint) { 166 | margin-right: 5.5%; 167 | } 168 | 169 | margin-right: 6.5%; 170 | padding: 0.25em 1.66667%; 171 | text-align: center; 172 | width: 10%; 173 | 174 | &:last-child { 175 | margin-right: 0; 176 | } 177 | 178 | } // /.pager-item 179 | 180 | .current { 181 | background-color: $nypl-blue-dark; 182 | color: $nypl-white; 183 | border-radius: $general-border-radius; 184 | } 185 | } 186 | 187 | .previous, 188 | .next { 189 | 190 | @include media($mobile-breakpoint) { 191 | float: none; 192 | padding: 4% 2rem; 193 | position: absolute; 194 | // Keep the rule below for a mintue 195 | // top: 3rem; 196 | top: 47%; 197 | } 198 | 199 | float: left; 200 | position: static; 201 | width: 20%; 202 | 203 | } // /.pager-previous / .pager-next 204 | .previous { 205 | @include media($mobile-breakpoint) { 206 | border: 0; 207 | padding: 2.75% 0 0 2rem; 208 | } 209 | 210 | border-right: ($general-border-width / 1.5) solid $nypl-light-gray; 211 | margin-right: 1rem; 212 | padding: 0.5rem 2rem; 213 | width: 10%; 214 | } 215 | 216 | .next { 217 | @include media($mobile-breakpoint) { 218 | border: 0; 219 | padding: 2.75% 6% 0 0; 220 | right: 1rem; 221 | text-align: right; 222 | } 223 | 224 | border-left: ($general-border-width / 1.5) solid $nypl-light-gray; 225 | padding: 0.5rem 0; 226 | text-align: right; 227 | width: 10%; 228 | } // /.pager-next 229 | } 230 | } // /.nypl-numbered-pager-2 231 | -------------------------------------------------------------------------------- /sass/example-styles.scss: -------------------------------------------------------------------------------- 1 | @import "nypl-normalize"; 2 | @import "toolkit"; 3 | @import "header"; 4 | @import "footer"; 5 | 6 | .nypl-header { 7 | @include header; 8 | } 9 | 10 | .nypl-footer { 11 | @include footer; 12 | } 13 | 14 | .views-table { 15 | @include views-table; 16 | } 17 | 18 | hr { 19 | border: 0; 20 | border-top: 0.05rem solid $nypl-gray; 21 | height: 2rem; 22 | 23 | &::after { 24 | content: ""; 25 | } 26 | } 27 | 28 | #skip a { 29 | background-color: $nypl-white; 30 | border: 0; 31 | color: $link-color; 32 | display: block; 33 | font-size: 13px; 34 | height: 1px; 35 | left: -10000px; 36 | line-height: 2; 37 | overflow: hidden; 38 | padding: 5px 10px 3px; 39 | position: absolute; 40 | top: 7px; 41 | width: 1px; 42 | z-index: 1000; 43 | 44 | &:focus { 45 | border: 5px solid $link-color; 46 | height: auto; 47 | left: 7px; 48 | outline: 0; 49 | overflow: visible; 50 | width: auto; 51 | } 52 | } 53 | 54 | --------------------------------------------------------------------------------