ionic-framework/src/components/grid/grid.scss

@import "../../themes/ionic.globals";

@import "./grid.mixins";

// Grid
// --------------------------------------------------
// Using flexbox for the grid, originally inspired by Philip Walton:
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
// Column layout based on the Bootstrap grid system:
// http://v4-alpha.getbootstrap.com/layout/grid/


// Grid Breakpoints
// --------------------------------------------------

/// @prop - The minimum dimensions at which your layout will change,
/// adapting to different screen sizes, for use in media queries
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;


// Grid Containers
// --------------------------------------------------

/// @prop - Maximum width of the grid for different screen sizes
$grid-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;


// Grid Columns
// --------------------------------------------------

/// @prop - Number of columns for the grid
$grid-columns:               12 !default;

/// @prop - Total width of the padding for the grid
$grid-padding-width:         10px !default;

/// @prop - Padding for the columns for different screen sizes
$grid-padding-widths: (
  xs: $grid-padding-width,
  sm: $grid-padding-width,
  md: $grid-padding-width,
  lg: $grid-padding-width,
  xl: $grid-padding-width
) !default;


// Check that the Sass maps are declared correctly
// --------------------------------------------------

@include assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");

@include assert-ascending($grid-max-widths, "$grid-max-widths");


// Grid
// --------------------------------------------------

.grid {
  @include make-grid();

  &[fixed] {
    @include make-grid-max-widths();
  }
}

// Row
// --------------------------------------------------

.row {
  @include make-row();
}

// Columns
// --------------------------------------------------

.col {
  @include make-column-base();
}

@include make-grid-columns();