2.0.0 • Published 5 months ago
scss-layout v2.0.0
SCSS LAYOUTS
A SCSS lib to make easy the apply some syles using css classes.
Demo
Check the CHANGELOG for the latest changes.
- margin
- padding
- height
- width
- display flex
- elevation (box-shadow)
- material design color palette (background color and color)
Instalation
Download
Download file at dist/css/layout.min.css to get minify css file and add into html
Add npm module
- install npm module
npm install scss-layout --save
- get the scss from node_modules
@import 'node_modules/scss-layout/scss/core'
Usage Elevation
There are 4 levels (1 - 4) to have level 2 of elevation
class="elevation-2"
Usage (Margin) in px
to margin-top
class="mt-4"
to margin-bottom
class="mb-4"
to both vertical margin
class="my-4"
to all margins
class="m-4"
Usage (Padding) in px
to padding-top
class="pt-4"
to padding-bottom
class="pb-4"
to both vertical padding
class="py-4"
to all paddings
class="p-4"
Usage (Height) in px
to height 100px or 100%
class="h-100"
Usage (Height) in %
to height 100%
class="h100"
Usage (Width) in px
to width 100px
class="w-100"
Usage (Width) in %
to width 100%
class="w100"
Usage (Width and Height) in px
to width and height 100px (0 to 500)
class="wh-100"
Usage (Width and Height) in %
to width and height 100% (0 to 100)
class="wh100"
Usage Display Flex
Flex Direction
class="fx-col"
class="fx-row"
Flex Gap
to space between elements 20px - 0 to 500
class="fx-gap-20"
Flex Width (%)
to height or width in % 0 to 100
class="fx-20"
Flex Align
class="fx-center-start"
class="fx-center-end"
class="fx-center-center"
class="fx-center-stretch"
class="fx-start-start"
class="fx-start-end"
class="fx-start-center"
class="fx-start-stretch"
class="fx-end-start"
class="fx-end-end"
class="fx-end-center"
class="fx-end-stretch"
class="fx-between-start"
class="fx-between-end"
class="fx-between-center"
class="fx-between-stretch"
class="fx-around-start"
class="fx-around-end"
class="fx-around-center"
class="fx-around-stretch"
class="fx-evenly-start"
class="fx-evenly-end"
class="fx-evenly-center"
class="fx-evenly-stretch"
Usage material design color palette
must import the scss file
- create a material palette (example)
$palette: ( 50: #e4e9ee, 100: #bbc9d4, 200: #8ea5b8, 300: #60809b, 400: #3e6585, 500: #1c4a70, 600: #194368, 700: #143a5d, 800: #005079, 900: #092241, A100: #79adff, A200: #468eff, A400: #136fff, A700: #0061f8, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #ffffff, A200: #ffffff, A400: #ffffff, A700: #ffffff, ), );
- Include the @mixin material-palette (should pass true if the palette is from 50 to 900 only)
@include material-palette($palette, 'primary-example');
- Get the color from palette
background-color: palette-color($palette); background-color: palette-color($palette, 500);
- Get the contrast color from palette
color: palette-color-contrast($palette); color: palette-color-contrast($palette, 500);
- Using color primary from $palette (.mat-color)
class="mat-color-primary-example" class="mat-color-primary-example-A200"
Usage mixins
flex
@include flex('column') // to column
@include flex() // to row
flex-gap
@include flex-row-gap(20) // to row
@include flex-col-gap(20) // to column
flex-aligh
@include flex-align('center-center')
check options on Flex Align
Todos
- Write MORE styles
Tools
- IDE: Vs Code
Extensions:
Name | Link |
---|---|
Live Sass Compiler | |
Live Server |
License
MIT