Skip to content

Latest commit

 

History

History
93 lines (69 loc) · 2.1 KB

responsive.md

File metadata and controls

93 lines (69 loc) · 2.1 KB

_responsive.scss

File includes mixins which helps to make responsive grid columns, embed objects and create responsible properties

List of content:

Mixin responsive-prop

Description

Mixin which helps create css properties for each breakpoints

Parameters

  • $prop - css property (required)
  • $breakpoints - object with specified values for each needed screen resolution (required)

Usage:

Assigned top margin for different screen resolutions

.exampleClass {
  @include responsive-prop(margin-top, (xxl: 160px, xl: 160px, lg: 130px, md: 100px, sm: 70px, xs: 50px));
  
  @include responsive-prop(margin-top, (
    down xs: 12,
    sm: 10,
    between md lg: 3,
    up xl: 2
  ));
}

Mixin responsive-embed

Description

Mixin which helps make embed objects responsible

Parameters

  • $x - value of horizontal aspect ratio (default 16)
  • $y - value of vertical aspect ratio (default 9)
  • $selector - value of media selector (default > :first-child)

Usage:

Assigned media with aspect ratio 4:3

.exampleResponsiveMediaClass {
  @include responsive-embed(4,3);
}

Mixin responsive-col

Description

Mixin which helps handling with size of columns on different screen resolutions

Parameters

  • $breakpoints - object with specified values for each needed screen resolution (required)

Usage:

Assigned size of columns for different screen resolutions.

.exampleCol {
   @include responsive-col((
     down sm: 12,
     between md lg: 3,
     up xl: 2
   ));
}

Mixin responsive-col helps to create columns for different breakpoints in simpler way in contrast to the way implemented below

  .exampleClass {
    @include media-breakpoint-up(xl) {
      @include col(2);
    }
  
    @include media-breakpoint-between(md, lg) {
      @include col(3);
    }
  
    @include media-breakpoint-down(sm) {
      @include col(12);
    }
  }