New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4: Grid redux #19099

Merged
merged 34 commits into from Feb 6, 2016

Conversation

Projects
None yet
6 participants
@mdo
Member

mdo commented Feb 6, 2016

Addresses a handful of grid changes:

  • #17119: Stubs out docs for flexbox grid.
  • #17131: Adds auto layout for flexbox grid columns (to mixins and predefined classes) with the addition of .col-{breakpoint classes. For example, use .col-xs to create as many grid columns as you'd like from xs and up.
  • #17261, #17603: Adds a new .col base class for grid columns and Changes the responsive grid modifier naming scheme from .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size} for simpler grid classes. For example, instead of .col-md-3.col-md-push-9 it's col-md-3.push-md-9. Also updates all examples to new markup.
  • #17512, #17514: Overhauls the grid mixins to merge make-col and make-col-span into a single make-col mixin, thereby ensuring mixins and predefined classes utilize the same float/flex behaviors.
  • #17593: Adds basic grid migration documentation, including mention of flexbox support, flexbox utils, and variables/maps changes.
  • #18024 , #18164: Horizontal flexbox alignment utilities added.
  • #18691: Documents flexbox vertical alignment utilities.
  • #18785: Cherry-picks the changes to rename our flexbox grid utilities to global flexbox utilities.

Todo:

  • Document flexbox utilities
@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Feb 6, 2016

Member

Most of this is done, including feedback from @cvrebert and @glebm, but I think I fucked up haha.

Need to revisit this a bit more yet—responsive is broken right now. I think I need to redo the main grid-framework mixins to generate something more akin to the Bootstrap 3 and http://flexboxgrid.com approaches. That is to say, nuke the base class and list out all the classes with a specific .col-{breakpoint} class for auto-width flexbox instead.

Going to need to noodle on that for awhile if no one jumps in to help.

Member

mdo commented Feb 6, 2016

Most of this is done, including feedback from @cvrebert and @glebm, but I think I fucked up haha.

Need to revisit this a bit more yet—responsive is broken right now. I think I need to redo the main grid-framework mixins to generate something more akin to the Bootstrap 3 and http://flexboxgrid.com approaches. That is to say, nuke the base class and list out all the classes with a specific .col-{breakpoint} class for auto-width flexbox instead.

Going to need to noodle on that for awhile if no one jumps in to help.

@karlhorky

This comment has been minimized.

Show comment
Hide comment
@karlhorky

karlhorky Feb 6, 2016

Looks like this addresses #18088 as well. I've closed it.

Looks like this addresses #18088 as well. I've closed it.

Show outdated Hide outdated scss/mixins/_grid-framework.scss
@if $enable-flex {
.col-#{$breakpoint} {
@include make-col($gutter);
flex-basis: 0;

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered max-width, flex-basis, flex-grow

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered max-width, flex-basis, flex-grow

Show outdated Hide outdated scss/_grid.scss
min-height: 1px;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
//

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Line contains trailing whitespace

@houndci-bot

houndci-bot Feb 6, 2016

Line contains trailing whitespace

More grid updates
- Flexbox responsive behavior fixed with specific .col-{breakpoint} classes now added
- Dropped the make-col mixin in favor of a column-basics placeholder that we can extend across our grid infrastructure
- Updated docs to use required .col-xs-12 (as a safeguard for when folks enable flexbox mode--this isn't necessary in default grid mode)
- Update flexbox grid docs to include responsive docs, tweak some other bits too
Show outdated Hide outdated scss/mixins/_grid.scss
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
padding-left: ($grid-gutter-width / 2);

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered position, min-height, padding-right, padding-left

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered position, min-height, padding-right, padding-left

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered position, min-height, padding-right, padding-left

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered position, min-height, padding-right, padding-left

Show outdated Hide outdated scss/mixins/_grid-framework.scss
@include make-col-modifier($modifier, $i, $columns)
}
}
}

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Line contains trailing whitespace

@houndci-bot

houndci-bot Feb 6, 2016

Line contains trailing whitespace

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Line contains trailing whitespace

@houndci-bot

houndci-bot Feb 6, 2016

Line contains trailing whitespace

Show outdated Hide outdated scss/mixins/_grid-framework.scss
@if $enable-flex {
.col-#{$breakpoint} {
@extend column-basics; // Relative position, min-height, and horizontal padding
flex-basis: 0;

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered max-width, flex-basis, flex-grow

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered max-width, flex-basis, flex-grow

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered max-width, flex-basis, flex-grow

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered max-width, flex-basis, flex-grow

Show outdated Hide outdated scss/mixins/_grid-framework.scss
@if $enable-flex {
.col-#{$breakpoint} {
position: relative;
max-width: 100%;

This comment has been minimized.

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered position, flex-basis, flex-grow, max-width, min-height, padding-right, padding-left

@houndci-bot

houndci-bot Feb 6, 2016

Properties should be ordered position, flex-basis, flex-grow, max-width, min-height, padding-right, padding-left

mdo added a commit that referenced this pull request Feb 6, 2016

@mdo mdo merged commit 3b38801 into v4-dev Feb 6, 2016

3 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
hound 1 violation found.

@mdo mdo deleted the v4-grid-redux branch Feb 6, 2016

mdo added a commit that referenced this pull request Feb 7, 2016

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Feb 8, 2016

Member

<3<3

Member

cvrebert commented on fb4f5f0 Feb 8, 2016

<3<3

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Feb 8, 2016

Member

@mdo But it's not horizontal if someone sets flex-direction: column..

@mdo But it's not horizontal if someone sets flex-direction: column..

mdo added a commit that referenced this pull request Feb 17, 2016

fixes #19148 as follow up to #19099: ensure local mixin variable is …
…sed for in make-grid-columns mixin

torbjoernk added a commit to torbjoernk/jlesc.github.io that referenced this pull request Feb 23, 2016

Adjusted CSS to recent changes in TWBS
These are mainly:
  - [#17194](twbs/bootstrap#17194)
  - [#18772](twbs/bootstrap#18772)
  - [#18782](twbs/bootstrap#18782)
  - [#19099](twbs/bootstrap#19099)
  - [#19102](twbs/bootstrap#19102)
  - [#19103](twbs/bootstrap#19103)

Signed-off-by: Torbjörn Klatt <t.klatt@fz-juelich.de>
@glebm

This comment has been minimized.

Show comment
Hide comment
@glebm

glebm Apr 4, 2016

Contributor

@mdo We can use placeholders, but placeholders used within media queries the name should be unique per breakpoint, and defined within the media query for that breakpoint, e.g.: %column-basics for all-breakpoint attributes, and %column-basics-%{breakpoint} per breakpoint. This is how it used to be before this refactoring:

%grid-column-float-#{$breakpoint} {

Contributor

glebm commented on scss/mixins/_grid.scss in 15018a6 Apr 4, 2016

@mdo We can use placeholders, but placeholders used within media queries the name should be unique per breakpoint, and defined within the media query for that breakpoint, e.g.: %column-basics for all-breakpoint attributes, and %column-basics-%{breakpoint} per breakpoint. This is how it used to be before this refactoring:

%grid-column-float-#{$breakpoint} {

@timalbert

This comment has been minimized.

Show comment
Hide comment
@timalbert

timalbert Jul 19, 2016

I don't think v4 documentation for modifier is updated

I don't think v4 documentation for modifier is updated

mdo added a commit that referenced this pull request Jul 24, 2016

Follow-up to #19099 for grid fixes
- Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col')
- Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding
- Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports

mdo added a commit that referenced this pull request Jul 27, 2016

One more follow up to #19099, #20349, and #20361
Remove mention of base class and fix grid examples

mdo added a commit that referenced this pull request Jul 27, 2016

Customizing grid docs updates to followup on #19099
- More details on columns and gutters
- Break it into clear sections
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment