1.0.1 • Published 2 years ago
@uxland/style-utilities v1.0.1
UXL Style Utilities
Installation
npm i @uxland/style-utilities
Usage
Add import statement to SCSS style file
Example:
@import "@uxland/style-utilities/flex-layout-styles"
@import "@uxland/style-utilities/units-styles"
@import "@uxland/style-utilities/mediaqueries-styles"
Available style-utilities
files:
flex-layout-styles
: Flex layout
units-styles
: Custom UXL units
mediaqueries-styles
: Custom UXL Media queries
UXL Media Queries
SASS Variables
The following custom properties and mixins are available for styling:
Variable | Description | Default |
---|---|---|
$uxl-mediaqueries-phone | Max Width Breakpoint Mobile phone | 599px |
$uxl-mediaqueries-tablet | Min Width Breakpoint Tablet | 600px |
$uxl-mediaqueries-tablet-landscape | Min Width Breakpoint Tablet landscape view | 900px |
$uxl-mediaqueries-desktop | Min Width Breakpoint Desktop view | 1200px |
$uxl-mediaqueries-desktop-hd | Min Width Breakpoint Desktop HD view | 1800px |
SASS Mixins
The following custom properties and mixins are available for styling:
Mixin Name | Description | Use |
---|---|---|
phone | Use for Phone styles | @include phone {...} |
tablet | Use from Tablet styles | @include tablet {...} |
tablet-landscape | Use from Tablet Landscape styles | @include tablet-landscape {...} |
desktop | Use from Desktop styles | @include desktop {...} |
desktop-hd | Use from Desktop HD styles | @include desktop-hd {...} |
In a SCSS file
div {
@include phone {
background-color: red;
...
}
@include tablet {
background-color: blue;
...
}
@include tablet-landscape {
background-color: grey;
...
}
@include desktop {
background-color: orange;
...
}
@include desktop-hd {
background-color: green;
...
}
}
1.0.1
2 years ago
1.0.1-alpha.2
2 years ago
1.0.1-alpha.3
2 years ago
1.0.1-alpha.1
3 years ago
1.0.1-alpha.0
3 years ago
1.0.0
3 years ago
1.0.0-alpha.8
3 years ago
1.0.0-alpha.7
4 years ago
1.0.0-alpha.6
4 years ago
1.0.0-alpha.5
4 years ago
1.0.0-alpha.4
4 years ago
1.0.0-alpha.3
4 years ago
1.0.0-alpha.2
4 years ago
1.0.0-alpha.1
4 years ago
1.0.0-alpha.0
4 years ago