estyle

SCSS responsive design pattern

---

DEMO

---

install

npm install estyle

Glossary

• SCSS
  • Responsive Design
    • Mobile First
    • Desktop First
  • children
  • scrollbar

SCSS

Add link to file:

@import "~estyle/index.scss";

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;
  }
}

scrollbar

Adds styles scrollbar

.container {
  @include scrollbar(
    // scrollbar width
    8px, 
    // track and thumb border radius
    3px, 
    // track color
    #F2F2F2, 
    // thumb color
    #E5E5E5,     
    // hover thumb color
    #D8D8D8
    );
}