estyle

estyle

SCSS responsive design pattern

---

DEMO

---

install

npm install estyle

Glossary

• SCSS
  • Spacing
    • row-space
    • col-space
    • tile
  • Responsive Design
    • Mobile First
    • Desktop First
  • children

SCSS

Add link to file:

@import "~estyle/index.scss";

Spacing

row-space

Adds spacing between children rows

.container {
  @include row-space(10px);
}

col-space

Adds spacing between children columns

.container {
  @include col-space(10px);
}

tile

Add spacing for container and child tiles

.container {
  @include tile(10px);
}

Responsive Design

Breaskpoints - the screen width values which usually defines different devices.

Breaskpoint	Width	Mobile First CSS	Desktop First CSS
sm	640px	@media (min-width: 640px) { ... }	@media (max-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }	@media (max-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }	@media (max-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }	@media (max-width: 1280px) { ... }
2xl	640px	@media (min-width: 1536px) { ... }	@media (max-width: 1536px) { ... }

Mobile First

Mobile first breakpoint system. Means that by default styles applyied to all screens, but when you set styles for mf-lg they will be applied to lg(1024px) screens or above.

SCSS mixing	Minimum width	CSS
mf-sm	640px	@media (min-width: 640px) { ... }
mf-md	768px	@media (min-width: 768px) { ... }
mf-lg	1024px	@media (min-width: 1024px) { ... }
mf-xl	1280px	@media (min-width: 1280px) { ... }
mf-2xl	1536px	@media (min-width: 1536px) { ... }
mf($value)	custom	@media (min-width: $value) { ... }

Example:

.container {
  font-size: 12px;

  // when scrren is `lg` or more
  @include mf-lg {
    font-size: 16px;
  }

  // when scrren is `1500px` or more
  @include mf(1500px) {
    font-size: 16px;
  }
}

Desktop First

Desktop first breakpoint system. Means that by default styles applyied to all screens, but when you set styles for df-lg they will be applied to lg(1024px) screens or below.

SCSS mixing	Maximum width	CSS
df-sm	640px	@media (max-width: 640px) { ... }
df-md	768px	@media (max-width: 768px) { ... }
df-lg	1024px	@media (max-width: 1024px) { ... }
df-xl	1280px	@media (max-width: 1280px) { ... }
df-2xl	1536px	@media (max-width: 1536px) { ... }
df($value)	custom	@media (max-width: $value) { ... }

Example:

.container {
  font-size: 12px;

  // when scrren is `lg` or less
  @include df-lg {
    font-size: 16px;
  }

  // when scrren is `1500px` or less
  @include df(1500px) {
    font-size: 16px;
  }
}

children

Adds styles to all children tags

.container {
  @include children {
    color: white;
    background-color: black;
  }
}