Snippets Collections
/* Mixin

–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* 

​

/* Media Queries */

@mixin breakpoint($size) {

  @if $size == small {

    @media screen and (max-width: 40em) {

      @content;

    }

  } @else if $size == medium {

    @media screen and (min-width: 40em) and (max-width: 60em) {

      @content;

    }

  } @else if $size == large {

    @media screen and (min-width: 60em) {

      @content;

    }

  }

}
/*

||||||||||||||||

|||||GRIDER|||||

||||||||||||||||

@github https://github.com/codeforms/Grider

*/

​

/******************** 

ENABLE / DISABLE FEATURES ********************/

$equal-feature: true;

$offset-feature: true;

​

/******************** 

BASIC ********************/

$grid: 12;

$gutter: 6px;

​

/******************** 

NAMING ********************/

$row: "row";
$columns: 1 !default;
2
$gap: 1rem !default;

$enable-cssgrid: true !default;

$enable-offset-grid: false !default;

// Grid breakpoints

//

// Define the maximum dimensions at which your layout will change,

// adapting to different screen sizes, for use in media queries.

$breakpoints: (

  xs: 0px,

  sm: 480px,

  md: 960px,

  lg: 1280px,

  xl: 1440px

) !default;

​

// Grid widths

$grid-widths: (

  sm: 640px,

  md: 1024px,
// variables

$size-container: .333rem !default;
3
$col-padding: 0.37rem !default;

$cols:  !default;
5
$gutter-x: $col-padding;

$gutter-y: 0;
7
​

// mediaqueries
9
​

// breakpoint del sistema de columna

$mq: (
12
  xs: 0,

  sm: 576px,

  md: 768px,

  lg: 992px,

  xl: 10px,

  xxl: 1400px

)!default;

​
20
$sizes: 0, 576px, 768px, 992px, 1200px, 1400px;

​

@mixin make-container{
star

Sat Mar 04 2023 18:37:41 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/vYaEbYp

#scss #grid_system
star

Sat Mar 04 2023 18:34:32 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/Expgyma

#scss #grid #grid_system
star

Sat Mar 04 2023 18:26:21 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/jOpgXLL

#grid #scss #grid_system
star

Sat Mar 04 2023 18:23:26 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/dyzzqGL

#scss #flexbox #grid_system

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension