estyle
Common style patterns for SASS
install
npm install estyle
Glossary
SCSS
Include 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);
}
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;
@include mf-lg {
font-size: 16px;
}
@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) { ... } |
.container {
font-size: 12px;
@include df-lg {
font-size: 16px;
}
@include df(1500px) {
font-size: 16px;
}
}
children
Adds styles to all children tags
.container {
@include children {
color: white;
background-color: black;
}
}