cf-core - npm Package Compare versions
Comparing version 3.4.0 to 3.5.0
| { | ||
| "name": "cf-core", | ||
| "version": "3.4.0", | ||
| "version": "3.5.0", | ||
| "description": "Capital Framework core styles", | ||
@@ -5,0 +5,0 @@ "main": "src/capital-framework.js", |
@@ -19,3 +19,8 @@ # cf-core [](https://travis-ci.org/cfpb/capital-framework) [](https://www.npmjs.com/package/cf-core) | ||
| > NOTE: Be sure to run the Less files through | ||
| [Autoprefixer](https://github.com/postcss/autoprefixer), | ||
| or your compiled Capital Framework CSS will not work | ||
| perfectly in older browsers. | ||
| ## Getting involved | ||
@@ -22,0 +27,0 @@ |
149
usage.md
| The cf-core component acts as the backbone for Capital Framework. It's made up of four child components `cf-vars`, `cf-media-queries`, `cf-utilities`, and `cf-base`. | ||
| > NOTE: If you use any cf-core Less file directly, | ||
| be sure to run the files through | ||
| [Autoprefixer](https://github.com/postcss/autoprefixer), | ||
| or your compiled Capital Framework CSS will | ||
| not work perfectly in older browsers. | ||
| ## Vars | ||
| ## Table of contents | ||
| - [Variables](#variables) | ||
| - [Sizing variables](#sizing-variables) | ||
| - [Color variables](#color-variables) | ||
| - [Media queries](#media-queries) | ||
| - [Respond to min and max mixins](#respond-to-min-and-max-mixins) | ||
| - [Respond to range mixin](#respond-to-range-mixin) | ||
| - [Respond to dpi mixin](#respond-to-dpi-mixin) | ||
| - [Respond to print mixin](#respond-to-print-mixin) | ||
| - [Utilities](#utilities) | ||
| - [Helper classes](#helper-classes) | ||
| - [Mixins](#mixins) | ||
| - [Base typography](#base-typography) | ||
| - [Webfonts](#webfonts) | ||
| - [Type hierarchy](#type-hierarchy) | ||
| - [Body copy vertical margins](#body-copy-vertical-margins) | ||
| - [Default links](#default-links) | ||
| - [Underlined links](#underlined-links) | ||
| - [Lists](#lists) | ||
| - [Tables](#tables) | ||
| - [Block quote](#block-quote) | ||
| - [Base forms](#base-forms) | ||
| - [Form labels](#form-labels) | ||
| - [Form elements](#form-elements) | ||
| - [Base images](#base-images) | ||
| - [Full-width images](#full-width-images) | ||
| - [Figure](#figure) | ||
| - [Bordered figure](#bordered-figure) | ||
| ## Variables | ||
| Theme variables for setting the color and sizes throughout the project. Overwrite them in your own project by duplicating the variable `@key: value`. | ||
@@ -62,7 +97,7 @@ | ||
| ## Media Queries | ||
| ## Media queries | ||
| Mixins for consistent media queries that take `px` values and convert them to `em`s. | ||
| ### Min and max width media queries | ||
| ### Respond to min and max width mixins | ||
@@ -94,3 +129,3 @@ These mixins take a `px` value breakpoint and set of style rules and converts them to the corresponding min or max width media query. | ||
| ### Range media queries | ||
| ### Respond to range mixin | ||
@@ -139,3 +174,3 @@ This mixin takes both min and max `px` values and a set of style rules and converts them to the corresponding min and max media query. | ||
| } | ||
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | ||
| @media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | ||
| .example { | ||
@@ -209,2 +244,4 @@ background-image: url(retina-image.png); | ||
| _More information see: <http://css-tricks.com/snippets/css/clear-fix>_ | ||
| ``` | ||
@@ -217,4 +254,2 @@ <div class="u-clearfix"> | ||
| _More information see: <http://css-tricks.com/snippets/css/clear-fix>_ | ||
| #### Visually hidden | ||
@@ -253,2 +288,4 @@ | ||
| _This only works in IE8 when the element with the `.u-break-word` class has layout. See <http://stackoverflow.com/questions/3997223/word-wrapbreak-word-not-working-in-ie8> for more information._ | ||
| <div style="width: 100px;"> | ||
@@ -286,4 +323,2 @@ This link should break: | ||
| _This only works in IE8 when the element with the .u-break-word class has layout. See <http://stackoverflow.com/questions/3997223/word-wrapbreak-word-not-working-in-ie8> for more information._ | ||
| #### Margin utilities | ||
@@ -295,2 +330,4 @@ | ||
| _`[p]` is the position, use `t` for top or `b` for bottom. `[#]` is the pixel value, available options are 0, 5, 10, 15, 20, 30, 45, 60_ | ||
| ``` | ||
@@ -300,4 +337,2 @@ <h1 class="u-mb0">Heading with zero bottom margin</h1> | ||
| _`[p]` is the position, use `t` for top or `b` for bottom. `[#]` is the pixel value, available options are 0, 5, 10, 15, 20, 30, 45, 60_ | ||
| #### Width utilities | ||
@@ -438,2 +473,4 @@ | ||
| _Pass font-size as the argument for calculating spacing, default value is `@base-font-size-px`._ | ||
| ``` | ||
@@ -443,4 +480,2 @@ .u-align-with-btn(@font-size: @base-font-size-px); | ||
| _Pass font-size as the argument for calculating spacing, default value is `@base-font-size-px`._ | ||
| #### Flexible proportional containers | ||
@@ -458,2 +493,6 @@ | ||
| _When using the mixin, pass the width as the first argument, and the height as the second argument, default values are `16, 9`._ | ||
| _Original mixin credit: <https://gist.github.com/craigmdennis/6655047>_ | ||
| __NOTE: Inline style properties for demonstration only__ | ||
@@ -511,6 +550,2 @@ | ||
| _When using the mixin, pass the width as the first argument, and the height as the second argument, default values are `16, 9`._ | ||
| _Original mixin credit: <https://gist.github.com/craigmdennis/6655047>_ | ||
| #### Link Modifiers | ||
@@ -568,3 +603,3 @@ | ||
| #### Small Text Utility | ||
| #### Small text utility | ||
@@ -575,6 +610,6 @@ ##### Class | ||
| _To be used on default 16px text only. To use on text set to another size, use the mixin below._ | ||
| `.u-small-text` | ||
| _To be used on default 16px text only. To use on text set to another size, use the mixin below._ | ||
| ##### Mixin | ||
@@ -607,3 +642,3 @@ | ||
| ## Base Typography | ||
| ## Base typography | ||
@@ -637,2 +672,4 @@ ### Webfonts | ||
| _Responsive heading. At small screen sizes, displays as heading level 2._ | ||
| <h1>Example heading element</h1> | ||
@@ -646,6 +683,6 @@ <p class="h1">A non-heading element</p> | ||
| _Responsive heading. At small screen sizes, displays as Heading 2._ | ||
| #### Heading level 2 | ||
| _Responsive heading. At small screen sizes, displays as heading level 3._ | ||
| <h2>Example heading element</h2> | ||
@@ -659,6 +696,6 @@ <p class="h2">A non-heading element</p> | ||
| _Responsive heading. At small screen sizes, displays as Heading 3._ | ||
| #### Heading level 3 | ||
| _Responsive heading. At small screen sizes, displays as heading level 4._ | ||
| <h3>Example heading element</h3> | ||
@@ -672,6 +709,6 @@ <p class="h3">A non-heading element</p> | ||
| _Responsive heading. At small screen sizes, displays as Heading 4._ | ||
| #### Heading level 4 | ||
| _Not a responsive heading._ | ||
| <h4>Example heading element</h4> | ||
@@ -685,6 +722,6 @@ <p class="h4">A non-heading element</p> | ||
| #### Heading level 5 | ||
| _Not a responsive heading._ | ||
| #### Heading level 5 | ||
| <h5>Example heading element</h5> | ||
@@ -698,6 +735,6 @@ <p class="h5">A non-heading element</p> | ||
| #### Heading level 6 | ||
| _Not a responsive heading._ | ||
| #### Heading level 6 | ||
| <h6>Example heading element</h6> | ||
@@ -711,6 +748,6 @@ <p class="h6">A non-heading element</p> | ||
| _Not a responsive heading._ | ||
| #### Lead paragraph | ||
| _Responsive text. Displays as a Heading 3 on large screens; displays at Heading 4 size (but still Regular weight) on small screens._ | ||
| <p class="lead-paragraph">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
@@ -722,4 +759,2 @@ | ||
| _Responsive text. Displays as a Heading 3 on large screens; displays at Heading 4 size (but still Regular weight) on small screens._ | ||
| #### Display heading (aka "superheading") | ||
@@ -733,4 +768,9 @@ | ||
| ### Body copy element vertical margins | ||
| ### Body copy vertical margins | ||
| - _Applies 15px bottom margin to all `p`, `ul`, `ol`, `dl`, `figure`, `table`, and `blockquote` elements._ | ||
| - _Applies -5px top margin to lists following paragraphs to reduce margin between them to 10px._ | ||
| - _Applies 8px bottom margin to list items that are not within a nav element._ | ||
| - _Assumes that the font size of each of these items remains the default._ | ||
| <p>Paragraph margin example</p> | ||
@@ -756,7 +796,2 @@ <p>Paragraph margin example</p> | ||
| - _Applies 15px bottom margin to all `p`, `ul`, `ol`, `dl`, `figure`, `table`, and `blockquote` elements._ | ||
| - _Applies -5px top margin to lists following paragraphs to reduce margin between them to 10px._ | ||
| - _Applies 8px bottom margin to list items that are not within a nav element._ | ||
| - _Assumes that the font size of each of these items remains the default._ | ||
| ### Default links | ||
@@ -798,2 +833,4 @@ | ||
| _Note that the `.visited`, `.hover`, `.focus`, `.active` classes are for demonstration purposes only and should not be used in production._ | ||
| <a href="#" class="active">Visited link style</a> | ||
@@ -805,4 +842,2 @@ | ||
| _Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production._ | ||
| ### Underlined links | ||
@@ -814,2 +849,4 @@ | ||
| _Note that the `.visited`, `.hover`, `.focus`, `.active` classes are for demonstration purposes only and should not be used in production._ | ||
| <p> | ||
@@ -833,4 +870,2 @@ <a href="#">Default</a>, | ||
| _Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production._ | ||
| #### Underline conditions | ||
@@ -958,3 +993,3 @@ | ||
| #### Standard lable | ||
| #### Standard label | ||
@@ -1019,2 +1054,5 @@ <table> | ||
| _Note that the use of a block quote is to quote an external work. See `.pull-quote` if you need to highlight an excerpt from the current work._ | ||
| _Note that it is best practice to document the URL of a quoted work using the cite attribute._ | ||
| <blockquote cite="link-to-source"> | ||
@@ -1046,6 +1084,3 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa | ||
| _Note that the use of a block quote is to quote an external work. See `.pull-quote` if you need to highlight an excerpt from the current work._ | ||
| _Note that it is best practice to document the URL of a quoted work using the cite attribute._ | ||
| ## Base forms | ||
@@ -1079,7 +1114,7 @@ | ||
| ### Form Elements | ||
| ### Form elements | ||
| _Note that the `.focus` class is for documentation purposes only and should not be used in production._ | ||
| #### `type="text"` | ||
| #### Text input | ||
@@ -1098,3 +1133,3 @@ <input type="text" value="Lorem ipsum"> | ||
| #### `type="search"` | ||
| #### Search input | ||
@@ -1113,3 +1148,3 @@ <input type="search" value="Lorem ipsum"> | ||
| #### `type="email"` | ||
| #### Email input | ||
@@ -1128,3 +1163,3 @@ <input type="email" value="Lorem ipsum"> | ||
| #### `type="url"` | ||
| #### URL input | ||
@@ -1143,3 +1178,3 @@ <input type="url" value="Lorem ipsum"> | ||
| #### `type="tel"` | ||
| #### TEL input | ||
@@ -1158,3 +1193,3 @@ <input type="tel" value="Lorem ipsum"> | ||
| #### `type="number"` | ||
| #### Number input | ||
@@ -1173,3 +1208,3 @@ <input type="number" value="1000"> | ||
| #### `textarea` | ||
| #### Textarea | ||
@@ -1176,0 +1211,0 @@ <textarea>Lorem ipsum</textarea> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Improved metrics
- Total package byte prevSize
- increased by0.92%
371484
- Lines of code
- increased by0.19%
1612
- Number of lines in readme file
- increased by15.63%
37