Skip to content

Commit

Permalink
Merge branch 'release/v5.0.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dan503
Dan503 committed Jul 5, 2018
2 parents d5f3b48 + 7033a0f commit 84efaa6
Show file tree
Hide file tree
Showing 79 changed files with 3,483 additions and 1,726 deletions.
194 changes: 10 additions & 184 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,196 +4,22 @@
npm install gutter-grid --save
``````

Gutter Grid is a flexbox based grid system for building fully responsive grid layouts with highly customisable gutters. Even though it is powered by flexbox, it features `display:table`, `float:left` and `display:inline-block` backups for legacy browsers (when enabled) to prevent your site's layout from blowing up even when viewed in IE8 and 9.
## Why use [Gutter Grid](http://gutter-grid.net)?

To read the full documentation go to http://gutter-grid.net
### The problem

## Change Log
CSS Grid is now implemented in all modern browsers. All of our layout dreams have come true! ... Well almost all of them.

### Version 4.1.0
Unfortunately IE11 still holds a fairly significant market share and it doesn't support the modern implementation of CSS Grid. It can be difficult to get people on board with the idea of allowing IE to look different to modern browsers. That is especially the case if the site you are building is an intranet with a 90% IE user base.

This release is all about trying to mitigate the Chrome negative margin bug as much as possible. Gutter Grid now tries it's best to avoid combining a negative top margin with a top gutter height. Instead Gutter Grid just doesn't output a top outer gutter unless the user has explicitly asked for one. If there is no outer gutter then there is no need to cancel it out with a negative margin which means no Chrome bug.
[Autoprefixer](https://github.com/postcss/autoprefixer) is able to help out a lot in terms of getting IE11's version of CSS Grid to behave almost like modern browsers do. Unfortunately we are still stuck with IE11 not supporting CSS Grid auto-placement. That is a major pain point for this industry and Gutter Grid sets out to fix that.

The Chrome bug is still an issue for bottom outer gutters though. The bottom negative margin cannot be removed. To combat this I've added a new class to the class system. The `grid__paddedWrapper` class adds `padding-bottom: 1px` instead of `overflow: hidden`. It is designed to be a replacement for the `grid__wrapper` class when overflow is needed. If using the mixin system `padding-bottom: 1px` needs to be added yourself to an element wrapping around the grid.
### The solution

### Version 4.0.0
Gutter Grid is a flexbox based grid system for building fully responsive grid layouts with highly customisable gutters. These gutters are highly reminiscent of the CSS `grid-gap` property. So reminiscent in fact that that Gutter Grid gutters will line up perfectly with real CSS Grid gaps! Since this grid system is powered by flexbox and not CSS Grid, it works perfectly in IE11. Through Gutter Grid, IE11 has access to simple auto-placement grids with gaps (albeit with a different syntax). It even comes with a default set of media queries that may save you from having to write out some custom styles for mobile devices.

This is a big update. CSS Grid is killing off almost all need for Gutter Grid. IE 11 is essentially the only reason why Gutter Grid is still at all worth using right now.
With IE 8 and 9 essentially dead, it doesn't make sense to hamper the experience of IE11 developers for the sake of these dead browsers.
I'm optimising the code to make the experience as enjoyable as possible for IE11 devs. Unfortunately it means the defaults will be different depending on if `$grid-legacy-support` is enabled or not.
If the legacy setting is turned on then Gutter Grid will behave in mostly the same way as it did in version 3.x.
Even though Gutter Grid is powered by flexbox, it features a legacy mode that, when enabled, adds `display:table`, `float:left` and `display:inline-block` backups that legacy browsers can fall back on. This will help prevent your site from blowing up even when viewed in those decrepit old IE8 and 9 browsers!

#### Breaking changes:
**To read the full documentation go to http://gutter-grid.net.**

Note: these breaking changes mostly apply only when the `$grid-legacy-support` is set to `false` (the default setting).

- New default settings
- `$align` in the mixin now defaults to `left`.
- `$wrap` in the mixin now defaults to `true` but only if `$cols` has been defined.
- Grids no longer stretch by default. In order to make the grid stretch like it did in v3.x, if using the classes system, a `grid--stretch` class needs to be added to the `.grid` element. If using the mixin system, a `$stretch: true` setting needs to be called in the mixin. This is only necessary if columns have been defined.
- Grids with a column count setting will now wrap by default unless if wrapping is explicitly disabled or `$grid-legacy-support` is enabled.
- The `grid--noGrowth` class has been renamed `grid--noStretch` to align with the new `grid--stretch` class. (A breaking change for **everyone**).
- The `$grow` setting in the mixin has been renamed to `$stretch`. (A breaking change for **everyone**).
- Multi-spanning cells now flex-grow by default. (A breaking change for **everyone**).
- `$breakpoints` parameter in the mixin has been moved to the 3rd slot. (A breaking change for **everyone**).
- `$grid-break-points` setting now has new syntax that makes it easier to tell what column count a particular set of breakpoints is for. Below is an impracticle example showing the new format:

**Version 3.x**

````scss
$grid-break-points: (
// No media queries for 1 column grid
(false),

// 2 column grid breakpoints
(
// At 600px wide screen and below, make columns 100% wide
100%: 600px,
),

// No media queries for 3 column grid
(false),

// 4 column grid breakpoints
(
50% : 960px,
100% : 600px,
)

// No media queries for a 5 column grid
false,
)
````

**Version 4.0.0**

````scss
$grid-break-points: (
// No need to mention a 1 column grid

// 2 column grid breakpoints
2: (
// At 600px wide screen and below, make it a 1 column grid
// (using percentages here instead of column count still works)
1: 600px,
),

// No need to mention a 3 column grid

// 4 column grid breakpoints
4: (
2 : 960px,
1 : 600px,
)

// No media queries for 5 column grid
// Only needed if using the class system
5: false,
)
````

#### New features:

- Instead of listing percentage values as keys in the `$breakpoints` parameter key/value pairs, you can now simply list the number of columns that the grid should have as the keys in the key/value pairs. The old method of using percentages as the key values will still work if that method is preferred.

**Version 3.x (Still works in version 4)**

````scss
@include grid(7, $breakpoints: (
// On a 960px wide screen or below, the columns will be 25% wide
25% : 960px,
// You can use mq-scss syntax here as well
50% : (max, 600px),
100% : 480px,
));
````

**Version 4.x**

````scss
@include grid(7, $breakpoints: (
//On a 960px wide screen or below, there will be 4 columns
4 : 960px,
// You can still use mq-scss syntax here as well
2 : (max, 600px),
1 : 480px,
));
````

- `calc` is now used by default to determine column widths. So instead of seeing `width: 33.33%;` in your styles, you will see `width: calc(100% / 3);`. This makes it clear from the styles how many columns are being generated. For example it is much clearer that `width: calc(100% / 7);` equals 7 columns rather than `width: 14.2857%;`.

- New config variable `$grid-calc-support` has been introduced. Since `calc` [isn't supported in every browser](https://caniuse.com/#feat=calc) (thanks Opera Mini and Android 4) a new `$grid-calc-support` setting has been added. This defaults to whatever the opposite of the `$grid-legacy-support` setting is. This means that if legacy support is needed then `$grid-calc-support` will automatically be disabled. If you need to support Opera Mini (or you prefer seeing percentages in your styles), set `$grid-calc-support` to false.


## Version 3.0.0

- Gutter Grid will now install whatever version of mq-scss is available (defaulting to the latest version)
- **Breaking change:** You now need to set the `$grid-legacy-support` setting to `true` if you wish to support browsers that do not support flexbox natively. (Change made to drastically reduce the amount of bloat found in the output css).

## Version 2.0.0

### What's new?

- Gutter Grid now comes in mixin flavour!
- Gutters can now have different vertical vs horizontal gutter widths
- Column media queries can now take [mq-scss](https://www.npmjs.com/package/mq-scss) syntax for defining completely custom breakpoints
- Improved legacy browser support
- Reduced specificity on class based selectors for easier overriding of styles

### v2.0.0 Breaking changes

#### Reduced specificity in class names

If upgrading, none of the class names have changed, however the reduced specificity will mean that you may need to update your styles to not conflict with the new grid system.

#### New format for assigning column break points

The new format to the column break points is a bit different to the original. before it was a list of screen-sizes then column widths with a space in between each one.

Version 1.x

`````
(
600px 100%,
)
`````

Column width is now stated first, and screen width is stated second. By default, the screen width will be calculated as a `max-width` media query. However, you can now provide [mq-scss](https://www.npmjs.com/package/mq-scss) syntax as an alternative to stating a screen width pixel value. This means that you can define the column break points using just about any media query you like. Taking a mobile first `min-width` approach will break legacy browser support though unless you have [UnMQ](https://github.com/jonathantneal/postcss-unmq) integrated into your build process.

Version 2.x

`````
(
100% : 600px, //state a max-width pixel value
//or
100% : (max, 600px), //provide a custom mq-scss media query
)
`````

#### New format for assigning gutter break-points

The new way of assigning breakpoints to gutters isn't much different different to the original method. The only incompatible difference being that now you need to write `mq` with a space after it before the list of values (the space is vital).

Version 1.x

`````scss
$grid-cell-gutters: (
'mediaQueryGutter' : (
50px,
30px (max, 800px),
10px (max, 700px)
)
);
`````

Version 2.x

`````scss
$grid-cell-gutters: (
'mediaQueryGutter' : mq (
50px,
30px (max, 800px),
10px (max, 700px)
)
);
`````
You can view the change log on the [GitHub releases page](https://github.com/Dan503/gutter-grid/releases) or the [Gutter Grid website](http://gutter-grid.net/pages/15-change-log/).
153 changes: 151 additions & 2 deletions docs/assets/scripts/ie8-main.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
// indexOf polyfill
// Minified version of this:
// https://stackoverflow.com/a/35054662/1611058
if (!Array.prototype.indexOf) {
Array.prototype.indexOf=function(r){var t=this.length>0,i=Number(arguments[1])||0;for((i=i<0?Math.ceil(i):Math.floor(i))<0&&(i+=t);i<t;i++)if(i in this&&this[i]===r)return i;return-1};
}

$(document).ready(function(){

//IE8 tabs code
Expand Down Expand Up @@ -32,7 +39,12 @@ $(document).ready(function(){

function switchTab(tab) {

if ($.isNumeric(tab)) {
var isString = typeof tab === 'string';

if ($.isNumeric(tab) || isString) {
if (isString) {
tab = ['classes','mixin','both'].indexOf(tab);
}
tab = This.$triggers.eq(tab);
}

Expand All @@ -51,4 +63,141 @@ $(document).ready(function(){
var tabset = new tabs(this);
})

});


// CODE MODIFICATION

var get_format = function get_format($wrapper) {
var text = $wrapper.text();
var isMixin = /mixin|include/i.test(text);
return isMixin ? 'mixin' : 'classes';
};

function DemoCode(elem) {

this.$wrapper = $(elem);

this.get_type = function(){
var classes = this.$wrapper.attr('class');
var result = /\s([A-z]+)$/.exec(classes);
return result[1];
}

this.add_html_class = function(){
var _this = this;

var html = _this.$wrapper.html();

var regex = /&lt;div class="grid grid--cols-([A-z0-9 -]*)"&gt;/gi;
var replacement = html.replace(regex, '&lt;div class="grid grid--cols-$1 grid--wrap"&gt;');
// console.log('original', html);
// console.log('replacement', replacement);
_this.$wrapper.html(replacement);
}

this.add_mixin_wrap_setting = function(){
var html = this.$wrapper.html();
if (html.indexOf('$wrap: false') === -1) {
//short hand version
var newHTML = html.replace(/include grid\((.+)\)/gi, 'include grid($1, $wrap: true)');
//long hand version
newHTML = newHTML.replace(/include grid\(\$cols: ([0-9]+?), \$gutter: ([0-9A-z]+?)(.*)\)/gi, 'include grid($cols: $1, $gutter: $2, $3, $wrap: true)');

if (html.indexOf('.mixin-13 ') > -1) {
var prevHTML = '@include grid(3, $MQs: false';
newHTML = html.replace(prevHTML, prevHTML + ', $wrap: true');
}
this.$wrapper.html(newHTML);
}
}

this.type = this.get_type();
this.format = get_format(this.$wrapper);

if (this.type === 'html' && this.format === 'classes') {
this.add_html_class();
} else if (this.type === 'scss' && this.format === 'mixin') {
this.add_mixin_wrap_setting();
}
}

function DemoResult(resultElem) {
this.$result = $(resultElem);
this.format = get_format(this.$result);

this.add_wrap_class = function(){
var $grids = this.$result.find('> * > .grid, > .grid, > figure > * > .grid');

var $wraps = $grids.filter(function () {
var hasCols = $(this).attr('class').indexOf('grid--cols') > -1;
return hasCols;
});

$wraps.not('.grid--noWrap').not('grid--vertical').addClass('grid--wrap');
}

if (this.format === 'classes') {
this.add_wrap_class();
}
}

function Demo (demoElem) {

this.$demo = $(demoElem);
this.$results = this.$demo.find('.demo__result');
this.$codeBlocks = this.$demo.find('.demo__markup');
this.id = this.$demo.attr('id');

this.can_modify = function(){
var excluded_ids = [
'11-horizontal-cell-alignments-3',
];
return !isExcluded(excluded_ids, this.id);
}

this.gather_classes = function($elem, Cls){
var classArray = [];

$elem.each(function (i, elem) {
var Class = new Cls(elem);
classArray.push(Class);
});

return classArray;
}

if (this.can_modify()) {
this.results = this.gather_classes(this.$results, DemoResult);
this.codeBlocks = this.gather_classes(this.$codeBlocks, DemoCode);
}

};

var excludedPages = [
'/pages/04-using-columns/',
'/pages/05-control-wrapping/',
'/pages/09-nesting-grids/',
'/pages/10-borders-and-shadows-on-guttered-cells/',
'/pages/12-vertical-cell-alignments/',
];

if (
!Modernizr.flexbox &&
!isExcluded(excludedPages, window.location.pathname)
){

$('.demo').each(function () {
new Demo(this);
});
}

});

function isExcluded(exclusionsArray, pathname) {
for (var i = 0; i < exclusionsArray.length; i++) {
if (exclusionsArray[i] === pathname) {
return true;
}
}
return false;
}
2 changes: 1 addition & 1 deletion docs/assets/scripts/main.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/scripts/main.js.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 84efaa6

Please sign in to comment.