New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
cf-grid - npm Package Compare versions
Comparing version 3.1.1 to 3.1.2
| { | ||
| "name": "cf-grid", | ||
| "version": "3.1.1", | ||
| "version": "3.1.2", | ||
| "description": "Capital Framework grid", | ||
@@ -5,0 +5,0 @@ "main": "src/capital-framework.js", |
130
usage.md
@@ -11,5 +11,5 @@ ## CF Grid | ||
| > The path where boxsizing.htc is located. | ||
| The path where boxsizing.htc is located. | ||
| > This path MUST be overridden in your project and set to a root relative url. | ||
| This path MUST be overridden in your project and set to a root relative url. | ||
@@ -20,3 +20,3 @@ ``` | ||
| > The grid's maximum width in px. | ||
| The grid's maximum width in px. | ||
@@ -27,3 +27,3 @@ ``` | ||
| > The fixed width between columns. | ||
| The fixed width between columns. | ||
@@ -34,3 +34,3 @@ ``` | ||
| > The total number of columns used in calculating column widths. | ||
| The total number of columns used in calculating column widths. | ||
@@ -41,9 +41,9 @@ ``` | ||
| > Gives column blocks a background color if set to true. | ||
| Gives column blocks a background color if set to true. | ||
| ## Wrapper | ||
| > Wrappers are centered containers with a max-width and fixed gutters that match the gutter widths of columns. | ||
| Wrappers are centered containers with a max-width and fixed gutters that match the gutter widths of columns. | ||
| > To support IE 6/7, ensure that the path to boxsizing.htc is set using the @grid_box-sizing-polyfill-path Less variable. Read more: https://github.com/Schepp/box-sizing-polyfill. | ||
| To support IE 6/7, ensure that the path to boxsizing.htc is set using the `@grid_box-sizing-polyfill-path` Less variable. Read more: https://github.com/Schepp/box-sizing-polyfill. | ||
@@ -56,3 +56,3 @@ ### Less mixin | ||
| > You can create wrappers with different max-widths by passing a pixel value into the mixin. | ||
| You can create wrappers with different max-widths by passing a pixel value into the mixin. | ||
@@ -87,5 +87,5 @@ ### Usage | ||
| > Computes column widths and prefix/suffix padding. | ||
| Computes column widths and prefix/suffix padding. | ||
| > CSS borders are used for fixed gutters. | ||
| CSS borders are used for fixed gutters. | ||
@@ -144,7 +144,7 @@ ### Usage | ||
| > Since all cf-grid columns have left and right gutters you will notice undesireable offsetting when nesting columns. Normally this is removed with complex selectors or by adding classes to the first and last column per 'row'. In cf-grid the way to get around this is by wrapping your columns in a container that utilizes the .grid_nested-col-group() mixin. This mixin uses negative left and right margins to pull the columns back into alignment with parent columns. | ||
| Since all cf-grid columns have left and right gutters you will notice undesirable offsetting when nesting columns. Normally this is removed with complex selectors or by adding classes to the first and last column per 'row'. In cf-grid the way to get around this is by wrapping your columns in a container that utilizes the .grid_nested-col-group() mixin. This mixin uses negative left and right margins to pull the columns back into alignment with parent columns. | ||
| > NOTE: Working this way allows you to easily create responsive grids. You are free to control the number of columns per 'row' without having to deal with the first and last columns of each row. | ||
| **NOTE:** Working this way allows you to easily create responsive grids. You are free to control the number of columns per 'row' without having to deal with the first and last columns of each row. | ||
| > NOTE: cf-grids does not use 'rows' and there is no row container. To clarify, if you have a 12 column grid and place 24 columns inside of a wrapper cf-grid columns will automaitcally stack into 2 'rows' of 12. | ||
| **NOTE:** cf-grids does not use 'rows' and there is no row container. To clarify, if you have a 12 column grid and place 24 columns inside of a wrapper cf-grid columns will automatically stack into 2 'rows' of 12. | ||
@@ -193,61 +193,61 @@ ### Less mixin | ||
| <div class="cols-12"> | ||
| <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> | ||
| </section> | ||
| <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> | ||
| </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> | ||
| </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> | ||
| </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> | ||
| </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> | ||
| </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> | ||
| </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> | ||
| </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> | ||
| </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> | ||
| </section> | ||
| <section> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><p>six</p></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-6"><p>six</p></div> | ||
| <div class="col col-6"><p>six</p></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-12"><p>twelve</p></div> | ||
| </section> | ||
| <section> | ||
| <div class="col col-12"><p>twelve</p></div> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| ```` | ||
| ``` | ||
| <div class="cols-12"> | ||
@@ -488,2 +488,2 @@ | ||
| </div> | ||
| ```` | ||
| ``` |
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.39%
432592
No dependency changes