Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
material-responsive-grid
Advanced tools
material-responsive-grid - npm Package Compare versions
Comparing version 1.0.1 to 1.1.0
@@ -1,1 +0,20 @@ | ||
| HEAD | ||
| HEAD | ||
| ## [1.0.1] - 2017-03-17 | ||
| ### Fixed | ||
| - Preserve margin for fixed width, left aligned grids. It was being set to 0, which pulled content to the left. | ||
| - Width of fixed width grids: Set width to auto and specify a max-width instead. Widths close to cutoff were overflowing. | ||
| ### Added | ||
| - Examples app | ||
| ## [1.1.0] - 2017-03-24 | ||
| ### Added | ||
| - .marginless grid class - Eliminates the outer padding that prevents a row's content from spanning edge to edge. | ||
| - .fixed-left grid class - Modifier class for .grid, will replace .grid-fixed-left in next major release | ||
| - .fixed-center class - Modifier class for .grid, will replace .grid-fixed-center in next major release | ||
| - Marginless grid example to examples app. | ||
| ### Deprecated | ||
| - .grid-fixed-left - Deprecated in favor of the .fixed-left modifier class for .grid | ||
| - .grid-fixed-center - Deprecated in favor of the .fixed-center modifier class for .grid |
| { | ||
| "name": "material-responsive-grid", | ||
| "author": "Ken Gregory", | ||
| "version": "1.0.1", | ||
| "version": "1.1.0", | ||
| "description": "A grid system that adheres to the responsive UI standards outlined for Google's Material Design", | ||
@@ -20,2 +20,2 @@ "main": "./material-responsive-grid.css", | ||
| "homepage": "https://github.com/STORIS/material-responsive-grid" | ||
| } | ||
| } |
@@ -56,7 +56,10 @@ # Material Responsive Grid # | ||
| - .grid - The main element that contains rows. It has a margin applied that will absorb the row's negative left and right margins. | ||
| - .grid-fixed-left - Starting at 1600 px, the grid will be fixed width and left aligned in the viewport. | ||
| - .grid-fixed-center - Starting at 1600 px, the grid will be fixed width and centered horizontally in the viewport. | ||
| - .marginless - Eliminates the outer padding that prevents a row's content from spanning edge to edge. | ||
| - .fixed-left - Starting at 1600 px, the grid will be fixed width and left aligned in the viewport. | ||
| - .fixed-center - Starting at 1600 px, the grid will be fixed width and centered horizontally in the viewport. | ||
| - .grid-fixed-left - Deprecated, see *.fixed-left* | ||
| - .grid-fixed-center - Deprecated, see *.fixed-center* | ||
| The default behavior for a grid will be to fill the viewport and preserve outer padding on edge-adjacent columns. | ||
| The default behavior for a grid will be to fill the viewport, which is the behavior that will occur when the fixed-width classes are omitted. | ||
| #### Rows #### | ||
@@ -81,2 +84,6 @@ | ||
| - .col-quarter-row - Consumes a quarter of a row for all screen sizes | ||
| - .col-half-row - Consumes half of a row for all screen sizes | ||
| - .col-three-quarter-row - Consumes three-quarters of a row for all screen sizes | ||
| - .col-full-row - Consumes the full row for all screen sizes | ||
| - .col-{size}-{integer, 1-max column count} - Number of columns to consume for a particular screen size | ||
@@ -90,2 +97,29 @@ - .col-{size}-offset-{integer, 0-max column count-1} - Number of columns to offset this column for a particular screen size | ||
| ## Example ## | ||
| ``` | ||
| <div class="grid"> | ||
| <div class="row"> | ||
| <div class="col-xs4-4 col-lg-6"> | ||
| <p>This column consumes the entire row for extra-small, | ||
| small, and medium screens. For large and extra-large | ||
| screens, it consumes half of the row.</p> | ||
| </div> | ||
| <div class="hidden-md-down col-half-row"> | ||
| <p>This column isn't visible for extra-small, small, | ||
| and medium screens, but is visible for large and | ||
| extra-large screens. It consumes half of the row. | ||
| </div> | ||
| <div class="hidden-sm-down hidden-up-xl col-md-12"> | ||
| <p>This column is only visible for medium and large | ||
| screens and consumes the entire row.</p> | ||
| </div> | ||
| <div class="hidden-sm8-only hidden-sm-only hidden-lg-only col-full-row"> | ||
| <p>This column is hidden for small and large screens | ||
| and consumes the entire row.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| ## Inspiration ## | ||
@@ -92,0 +126,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.37%
36371
- Number of lines in readme file
- increased by36.96%
126
No dependency changes