gel-grid - npm Package Compare versions

Comparing version 1.0.0 to 3.0.1

bower.json

 {
   "name": "gel-grid",
-  "version": "1.0.0",
+  "version": "2.0.5",
   "homepage": "http://www.bbc.co.uk/gel",
@@ -5,0 +5,0 @@ "authors": [

package.json

 {
   "name": "gel-grid",
-  "version": "1.0.0",
+  "version": "3.0.1",
   "description": "A flexible code implementation of the GEL Grid",
@@ -5,0 +5,0 @@ "main": "_grid.scss",

README.md

 <h1 align="center">GEL Grid</h1>
 <p align="center">
+  <a href="https://travis-ci.org/bbc/gel-grid" target="_blank"><img src="https://travis-ci.org/bbc/gel-grid.svg?branch=master"></a>
+</p>
+<p align="center">
     A flexible code implementation of the GEL Grid.<br />
@@ -12,3 +15,3 @@ Forms part of the <a href="https://github.com/bbc/gel-foundations" target="_blank"><b>GEL Foundations</b></a>
 
-The GEL Grid has been established to work on all devices and is independent of device size and resolution.
+This is implementation of the grid is built using `flexbox` with an `inline-block` fallback older browsers. This allows us to support browsers IE8 and above.
 
@@ -75,2 +78,6 @@ It can used in two forms, by simply adding the relevant classes to your markup:
 
+### Compiled CSS
+
+If you require just the built css, it is automatically built to the [gel-grid.css](https://github.com/bbc/gel-grid.css) repository.
+
 ## Dependencies
@@ -126,2 +133,6 @@
 
+*Flexbox Only*
+- `gel-layout--equal` - cause each layout item to be of equal height
+- `gel-layout--fit` - allows each layout items to size itself automatically by dividing the space equally between the total number of items
+
 ### Widths
@@ -172,2 +183,6 @@
 
+**More information:**
+
+- [The Importance of !important(http://csswizardry.com/2016/05/the-importance-of-important/)
+
 ### Sass Mixins
@@ -206,2 +221,20 @@ The GEL grid component exposes a collection of Sass Mixins which can be called within your Sass. Should you need to create a more bespoke component which is not possible using the standard utility classes.
 
+### Flexbox
+The grid is developed using `flexbox` giving us a flexible, powerful grid solution. Flexbox is not fully supported in all browsers and has seen a number of development iterations. With this in mind we have intentionally targeted specific implementations of flexbox and avoided some older more troublesome implementations.
+
+For browsers which do not support flexbox we fallback to an `inline-block` grid which offers ~80% of the features available in the flexbox grid.
+
+We recommend you include some JavaScript based [Feature Detection](https://modernizr.com/) which can apply a top level class to signify if flexbox is supported or not. This will increase the features available to older browsers. The specific class applied can be controlled using the `$gel-grid-flexbox-feature-detection-class` option.
+
+The following features are only supported by the flexbox grid and will degrade gracefully:
+
+- [Equal Height Columns](http://bbc.github.io/gel-grid/#equal-height)
+- [Independent Alignment](http://bbc.github.io/gel-grid/#independent-alignment)
+- [Automatic Grids](http://bbc.github.io/gel-grid/#fit)
+
+**More information:**
+
+- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [Can I Use: Flexbox](http://caniuse.com/#feat=flexbox)
+
 ### 1280px
@@ -224,7 +257,8 @@ The GEL Grid guideline has been updated to include a wider 1280px breakpoint. By default the grid supports this breakpoint. It can be displayed by setting the `$gel-grid-enable--1280-breakpoint` to `false`.
 - [Box Sizing Border Box FTW](http://www.paulirish.com/2012/box-sizing-border-box-ftw/)
+- [ORB Box Sizing Reset](https://gist.github.com/shaunbent/ca6dc58305ae3e434615acf1ef368fe8)
 
 ### inline-block & white-space
-The GEL Grid is constructed using `display: inline-block;`. This technique allows us to create a more powerful and flexible grid than is possible with more traditional techniques likes the use of floats.
+The GEL Grid is constructed using `flexbox` with an `inline-block` fallback for older browsers. Using `inline-block` allows us to achieve a lot of the same complex layout technique that flexbox offers and provides a more powerful and flexible grid than is possible with more traditional techniques likes the use of floats.
 
-One downside to the use of `display: inline-block;` is the white-space which is introduce between `inline-block` elements. This space is a representation of the space between elements in the HTML. In order for the grid to work correctly this space needs to be removed.
+One challenge to the using of `display: inline-block;` is the white-space which is introduced between `inline-block` elements. This space is a representation of the space between elements in the HTML. In order for the grid to work correctly this space needs to be removed.
 
@@ -263,2 +297,3 @@ There are a few ways you can do this:
 - `$gel-grid-columns` - a Sass list containing a list of which fractions utility classes will be generated for
+- `$gel-grid-flexbox-feature-detection-class: 'no-flexbox'` - The class applied by a feature detection script to signify there the current browser doesn't support Flexbox
 
@@ -272,5 +307,14 @@ ### Output Configuration
 
+## Grid Bookmarklet
+
+The following Grid Bookmarklets can be used to overlay the grid in the browser to check visual alignment of elements:
+
+- [1280px - 12 Column](https://gist.github.com/shaunbent/1276abcdcc9494127a1ecc0222c57bbd#file-12-col-1280-js)
+- [1280px - 24 Column](https://gist.github.com/shaunbent/1276abcdcc9494127a1ecc0222c57bbd#file-24-col-1280-js)
+- [1008px - 12 Column](https://gist.github.com/shaunbent/1276abcdcc9494127a1ecc0222c57bbd#file-12-col-1008-js)
+- [1008px - 24 Column](https://gist.github.com/shaunbent/1276abcdcc9494127a1ecc0222c57bbd#file-24-col-1008-js)
+
 ## Who is using this?
 
-The following teams are currently using this component: GEL, News, Sport, Live, Search, BBC Food, Taster & Academy
+The following teams are currently using this component: GEL, News, Sport, Live, Search, BBC Food, Taster & Academy, IPS Web (R&D)
 
@@ -277,0 +321,0 @@ If your team is using this component, let us know and we'll add you to the list.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 9 instances in 1 package

Improved metrics

Number of package files

44

increased by91.3%

Lines of code

2840

increased by8.27%

Number of lines in readme file

344

increased by14.67%

Number of medium supply chain risk alerts

1

decreased by-88.89%

Worsened metrics

Total package byte prevSize

209650

decreased by-23.67%

No dependency changes