If you are using the Sass version you can personalize Super GiGi by
simply changing the value of its variables before importing main.scss.
If you want to use rem on your site, set the font-size of your html tag to rem-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.
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.
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; } }
default: 12 - type: number
The number of columns used in our layout.
default: false - type: boolean
Set this variable to true if you want to generate static classes, like:
.row, .column or .large-12.
default: false - type: boolean
Set this variable to true if you want to generate placeholders to us like:
.column {
@extend %column;
@extend %large-12;
}
default: row - type: string
This option will change the name of the row object classes or placeholder.
default: column - type: string
This option will change the name of the column object classes or placeholder.
default: false - type: boolean
This option will change the format of the class names generated when $use-class is true.
default: '--' - type: string
This option will change the separator between the block and the element whe using BEM naming.
default: left - type: string - possibile values: left or right
This is the value to change if you want to develop a rtl application.
default: false - type: boolean
If true, all the grid will be passed by dry-it() mixin.
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";
}
}
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
EXPERIMENTALdefault: 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.
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.
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.
default: (
xxsmall: 0,
xsmall: 480,
small: 640,
medium: 720,
large: 1024,
xlarge: 1280,
xxlarge: 1440
)
mapOk, 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
}
}
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'
// }
// }
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.
EXPERIMENTALdefault: 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.
EXPERIMENTALdefault: 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.
EXPERIMENTALdefault: (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.