cf-core - npm Package Compare versions

Comparing version 3.5.0 to 4.0.1

package.json

 {
   "name": "cf-core",
-  "version": "3.5.0",
+  "version": "4.0.1",
   "description": "Capital Framework core styles",
-  "main": "src/capital-framework.js",
   "less": "src/cf-core.less",
@@ -25,6 +24,5 @@ "style": "cf-core.css",
   "dependencies": {
-    "box-sizing-polyfill": "0.1.0",
     "normalize-css": "^2.0.0",
     "normalize-legacy-addon": "0.1.0"
   }
-}
+}

usage.md

@@ -1,2 +0,4 @@
-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`.
+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`.
 
@@ -9,9 +11,10 @@ > NOTE: If you use any cf-core Less file directly,
 
+
 ## Table of contents
 
 - [Variables](#variables)
+    - [Color variables](#color-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 min and max mixins](#respond-to-min-and-max-width-mixins)
     - [Respond to range mixin](#respond-to-range-mixin)
@@ -32,35 +35,16 @@ - [Respond to dpi mixin](#respond-to-dpi-mixin)
     - [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`.
+Theme variables for setting the color and sizes throughout the project.
+Overwrite them in your own project by duplicating the variable `@key: value`.
 
-Ex. to set your base font size, add `@base-font-size-px: 17px;` to your project.
-
-### Sizing variables
-
-```
-@base-font-size-px:   16px;
-@base-line-height-px: 22px;
-@base-line-height:    unit(@base-line-height-px / @base-font-size-px);
-@bp-xs-max:           600px;
-@bp-sm-min:           @bp-xs-max + 1px;
-@bp-sm-max:           900px;
-@bp-med-min:          @bp-sm-max + 1px;
-@bp-med-max:          1020px;
-@bp-lg-min:           @bp-med-max + 1px;
-@bp-lg-max:           1230px;
-@bp-xl-min:           @bp-lg-max + 1px;
-```
-
 ### Color variables
 
-`$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 are from 18F's
+[US Web Design Standards](https://github.com/18F/web-design-standards/blob/18f-pages/assets/_scss/core/_variables.scss)
 
@@ -93,6 +77,19 @@ ```
 @input-placeholder:      grayscale(#c7336e);
+```
 
-// .figure__bordered
-@figure__bordered:       #d6d7d9; // $color-gray-lighter
+### Sizing variables
+
 ```
+@base-font-size-px:   16px;
+@base-line-height-px: 22px;
+@base-line-height:    unit(@base-line-height-px / @base-font-size-px);
+@bp-xs-max:           600px;
+@bp-sm-min:           @bp-xs-max + 1px;
+@bp-sm-max:           900px;
+@bp-med-min:          @bp-sm-max + 1px;
+@bp-med-max:          1020px;
+@bp-lg-min:           @bp-med-max + 1px;
+@bp-lg-max:           1230px;
+@bp-xl-min:           @bp-lg-max + 1px;
+```
 
@@ -288,12 +285,11 @@
 
-<div style="width: 100px;">
+<div class="u-break-word u-mb30" style="width: 100px; padding: 0.5em; border: 1px solid silver;">
     This link should break:
-    <br>
-    <a class="u-break-word" href="#">
+    <a href="#">
         [e-mail]
     </a>
-    <br>
-    <br>
+</div>
+
+<div class="u-mb30" style="width: 100px; padding: 0.5em; border: 1px solid silver;">
     This link should not:
-    <br>
     <a href="#">
@@ -305,12 +301,11 @@ [e-mail]
 ```
-<div style="width: 100px;">
+<div class="u-break-word">
     This link should break:
-    <br>
-    <a class="u-break-word" href="#">
+    <a href="#">
         [e-mail]
     </a>
-    <br>
-    <br>
+</div>
+
+<div>
     This link should not:
-    <br>
     <a href="#">
@@ -462,3 +457,2 @@ [e-mail]
 
-
 ### Mixins
@@ -544,7 +538,7 @@
 
-#### Link Modifiers
+#### Link modifiers
 
 Modify link properties using the following mixins.
 
-##### Link Colors
+##### Link colors
 
@@ -641,6 +635,6 @@ Calling the mixin without arguments will set the following states - default(pacific), :hover(pacific-50), :focus:(pacific), :visited teal, :active navy.
 ```
-.webfont-regular();
-.webfont-italic();
-.webfont-medium();
-.webfont-demi();
+.u-webfont-regular();
+.u-webfont-italic();
+.u-webfont-medium();
+.u-webfont-demi();
 ```
@@ -1061,159 +1055,2 @@
 
-## Base forms
-
-_Visit https://github.com/cfpb/cf-forms for advanced form field patterns._
-
-### Form labels
-
-#### Default label
-
-<label>Form label</label>
-
-```
-<label>Form label</label>
-```
-
-#### Label for a radio or checkbox
-
-<input type="radio" id="radio-input">
-<label for="radio-input">Radio label</label>
-<input type="checkbox" id="checkbox-input">
-<label for="checkbox-input">Checkbox label</label>
-
-```
-<input type="radio" id="radio-input">
-<label for="radio-input">Radio label</label>
-<input type="checkbox" id="checkbox-input">
-<label for="checkbox-input">Checkbox label</label>
-```
-
-### Form elements
-
-_Note that the `.focus` class is for documentation purposes only and should not be used in production._
-
-#### Text input
-
-<input type="text" value="Lorem ipsum">
-<input class="focus" type="text" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="text" value="">
-
-```
-<input type="text" value="Lorem ipsum">
-<input class="focus" type="text" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="text" value="">
-```
-
-#### Search input
-
-<input type="search" value="Lorem ipsum">
-<input class="focus" type="search" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="search" value="">
-
-```
-<input type="search" value="Lorem ipsum">
-<input class="focus" type="search" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="search" value="">
-```
-
-#### Email input
-
-<input type="email" value="Lorem ipsum">
-<input class="focus" type="email" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="email" value="">
-
-```
-<input type="email" value="Lorem ipsum">
-<input class="focus" type="email" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="email" value="">
-```
-
-#### URL input
-
-<input type="url" value="Lorem ipsum">
-<input class="focus" type="url" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="url" value="">
-
-```
-<input type="url" value="Lorem ipsum">
-<input class="focus" type="url" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="url" value="">
-```
-
-#### TEL input
-
-<input type="tel" value="Lorem ipsum">
-<input class="focus" type="tel" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="tel" value="">
-
-```
-<input type="tel" value="Lorem ipsum">
-<input class="focus" type="tel" value="Lorem ipsum">
-<br><br>
-<input placeholder="Lorem ipsum" type="tel" value="">
-```
-
-#### Number input
-
-<input type="number" value="1000">
-<input class="focus" type="number" value="1000">
-<br><br>
-<input placeholder="Lorem ipsum" type="number" value="">
-
-```
-<input type="number" value="1000">
-<input class="focus" type="number" value="1000">
-<br><br>
-<input placeholder="Lorem ipsum" type="number" value="">
-```
-
-#### Textarea
-
-<textarea>Lorem ipsum</textarea>
-<textarea class="focus">Lorem ipsum</textarea>
-
-```
-<textarea>Lorem ipsum</textarea>
-<textarea class="focus">Lorem ipsum</textarea>
-```
-
-#### Multiselect
-
-<select multiple>
-    <option value="option1">Lorem</option>
-    <option value="option2">Ipsum</option>
-    <option value="option3">Dolor</option>
-    <option value="option4">Sit</option>
-</select>
-<select class="focus" multiple>
-    <option value="option1">Lorem</option>
-    <option value="option2">Ipsum</option>
-    <option value="option3">Dolor</option>
-    <option value="option4">Sit</option>
-</select>
-
-```
-<select multiple>
-    <option value="option1">Lorem</option>
-    <option value="option2">Ipsum</option>
-    <option value="option3">Dolor</option>
-    <option value="option4">Sit</option>
-</select>
-<select class="focus" multiple>
-    <option value="option1">Lorem</option>
-    <option value="option2">Ipsum</option>
-    <option value="option3">Dolor</option>
-    <option value="option4">Sit</option>
-</select>
-```
-
-
 ## Base images
@@ -1233,2 +1070,5 @@
 
+Resets browser default side margins for `figure` to 0,
+and removes bottom inline spacing from `img` elements within.
+
 <figure>
@@ -1243,13 +1083,1 @@ <img src="http://placekitten.com/340/320">
 ```
-
-### Bordered figure
-
-<figure class="figure__bordered">
-    <img src="http://placekitten.com/340/320">
-</figure>
-
-```
-<figure class="figure__bordered">
-    <img src="http://placekitten.com/340/320">
-</figure>
-```

No alert changes

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

357300

decreased by-3.82%

Lines of code

1538

decreased by-4.59%

Dependency changes

• - Removedbox-sizing-polyfill@0.1.0

• - Removedbox-sizing-polyfill@0.1.0(transitive)