Options

If you are using the Sass version you can personalize Super GiGi by simply changing the value of its variables before importing main.scss.

$rem-base

If you want to use rem on your site, set the font-size of your html tag to rem-base.

$design-base

default: $rem-base - type: unit

This is the default value for all the units functions, it is useful when you have a pixel based design mockup and you want to convert all of the measurements in rem / em. By default this has the same value of $rem-base, but in some cases you may want change it.

$row-width

default: rem-calc(1920) - type: unit

This is the max-width of our row objects. The default value is 1920 pixels converted in rems via rem-calc() function.

$column-gutter

default: rem-calc(30) - type: unit

This is the space between our columns, also known as gutter. The default value is 30 pixels converted in rems via rem-calc() function.

If you prefer, there is a EXPERIMENTAL option that you can use to have a responsive gutter using a map similar to the breakpoints one.

$column-gutter: (
  'xxsmall': 0.5em,
  'medium': 1em,
  'xlarge': 1.5em,
);

Doing that, all the grid mixins will generate responsive gutter:

.foo {
  @include grid-column;
}

and tadà:

.foo {
  box-sizing: border-box;
  display: flex;
  flex-direction: column; 
}
@media only screen and (min-width: 0em) {
  .foo {
    padding-left: 0.25em;
    padding-right: 0.25em; } }
@media only screen and (min-width: 45em) {
  .foo {
    padding-left: 0.5em;
    padding-right: 0.5em; } }
@media only screen and (min-width: 80em) {
  .foo {
    padding-left: 0.75em;
    padding-right: 0.75em; } }

$grid-columns

default: 12 - type: number

The number of columns used in our layout.

$use-classes

default: false - type: boolean

Set this variable to true if you want to generate static classes, like: .row, .column or .large-12.

$use-placeholders

default: false - type: boolean

Set this variable to true if you want to generate placeholders to us like:

.column {
  @extend %column;
  @extend %large-12;
}

$row-name

default: row - type: string

This option will change the name of the row object classes or placeholder.

$column-name

default: column - type: string

This option will change the name of the column object classes or placeholder.

$use-bem

default: false - type: boolean

This option will change the format of the class names generated when $use-class is true.

$bem-separator

default: '--' - type: string

This option will change the separator between the block and the element whe using BEM naming.

$grid-start

default: left - type: string - possibile values: left or right

This is the value to change if you want to develop a rtl application.

$use-dry

default: false - type: boolean

If true, all the grid will be passed by dry-it() mixin.

$debug

default: false - type: boolean

With big applications and semantic BEM selectors, it is difficult to understand what kind of properties a DOM element has. If you set this variable to true, Super GiGi will add a "content" property that will be useful when we inspect the elements.

Example:

.fooColumn {
  font-size: 30px; }
  @media only screen and (min-width: 45em) {
    .fooColumn {
      left: 8.33333%;
      right: 8.33333%;
      padding-left: calc(1.875rem / 2);
      padding-right: calc(1.875rem / 2);
      order: 0;

      content: "COLUMN: width : (xxsmall: 6, large: 6) | push : 1 | pull : 1 | order : 0 | global : true"; 

    } 
  }

$sg-collapse

default: false - type: boolean

By default, Super GiGi columns have a $column-gutter made with padding. If you want to remove that gutter to all your columns, set this option to true

$sg-use-margin EXPERIMENTAL

default: false - type: boolean

It is possible to use margins as additional column-gutter between columns. This is not mutual esclusive to the padding -to do that, see the $collapse option inside the grid-column mixin or the $sg-collapse option-, but it will add another column-gutter to your column. This is the general option for all your columns. You can set this option to a single column by the $margin option of the grid-column mixin.

$sg-include-box-sizing

default: true - type: boolean

By default, Super GiGi columns and rows have a box-sizing: border-box applied to them. If you have already globally defined box-sizing: border-box within your project and want to remove the redundancy, set this option to false.

$eq-grid

default: false - type: boolean

Super GiGi supports EQJS. Turn this option to true to use element queries css instead of classical mediaqueries. See the media-query() mixin for other infos.

$breakpoints

default: ( xxsmall: 0, xsmall: 480, small: 640, medium: 720, large: 1024, xlarge: 1280, xxlarge: 1440 )

  • type: map

Ok, this might look a little complicated :) but we wanted to have an easily accessible setting in one place. This is a Sass map, and is used to define all of our mediaqueries.

The keys are used to define the name of our breakpoints and will be passed to our classes generator or to our mixins.

As an example, the following...

$breakpoints: (sml: 0em, mdm: 40em, lrg: 60em);

... will generate this css:

@media (min-width: 40em) {
  .mdm-3 {
    width: 25%; } }
@media (min-width: 40em) {
  .lrg-3 {
    width: 25%; }}

If you decide to change class names like in the example above, then just in the same way you have to change how you refer to breakpoints in all of your mixins:

.foo {
  @include grid-row(false);
  &__bar {
    @include grid-column(
      $width: (sml:6, lrg: 6),
      $collapse: false,
      $push: (mdm:6, lrg: 12),
      $pull: 1,
      $order: 0
    );
  }
  &foo {
    @include media-query(lrg) {
      background: red
    }
  }

Note

As values you can pass unitless values (like in the default setting), those will be converted in em. If you want you can pass the unit too like:

$breakpoints: (
  small: 300px,
  large: 900px
);

@import 'main';

.example {
  @include media-query(small, only) {
    content: 'yeah';
  }
}

// Will generate
// @media only screen and (min-width: 300px) and (max-width: 899px) {
//     .example {
//         content: 'yeah'
//     }
// }
$breakpoints: (
  small: 20rem,
  large: 40rem
);

@import 'main';

.example {
  @include media-query(small, only) {
    content: 'yeah';
  }
}

// Will generate
// @media only screen and (min-width: 20rem) and (max-width: 39.9375rem) {
//     .example {
//         content: 'yeah'
//     }
// }
$breakpoints: (
  small: 300,
  large: 900
);

@import 'main';

.example {
  @include media-query(small, only) {
    content: 'yeah';
  }
}

// Will generate
// @media only screen and (min-width: 18.75em) and (max-width: 56.1875em) {
//     .example {
//         content: 'yeah'
//     }
// }

$use-flex

default: true - type: boolean

Super GiGi is developed with CSS3 Flexbox, but there are fallback options with float and display: table. Set this option to false, to don't use the flex properties.

$use-table EXPERIMENTAL

default: true - type: boolean

Super GiGi is developed with CSS3 Flexbox, but there is a fallback in table. Set this option to true, to use the float properties.

$use-float EXPERIMENTAL

default: true - type: boolean

Super GiGi is developed with CSS3 Flexbox, but there is a fallback in float. Set this option to true, to use the float properties.

$query-direction EXPERIMENTAL

default: (min-width, max-width) - type: list

Super GiGi is developed mobile first, but in some cases you would like to develop in graceful decadency. To do this you can set $query-direction: (max-width, min-width). The media-queries will be reverted and all the queries will go from the largest query to the smallest one.

git v npm version