sassay
v1.2.0
Published
Simple and flexible Sass framework
Downloads
46
Maintainers
Readme
Sassay
Simple and flexible Sass framework.
Import it and modify it to your needs.
Usage
Import sassay in your main file
@import '../../node_modules/sassay/scss/sassay.base.scss';
Custom style
We recommend you creating a _custom.scss file where you can overwrite the variables and import sassay.
Check sassay/scss/absracts/_variables.scss
$primary: #fff;
// More variables
@import '../../node_modules/sassay/scss/sassay.base.scss';
Spacing
p-[size]
: Padding in all directionpx-[size]
: Horizontal paddingpy-[size]
: Vertical paddingpl-[size]
: Left paddingpr-[size]
: Right paddingpt-[size]
: Top paddingpb-[size]
: Bottom paddingm-[size]
: Margin in all directionmx-[size]
: Horizontal marginmy-[size]
: Vertical marginml-[size]
: Left marginmr-[size]
: Right marginmt-[size]
: Top marginmb-[size]
: Bottom margin
Sizes available: 0
, xs
, s
, m
, l
, xl
, xxl
.
<p class="p-xs">Jha2</p>
padding: 0 0.25;
/* 0.25 because the $base-padding = $base-size = 1rem and $multi-xs = 0.25;
Typography
Font Sizes
.fs-xs
: Extra-small font size.fs-s
: Small font size.fs-m
: Medium font size.fs-l
: Large font size.fs-xl
: Extra-large font size.fs-xxl
: Larger than extra-large font size.fs-xxxl
: Super font size
Font Weights
.fw-n
: Normal font weight.fw-b
: Bold font weight.fw-l
: Lighter font weight.fw-bd
: Bolder font weight.fw-1
to.fw-9
: Numeric font weights from 100 to 900
Text Alignment
.ta-l
: Align text to the left.ta-c
: Align text to the centre.ta-r
: Align text to the right.ta-j
: Justify text
Display
Display Property Options
.d-n
: Display none.d-b
: Display block.d-ib
: Display inline-block.d-i
: Display inline.d-f
: Display flex.d-if
: Display inline-flex.d-g
: Display grid.d-ig
: Display inline-grid
Flexbox Container Direction
.f-r
: Flex container with a row direction.f-rr
: Flex container with a row-reverse direction.f-c
: Flex container with a column direction.f-cr
: Flex container with a column-reverse direction
<div class="d-f f-r">This div has flex display with a row direction.</div>
<span class="d-ib">This span has inline-block display.</span>
<section class="d-g">This section has grid display.</section>
Flexbox and Grid Alignment
.jc-start
: Justify content start.ai-start
: Align items start.ac-start
: Align content start.jc-center
: Justify content centre.ai-center
: Align items centre.ac-center
: Align content centre.jc-space-between
: Justify content space between.ai-space-between
: Align items space between.ac-space-between
: Align content space between.jc-space-around
: Justify content space around.ai-space-around
: Align items space around.ac-space-around
: Align content space around.jc-space-evenly
: Justify content space evenly.ai-space-evenly
: Align items space evenly.ac-space-evenly
: Align content space evenly.jc-flex-start
: Justify content flex-start.ai-flex-start
: Align items flex-start.ac-flex-start
: Align content flex-start.jc-flex-end
: Justify content flex-end.ai-flex-end
: Align items flex-end.ac-flex-end
: Align content flex-end
<div class="d-f jc-center ai-flex-end">
This div has flex display, centred content, and items aligned to the end.
</div>
<section class="d-g jc-space-around">
This section has grid display with space-around justification.
</section>
Border Radius
.bdr-rd-0
: No border-radius applied..bdr-rd-xs
: Extra-small border-radius..bdr-rd-s
: Small border-radius..bdr-rd-m
: Medium border-radius..bdr-rd-l
: Large border-radius..bdr-rd-xl
: Extra-large border-radius..bdr-rd-xxl
: Border-radius of 50%, creating a circular shape.
<div class="bdr-rd-s">This element has a small border-radius.</div>
Layout
Container
The container class sets the width, maximum width, margin, and padding for the main content container.
.container
: Container with a width of 80%, maximum width of 1400px, and 1rem padding in horizontal direction.
<div class="container"> <!-- Your content goes here --></div>
.container-fluid
: Full-width container with 1rem padding in horizontal direction.
<div class="container-fluid"> <!-- Your full-width content goes here --></div>
Rows and Columns
Rows and columns are used to create flexible and responsive layouts.
.row
: Flex container with a row wrap, used to create rows of columns.
<div class="row">
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
</div>
- Column Classes: Columns are based on a 12-column grid system. Use these classes to define the width of your columns.
<div class="col-6">This column takes up half the width</div>
Gaps
Control the spacing between elements using gap classes.
.gap-0
: No padding between elements..gap-1
: 10px padding between elements..gap-2
: 20px padding between elements..gap-3
: 30px padding between elements.
<div class="row gap-2">
<div class="col-4">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-4">Column 3</div>
</div>
Responsive Columns
Define column widths based on screen size using responsive classes.
.col-[size]-[viewport]
: Define column width for a specific viewport.
<div class="col-6-xs col-4-md col-3-lg">Responsive Columns</div>