New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@cfpb/cfpb-grid
Advanced tools
@cfpb/cfpb-grid - npm Package Compare versions
Comparing version 0.27.0 to 0.28.0
| { | ||
| "name": "@cfpb/cfpb-grid", | ||
| "version": "0.27.0", | ||
| "version": "0.28.0", | ||
| "description": "Design System grid", | ||
@@ -16,4 +16,4 @@ "less": "src/cfpb-grid.less", | ||
| ], | ||
| "gitHead": "01d818f7e9b1f148c821a701d008bd75a356679b", | ||
| "gitHead": "6f3c87c49283ffb3cd3437b32c0f2e02667ab658", | ||
| "type": "module" | ||
| } |
264
usage.md
@@ -51,3 +51,3 @@ The grid component is a suite of Less variable and mixins that enables you to | ||
| ``` | ||
| @grid_wrapper-width: 1200px; | ||
| @grid_wrapper-width: 1230px; | ||
| ``` | ||
@@ -249,57 +249,57 @@ | ||
| ### 12 columns w/ 1200px max width | ||
| ### 12 columns w/ 1230px max width | ||
| <div class="cols-12"> | ||
| <section> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><div>six</div></div> | ||
| <div class="col col-6"><div>six</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-12"><p>twelve</p></div> | ||
| <div class="col col-12"><div>twelve</div></div> | ||
| </section> | ||
@@ -312,53 +312,53 @@ | ||
| <section> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><p>one</p></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| <div class="col col-1"><div>one</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-2"><p>two</p></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-2"><div>two</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><div>six</div></div> | ||
| <div class="col col-6"><div>six</div></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-12"><p>twelve</p></div> | ||
| <div class="col col-12"><div>twelve</div></div> | ||
| </section> | ||
@@ -372,14 +372,14 @@ </div> | ||
| <section> | ||
| <div class="col col-1 suffix-11"><p>prefix 0, suffix 11</p></div> | ||
| <div class="col col-1 prefix-1 suffix-10"><p>prefix 1, suffix 10</p></div> | ||
| <div class="col col-1 prefix-2 suffix-9"><p>prefix 2, suffix 9</p></div> | ||
| <div class="col col-1 prefix-3 suffix-8"><p>prefix 3, suffix 8</p></div> | ||
| <div class="col col-1 prefix-4 suffix-7"><p>prefix 4, suffix 7</p></div> | ||
| <div class="col col-1 prefix-5 suffix-6"><p>prefix 5, suffix 6</p></div> | ||
| <div class="col col-1 prefix-6 suffix-5"><p>prefix 6, suffix 5</p></div> | ||
| <div class="col col-1 prefix-7 suffix-4"><p>prefix 7, suffix 4</p></div> | ||
| <div class="col col-1 prefix-8 suffix-3"><p>prefix 8, suffix 3</p></div> | ||
| <div class="col col-1 prefix-9 suffix-2"><p>prefix 9, suffix 2</p></div> | ||
| <div class="col col-1 prefix-10 suffix-1"><p>prefix 10, suffix 1</p></div> | ||
| <div class="col col-1 prefix-11"><p>prefix 11, suffix 0</p></div> | ||
| <div class="col col-1 suffix-11"><div>prefix 0, suffix 11</div></div> | ||
| <div class="col col-1 prefix-1 suffix-10"><div>prefix 1, suffix 10</div></div> | ||
| <div class="col col-1 prefix-2 suffix-9"><div>prefix 2, suffix 9</div></div> | ||
| <div class="col col-1 prefix-3 suffix-8"><div>prefix 3, suffix 8</div></div> | ||
| <div class="col col-1 prefix-4 suffix-7"><div>prefix 4, suffix 7</div></div> | ||
| <div class="col col-1 prefix-5 suffix-6"><div>prefix 5, suffix 6</div></div> | ||
| <div class="col col-1 prefix-6 suffix-5"><div>prefix 6, suffix 5</div></div> | ||
| <div class="col col-1 prefix-7 suffix-4"><div>prefix 7, suffix 4</div></div> | ||
| <div class="col col-1 prefix-8 suffix-3"><div>prefix 8, suffix 3</div></div> | ||
| <div class="col col-1 prefix-9 suffix-2"><div>prefix 9, suffix 2</div></div> | ||
| <div class="col col-1 prefix-10 suffix-1"><div>prefix 10, suffix 1</div></div> | ||
| <div class="col col-1 prefix-11"><div>prefix 11, suffix 0</div></div> | ||
| </section> | ||
@@ -391,14 +391,14 @@ </div> | ||
| <section> | ||
| <div class="col col-1 suffix-11"><p>prefix 0, suffix 11</p></div> | ||
| <div class="col col-1 prefix-1 suffix-10"><p>prefix 1, suffix 10</p></div> | ||
| <div class="col col-1 prefix-2 suffix-9"><p>prefix 2, suffix 9</p></div> | ||
| <div class="col col-1 prefix-3 suffix-8"><p>prefix 3, suffix 8</p></div> | ||
| <div class="col col-1 prefix-4 suffix-7"><p>prefix 4, suffix 7</p></div> | ||
| <div class="col col-1 prefix-5 suffix-6"><p>prefix 5, suffix 6</p></div> | ||
| <div class="col col-1 prefix-6 suffix-5"><p>prefix 6, suffix 5</p></div> | ||
| <div class="col col-1 prefix-7 suffix-4"><p>prefix 7, suffix 4</p></div> | ||
| <div class="col col-1 prefix-8 suffix-3"><p>prefix 8, suffix 3</p></div> | ||
| <div class="col col-1 prefix-9 suffix-2"><p>prefix 9, suffix 2</p></div> | ||
| <div class="col col-1 prefix-10 suffix-1"><p>prefix 10, suffix 1</p></div> | ||
| <div class="col col-1 prefix-11"><p>prefix 11, suffix 0</p></div> | ||
| <div class="col col-1 suffix-11"><div>prefix 0, suffix 11</div></div> | ||
| <div class="col col-1 prefix-1 suffix-10"><div>prefix 1, suffix 10</div></div> | ||
| <div class="col col-1 prefix-2 suffix-9"><div>prefix 2, suffix 9</div></div> | ||
| <div class="col col-1 prefix-3 suffix-8"><div>prefix 3, suffix 8</div></div> | ||
| <div class="col col-1 prefix-4 suffix-7"><div>prefix 4, suffix 7</div></div> | ||
| <div class="col col-1 prefix-5 suffix-6"><div>prefix 5, suffix 6</div></div> | ||
| <div class="col col-1 prefix-6 suffix-5"><div>prefix 6, suffix 5</div></div> | ||
| <div class="col col-1 prefix-7 suffix-4"><div>prefix 7, suffix 4</div></div> | ||
| <div class="col col-1 prefix-8 suffix-3"><div>prefix 8, suffix 3</div></div> | ||
| <div class="col col-1 prefix-9 suffix-2"><div>prefix 9, suffix 2</div></div> | ||
| <div class="col col-1 prefix-10 suffix-1"><div>prefix 10, suffix 1</div></div> | ||
| <div class="col col-1 prefix-11"><div>prefix 11, suffix 0</div></div> | ||
| </section> | ||
@@ -413,7 +413,7 @@ </div> | ||
| <div class="col col-6"> | ||
| <p>six</p> | ||
| <div>six</div> | ||
| <section class="nested"> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| </section> | ||
@@ -423,7 +423,7 @@ </div> | ||
| <div class="col col-6"> | ||
| <p>six</p> | ||
| <div>six</div> | ||
| <section class="nested"> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| </section> | ||
@@ -435,6 +435,6 @@ </div> | ||
| <div class="col col-3"> | ||
| <p>three</p> | ||
| <div>three</div> | ||
| <section class="nested"> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><div>six</div></div> | ||
| <div class="col col-6"><div>six</div></div> | ||
| </section> | ||
@@ -444,7 +444,7 @@ </div> | ||
| <div class="col col-6"> | ||
| <p>six</p> | ||
| <div>six</div> | ||
| <section class="nested"> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| </section> | ||
@@ -454,8 +454,8 @@ </div> | ||
| <div class="col col-3"> | ||
| <p>three</p> | ||
| <div>three</div> | ||
| <section class="nested"> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| </section> | ||
@@ -471,7 +471,7 @@ </div> | ||
| <div class="col col-6"> | ||
| <p>six</p> | ||
| <div>six</div> | ||
| <section class="nested"> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| </section> | ||
@@ -481,7 +481,7 @@ </div> | ||
| <div class="col col-6"> | ||
| <p>six</p> | ||
| <div>six</div> | ||
| <section class="nested"> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| </section> | ||
@@ -493,6 +493,6 @@ </div> | ||
| <div class="col col-3"> | ||
| <p>three</p> | ||
| <div>three</div> | ||
| <section class="nested"> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><div>six</div></div> | ||
| <div class="col col-6"><div>six</div></div> | ||
| </section> | ||
@@ -502,7 +502,7 @@ </div> | ||
| <div class="col col-6"> | ||
| <p>six</p> | ||
| <div>six</div> | ||
| <section class="nested"> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><p>four</p></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| <div class="col col-4"><div>four</div></div> | ||
| </section> | ||
@@ -512,8 +512,8 @@ </div> | ||
| <div class="col col-3"> | ||
| <p>three</p> | ||
| <div>three</div> | ||
| <section class="nested"> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><p>three</p></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| <div class="col col-3"><div>three</div></div> | ||
| </section> | ||
@@ -520,0 +520,0 @@ </div> |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.67%
31714
No dependency changes