New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
cf-core - npm Package Compare versions
Comparing version 4.0.1 to 4.1.0
| { | ||
| "name": "cf-core", | ||
| "version": "4.0.1", | ||
| "version": "4.1.0", | ||
| "description": "Capital Framework core styles", | ||
| "main": "src/capital-framework.js", | ||
| "less": "src/cf-core.less", | ||
@@ -27,2 +28,2 @@ "style": "cf-core.css", | ||
| } | ||
| } | ||
| } |
240
usage.md
@@ -11,2 +11,3 @@ The cf-core component acts as the backbone for Capital Framework. | ||
| [//]: # (NOTE: The markdown adds a `p` element inside the `blockquote`, we need to explore a style fix so this is more obviously a `blockquote`.) | ||
@@ -18,2 +19,4 @@ ## Table of contents | ||
| - [Sizing variables](#sizing-variables) | ||
| - [Breakpoint variables](#breakpoint-variables) | ||
| - [Webfont variables](#webfont-variables) | ||
| - [Media queries](#media-queries) | ||
@@ -48,4 +51,4 @@ - [Respond to min and max mixins](#respond-to-min-and-max-width-mixins) | ||
| `$color-` variables are from 18F's | ||
| [US Web Design Standards](https://github.com/18F/web-design-standards/blob/18f-pages/assets/_scss/core/_variables.scss) | ||
| `$color-` variables referenced in comments are from 18F's | ||
| [U.S. Web Design Standards](https://github.com/18F/web-design-standards/blob/staging/src/stylesheets/core/_variables.scss) | ||
@@ -72,8 +75,2 @@ ``` | ||
| @thead-bg: #f1f1f1; // $color-gray-lightest | ||
| // input | ||
| @input-bg: #fff; | ||
| @input-border: #5b616b; // $color-gray | ||
| @input-border-focus: #3e94cf; // $color-focus | ||
| @input-placeholder: grayscale(#c7336e); | ||
| ``` | ||
@@ -87,2 +84,16 @@ | ||
| @base-line-height: unit(@base-line-height-px / @base-font-size-px); | ||
| @size-xl: 48px; // Super-size | ||
| @size-i: 34px; // h1-size | ||
| @size-ii: 26px; // h2-size | ||
| @size-iii: 22px; // h3-size | ||
| @size-iv: 18px; // h4-size | ||
| @size-v: 14px; // h5-site | ||
| @size-vi: 12px; // h6-size | ||
| ``` | ||
| ### Breakpoint variables | ||
| ``` | ||
| @bp-xs-max: 600px; | ||
@@ -98,10 +109,21 @@ @bp-sm-min: @bp-xs-max + 1px; | ||
| ### Webfont variables | ||
| ``` | ||
| @webfont-regular: Arial; | ||
| @webfont-italic: Arial; | ||
| @webfont-medium: Arial; | ||
| @webfont-demi: Arial; | ||
| ``` | ||
| ## Media queries | ||
| Mixins for consistent media queries that take `px` values and convert them to `em`s. | ||
| Mixins for consistent media queries that take `px` values and convert them | ||
| to `em`s. | ||
| ### Respond to min and max width mixins | ||
| These mixins take a `px` value breakpoint and set of style rules and converts them to the corresponding min or max width media query. | ||
| These mixins take a `px` value breakpoint and set of style rules and converts | ||
| them to the corresponding min or max width media query. | ||
@@ -133,3 +155,4 @@ ``` | ||
| 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. | ||
| 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. | ||
@@ -218,3 +241,4 @@ ``` | ||
| Hide an element when JavaScript isn't available. Requires a small script in the HEAD of your HTML document that removes a `.no-js` class. | ||
| Hide an element when JavaScript isn't available. Requires a small script in the | ||
| `<head>` of your `<html>` document that removes a `.no-js` class. | ||
@@ -226,6 +250,6 @@ 1. Add a `no-js` class added to the `html` | ||
| 2. Add a script to remove the `no-js` class after confirming JS is available | ||
| 2. Add a script to remove the `no-js` class after confirming JavaScript is available | ||
| ``` | ||
| <script> | ||
| // Confirm availability of JS and remove no-js class from html | ||
| // Confirm availability of JavaScript and remove no-js class from html | ||
| var docElement = document.documentElement; | ||
@@ -243,5 +267,7 @@ docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2'); | ||
| Clear floated elements to avoid following elements from flowing into the previous one. | ||
| Clear floated elements to avoid following elements from flowing into the | ||
| previous one. | ||
| For example, to float an element to the left, but prevent the following text from flowing into it. | ||
| For example, to float an element to the left, but prevent the following text | ||
| from flowing into it. | ||
@@ -261,3 +287,5 @@ _More information see: <http://css-tricks.com/snippets/css/clear-fix>_ | ||
| For example, to create a link with a social network icon, but allow non-sighted users to understand the context, add descriptive text with the `u-visually-hidden` class. | ||
| For example, to create a link with a social network icon, but allow non-sighted | ||
| users to understand the context, add descriptive text with the | ||
| `u-visually-hidden` class. | ||
@@ -275,3 +303,3 @@ ``` | ||
| Adds a `.lt-ie8` fallback to hack inline block for IE 7 and below. | ||
| Adds a `.lt-ie8` fallback to hack inline block for Internet Explorer 7 and below. | ||
@@ -290,7 +318,12 @@ ``` | ||
| Force word breaks within an element. Useful for small containers where text may over-run the width of the container. | ||
| Force word breaks within an element. Useful for small containers where text may | ||
| over-run the width of the container. | ||
| _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._ | ||
| _This only works in Internet Explorer 8 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 class="u-break-word u-mb30" style="width: 100px; padding: 0.5em; border: 1px solid silver;"> | ||
| <div class="u-break-word u-mb30" | ||
| style="width: 100px; padding: 0.5em; border: 1px solid silver;"> | ||
| This link should break: | ||
@@ -302,3 +335,4 @@ <a href="#"> | ||
| <div class="u-mb30" style="width: 100px; padding: 0.5em; border: 1px solid silver;"> | ||
| <div class="u-mb30" | ||
| style="width: 100px; padding: 0.5em; border: 1px solid silver;"> | ||
| This link should not: | ||
@@ -328,7 +362,8 @@ <a href="#"> | ||
| Force a margin top or bottom on an element in pixels. | ||
| Force a `margin` top or bottom on an element in pixels. | ||
| `.u-m[p][#]` | ||
| _`[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_ | ||
| _`[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_ | ||
@@ -341,3 +376,3 @@ ``` | ||
| Set the width of an element in percentages. | ||
| Set the `width` of an element in percentages. | ||
@@ -442,3 +477,3 @@ **NOTE: Inline style properties for demonstration only.** | ||
| Displays content on screen widths under 601px. | ||
| Displays content on screen widths under `601px`. | ||
@@ -457,3 +492,3 @@ <div style="border: 1px solid black; height: 22px; padding: 5px;"> | ||
| Hides content on screens widths under 601px. | ||
| Hides content on screens widths under `601px`. | ||
@@ -474,5 +509,7 @@ <div style="border: 1px solid black; height: 22px; padding: 5px;"> | ||
| Align an element vertically with the text within a button that may be to either side. | ||
| Align an element vertically with the text within a button that may be to either | ||
| side. | ||
| _Pass font-size as the argument for calculating spacing, default value is `@base-font-size-px`._ | ||
| _Pass `font-size` as the argument for calculating spacing, default value is | ||
| `@base-font-size-px`._ | ||
@@ -485,5 +522,8 @@ ``` | ||
| Utilize intrinsic ratios to create a flexible container that retains an aspect ratio. When image tags scale they retain their aspect ratio, but if you need a flexible video you will need to use this mixin. | ||
| Utilize intrinsic ratios to create a flexible container that retains an aspect | ||
| ratio. When `<img>` tags scale they retain their aspect ratio, but if you need | ||
| a flexible video you will need to use this mixin. | ||
| _Read more about intrinsic rations: <http://alistapart.com/article/creating-intrinsic-ratios-for-video>_ | ||
| _Read more about intrinsic ratios: | ||
| <http://alistapart.com/article/creating-intrinsic-ratios-for-video>_ | ||
@@ -494,5 +534,7 @@ ``` | ||
| In addition to the mixin, there are two default classes available for building 16:9 and 4:3 containers. | ||
| In addition to the mixin, there are two default classes available for building | ||
| 16:9 and 4:3 containers. | ||
| _When using the mixin, pass the width as the first argument, and the height as the second argument, default values are `16, 9`._ | ||
| _When using the mixin, pass the `width` as the first argument, and the `height` | ||
| as the second argument. Default values are `16, 9`._ | ||
@@ -503,3 +545,5 @@ _Original mixin credit: <https://gist.github.com/craigmdennis/6655047>_ | ||
| To create a 16:9 flexible video player, wrap the video element in an element with `u-flexible-container` and add the `u-flexible-container_inner` to the video element. | ||
| To create a 16:9 flexible video player, wrap the video element in an element | ||
| with `u-flexible-container` and add the `u-flexible-container_inner` to the | ||
| video element. | ||
@@ -522,3 +566,4 @@ <div class="u-flexible-container"> | ||
| To create a flexible container with only a background (no inner video or object element), ommit the inner container. | ||
| To create a flexible container with only a background (no inner video or object | ||
| element), ommit the inner container. | ||
@@ -561,35 +606,50 @@ <div class="u-flexible-container" | ||
| Calling the mixin without arguments will set the following states - default(pacific), :hover(pacific-50), :focus:(pacific), :visited teal, :active navy. | ||
| Calling the mixin without arguments will set the following states: | ||
| default - `#0071bc`, `:hover` - `#205493`, `focus:` - `#0071bc`, | ||
| `:visited` - `#4c2c92`, `:active` - `#046b99`. | ||
| [//]: # (NOTE: These aren't the default colors within this project, only once the brand theme has been applied.) | ||
| `u-link__colors()` | ||
| Passing a single argument into the mixin will set the color for the default, :visited, :hover, :focus, :active states. | ||
| Passing a single argument into the mixin will set the color for the | ||
| default, `:visited`, `:hover`, `:focus`, `:active` states. | ||
| `u-link__colors(@c)` | ||
| Passing two arguments into the mixin will set the color for the default, :visited, and :active states as the first argument, and :hover and :focus as the second argument. | ||
| Passing two arguments into the mixin will set the color for the default, | ||
| `:visited`, and `:active` states as the first argument, and `:hover` and | ||
| `:focus` as the second argument. | ||
| `u-link__colors(@c, @h)` | ||
| Passing five arguments will set the color for the default, :visited, :hover, :focus, and :active states respectively. | ||
| Passing five arguments will set the color for the default, `:visited`, | ||
| `:hover`, `:focus`, and `:active` states respectively. | ||
| `u-link__colors(@c, @v, @h, @f, @a)` | ||
| Passing ten arguments will set the text (default, :visited, :hover, :focus, and :active states in the first five arguments) and border colors (default, :visited, :hover, :focus, and :active states in the following five arguments) separately. | ||
| Passing ten arguments will set the text (default, `:visited`, `:hover`, | ||
| `:focus`, and `:active` states in the first five arguments) and border colors | ||
| (default, `:visited`, `:hover`, `:focus`, and `:active` states in the | ||
| following five arguments) separately. | ||
| `u-link__colors(@c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba)` | ||
| __A base mixin of `u-link__colors-base()` exists, but please refrain from using this mixin directly in order to promote consistent naming throughout this project. If you need to set colors for all states of a link, use `.u-link__colors(@c, @v, @h, @f, @a)`.__ | ||
| __A base mixin of `u-link__colors-base()` exists, but please refrain from | ||
| using this mixin directly in order to promote consistent naming throughout | ||
| this project. If you need to set colors for all states of a link, use | ||
| `.u-link__colors(@c, @v, @h, @f, @a)`.__ | ||
| ##### Link borders | ||
| Force the default bottom border on the default and :hover states. | ||
| Force the default bottom `border` on the default and `:hover` states. | ||
| `.u-link__border()` | ||
| Turn off the default bottom border on the default and :hover states. | ||
| Turn off the default bottom `border` on the default and `:hover` states. | ||
| `.u-link__no-border()` | ||
| Turn off the default bottom border on the default state but force a bottom border on the :hover state. | ||
| Turn off the default bottom `border` on the default state but force a bottom | ||
| `border` on the `:hover` state. | ||
@@ -600,7 +660,9 @@ `.u-link__hover-border()` | ||
| Calling this mixin without arguments will set the default color for the hover state of a child within a link, without affecting the link itself. | ||
| Calling this mixin without arguments will set the default color for the | ||
| `:hover` state of a child within a link, without affecting the link itself. | ||
| `.u-link__hover-child()` | ||
| Passing a single argument into the mixin will set a custom color for the hover state of a child within a link, without affecting the link itself. | ||
| Passing a single argument into the mixin will set a custom color for the | ||
| `:hover` state of a child within a link, without affecting the link itself. | ||
@@ -613,5 +675,6 @@ `.u-link__hover-child(@c)` | ||
| Sets the element to 14px (in ems). | ||
| Sets the element to `14px` (in `em`s). | ||
| _To be used on default 16px text only. To use on text set to another size, use the mixin below._ | ||
| _To be used on default `16px` text only. To use on text set to another size, | ||
| use the mixin below._ | ||
@@ -622,3 +685,4 @@ `.u-small-text` | ||
| Sets the element to 14px (in ems) based on the text size passed as `@context`. | ||
| Sets the element to `14px` (in `em`s) based on the text size passed as | ||
| `@context`. | ||
@@ -661,5 +725,12 @@ `.u-small-text(@context)` | ||
| To use your own fonts in the webfont mixins, set your own font with the `@webfont-regular/italic/medium/demi` variables in your `theme-overrides.less` file. | ||
| To use your own fonts in the webfont mixins, set your own font with the | ||
| `@webfont-regular/italic/medium/demi` variables in your `cf-theme-overrides.less` | ||
| file. | ||
| _These mixins also add the appropriate .lt-ie9 overrides. .lt-ie9 overrides are necessary to override font-style and font-weight each time the webfont is used. These overrides are built into the webfont mixins so you get them automatically. Note that this requires you to use conditional classes on the <html> element: <https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md#conditional-html-classes.>_ | ||
| _These mixins also add the appropriate `.lt-ie9` overrides. `.lt-ie9` | ||
| overrides are necessary to override `font-style` and `font-weight` each time | ||
| the webfont is used. These overrides are built into the webfont mixins so you | ||
| get them automatically. Note that this requires you to use conditional | ||
| classes on the `html` element: | ||
| <https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md#conditional-html-classes.>_ | ||
@@ -670,6 +741,12 @@ ### Type hierarchy | ||
| <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
| <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do | ||
| eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut | ||
| aliquip ex ea commodo consequat.</p> | ||
| ``` | ||
| <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
| <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do | ||
| eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut | ||
| aliquip ex ea commodo consequat.</p> | ||
| ``` | ||
@@ -751,8 +828,11 @@ | ||
| _Responsive text. Displays as a Heading 3 on large screens; displays at Heading 4 size (but still Regular weight) on small screens._ | ||
| _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> | ||
| <p class="lead-paragraph">Ut enim ad minim veniam, quis nostrud exercitation | ||
| ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
| ``` | ||
| <p class="lead-paragraph">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
| <p class="lead-paragraph">Ut enim ad minim veniam, quis nostrud exercitation | ||
| ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
| ``` | ||
@@ -770,6 +850,9 @@ | ||
| - _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._ | ||
| - 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. | ||
@@ -798,2 +881,5 @@ <p>Paragraph margin example</p> | ||
| _Note that the `.visited`, `.hover`, `.focus`, `.active` classes are for | ||
| demonstration purposes only and should not be used in production._ | ||
| #### Default state | ||
@@ -833,4 +919,2 @@ | ||
| _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> | ||
@@ -844,8 +928,11 @@ | ||
| Links are automatically underlined when they are a child of a `p`, `li`, or `dd`. To enable them elsewhere, simply add a bottom-border-width to the link. | ||
| Links are automatically underlined when they are a child of a `p`, `li`, or | ||
| `dd`. To enable them elsewhere, simply add a `border-bottom-width: 1px;` to | ||
| the link. | ||
| _Note that the `.visited`, `.hover`, `.focus`, `.active` classes are for | ||
| demonstration purposes only and should not be used in production._ | ||
| #### States | ||
| _Note that the `.visited`, `.hover`, `.focus`, `.active` classes are for demonstration purposes only and should not be used in production._ | ||
| <p> | ||
@@ -909,3 +996,3 @@ <a href="#">Default</a>, | ||
| Links within a nav element are not underlined. | ||
| Links within a `nav` element are not underlined. | ||
@@ -975,15 +1062,15 @@ <nav> | ||
| <p>Paragraph example for visual reference</p> | ||
| <ul> | ||
| <ol> | ||
| <li>List item 1</li> | ||
| <li>List item 2</li> | ||
| <li>List item 3</li> | ||
| </ul> | ||
| </ol> | ||
| ``` | ||
| <p>Paragraph example for visual reference</p> | ||
| <ul> | ||
| <ol> | ||
| <li>List item 1</li> | ||
| <li>List item 2</li> | ||
| <li>List item 3</li> | ||
| </ul> | ||
| </ol> | ||
| ``` | ||
@@ -993,3 +1080,3 @@ | ||
| #### Standard label | ||
| #### Standard table | ||
@@ -1054,5 +1141,8 @@ <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._ | ||
| _Note that the use of a `blockquote` 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"> | ||
@@ -1089,3 +1179,3 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa | ||
| Gives all images a default max-width of 100% of their container. | ||
| Gives all images a default `max-width` of `100%` of their container. | ||
@@ -1100,3 +1190,3 @@ <img src="http://placekitten.com/800/40" alt=""> | ||
| Resets browser default side margins for `figure` to 0, | ||
| Resets browser default side `margins` for `figure` to `0`, | ||
| and removes bottom inline spacing from `img` elements within. | ||
@@ -1103,0 +1193,0 @@ |
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
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.13%
357747
Worsened metrics
- Lines of code
- decreased by-2.21%
1504
No dependency changes