@get-sinister/sass 0.7.1

@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

scss Systax example 
.sin{
  @include grid-template(('', 1fr), ('xs', 1fr), ('md', (1fr 1fr), (1fr 1fr)), ('lg', 1fr 1fr 1fr));
}
css compiled 
.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

scss Accepting a breakpoint from sin.config 
.sin{
 @include mq(xs, xxl){
   display: block;
  }
}
css compiled 
@media (min-width: 576px) and (max-width: 2560px) {
  .sin {
    display: block;
  }
}
scss Accepting a breakpoint from sin.config as well as some custom number 
.sin{
    @include mq(xs, 1920px){
      display: block;
    }
}
css compiled 
@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

scss Accepting a breakpoint from sin.config 
.sin{
  @include min(xs){
    display: block;
  }
}
css compiled 
@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

scss Accepting a breakpoint from sin.config 
.sin{
  @include min(xs){
    display: block;
  }
}
css compiled 
@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

scss Accepting a breakpoint from sin.config 
  .sin{
@include mqMax(xxl){
  display: block;
    }
}
css compiled 
@media (max-width: 2560px) {
  .sin {
    display: block;
  }
}

Requires

@function contains() [private]

@function get() [private]

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

scss Accepting a breakpoint from sin.config 
.sin{
  @include mq-max(xxl){
    display: block;
  }
}
css compiled 
@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

scss Accepting a breakpoint from sin.config 
.sin{
  @include max(xxl){
    display: block;
  }
}
css compiled 
@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

scss A responsive layout with 2 columns in smaller screens, 4 in tablet screens, and 6 at small laptop and higher screens. 
.grid-example{
  @include simple-grid(debug, '.grid-item',(2), (xs, 4), (md, 6));
}
css compiled 
.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;
  }
}
scss A responsive layout with 1 column in smaller screens, 2 in tablet screens, and 4 at larger tablet and higher screens. 
.grid-example{
  @include simple-grid((1),(xs, 2),(sm, 4));
}
css compiled 
.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