@mixin grid-template()
Grid mixin is an attempt to make responsive design more straightforward by organizing the grid for various media queries.
It is a mixin that receives as an input list of arguments. The first argument is a media query breakpoint from _sinConfig
, then the mixin expects a list of grid columns and optionally a list of grid rows.
Parameters
$args: (arglist)
Takes an arglist
of lists
.
Each
list
contains:
$min-width-query
:{string}
- Min width, breakpoint from_sin.config.scss
$grid-template-columns
:{list}
- A list of grid template columns$grid-template-rows
:{list}
- A list of grid template rows (optional)
Example
.sin{
@include grid-template(('', 1fr), ('xs', 1fr), ('md', (1fr 1fr), (1fr 1fr)), ('lg', 1fr 1fr 1fr));
}
.sin {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 576px) {
.sin {
display: grid;
grid-template-columns: 1fr;
}
}
@media (min-width: 1200px) {
.sin {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
}
@media (min-width: 1460px) {
.sin {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
}
@mixin mq()
Parameters
$min: 120px (number)
Breakpoint from which the query will kick in
$max: 4096px (number)
Breakpoint will work up to $max
Examples
.sin{
@include mq(xs, xxl){
display: block;
}
}
@media (min-width: 576px) and (max-width: 2560px) {
.sin {
display: block;
}
}
.sin{
@include mq(xs, 1920px){
display: block;
}
}
@media (min-width: 576px) and (max-width: 1920px) {
.sin {
display: block;
}
}
Requires
@function too-large-min-width() [private]
@function contains() [private]
@function get() [private]
@mixin mq-min()
Parameters
$min: 120px (number)
Breakpoint from which the query will kick in
Example
.sin{
@include min(xs){
display: block;
}
}
@media (min-width: 576px) {
.sin {
display: block;
}
}
Related
Works the same as mqMix [external]
@mixin min()
Parameters
$min: 120px (number)
Breakpoint from which the query will kick in
Example
.sin{
@include min(xs){
display: block;
}
}
@media (min-width: 576px) {
.sin {
display: block;
}
}
Related
Works the same as mqMix [external]
Used By
@mixin simple-grid()
@mixin mqMax() [deprecated]
DEPRECATED:
mixin to be deprecated in sinister 0.6.73 and replaced my mixin mq-max and max
Parameters
$max: 4096px (number | string)
Breakpoint will work up to $max. Accepts breakpoints from sin.config
Example
.sin{
@include mqMax(xxl){
display: block;
}
}
@media (max-width: 2560px) {
.sin {
display: block;
}
}
Used By
@mixin mq-max()
@mixin mq-max()
Parameters
$max: 4096px (number | string)
Breakpoint will work up to $max. Accepts breakpoints from sin.config
@link https://theokondak.github.io/Sinister/#grid-mixin-mqMax Works the same as mqMax
Example
.sin{
@include mq-max(xxl){
display: block;
}
}
@media (max-width: 2560px) {
.sin {
display: block;
}
}
Requires
@mixin mqMax()
@mixin max()
Parameters
$max: 4096px (number | string)
Breakpoint will work up to $max. Accepts breakpoints from sin.config
Example
.sin{
@include max(xxl){
display: block;
}
}
@media (max-width: 2560px) {
.sin {
display: block;
}
}
Related
Works the same as mqMax [external]
Requires
@mixin mqMax()
@mixin simple-grid()
Create a simple css grid with a fixed number of columns.
The simple-grid
mixin works in a similar way with the flex
and spacing
mixins.
It takes an arglist
of arguements that can be either a string or a list.
{string} $debug
- If'debug'
string is passed as an arguement, you will get a debug log for the inputed parameters. It is using@debug
so this might not work for all workflows.{string} $element-type [*]
- Optionaly select a direct child element. By default'*'
selector is chosen.{arg} $template-columns [12]
- Optionaly you can set a different number of columns for a custom grid. This might have some wild effects on the behavior of the mixin, so use only in advanced cases.
Parameters
$-: (arglist)
An arguement list that contains strings and lists.
Examples
.grid-example{
@include simple-grid(debug, '.grid-item',(2), (xs, 4), (md, 6));
}
.grid-example {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(12, 1fr);
}
.grid-example > .grid-item {
grid-column: span 6;
}
@media (min-width: 576px) {
.grid-example {
grid-template-columns: repeat(12, 1fr);
}
.grid-example > .grid-item {
grid-column: span 3;
}
}
@media (min-width: 1200px) {
.grid-example {
grid-template-columns: repeat(12, 1fr);
}
.grid-example > .grid-item {
grid-column: span 2;
}
}
.grid-example{
@include simple-grid((1),(xs, 2),(sm, 4));
}
.grid-example {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(12, 1fr);
}
.grid-example > * {
grid-column: span 12;
}
@media (min-width: 576px) {
.grid-example {
grid-template-columns: repeat(12, 1fr);
}
.grid-example > * {
grid-column: span 6;
}
}
@media (min-width: 768px) {
.grid-example {
grid-template-columns: repeat(12, 1fr);
}
.grid-example > * {
grid-column: span 3;
}
}
Requires
@mixin min()
@function type() [private]
@function contains() [private]
@function get() [private]
To-do List
-
- Add help when no arguements passed, more testing