1.4.0 • Published 6 months ago
estyle v1.4.0
estyle
SCSS responsive design pattern
install
npm install estyleGlossary
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
);
}