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.

Must define your style before starting working on your project.

Must check node_modules/sassay/scss/absracts/_variables.scss

$primary: #fff;
// More variables

@import '../../node_modules/sassay/scss/sassay.base.scss';

Breakpoints

• xs: Extra small screens (0px and above)
• sm: Small screens (576px and above)
• md: Medium screens (768px and above)
• lg: Large screens (992px and above)
• xl: Extra large screens (1200px and above)
• xxl: Extra extra large screens (1400px and above)

Spacing

Padding Classes

• p-[size]: Padding in all direction
• px-[size]: Horizontal padding
• py-[size]: Vertical padding
• pl-[size]: Left padding
• pr-[size]: Right padding
• pt-[size]: Top padding
• pb-[size]: Bottom padding
• px-[size]: Adds horizontal padding of the specified size.
• py-[size]: Adds vertical padding of the specified size.

Sizes available: 0, xs, s, m, l, xl, xxl,a- auto

<p class="p-xs">Jha2</p>

same as

padding: 0 0.25;
/* 0.25 because the $base-padding = $base-size = 1rem and $multi-xs = 0.25;

Examples:

<div class="p-m">This div has medium padding on all sides.</div>
<div class="px-sm">This div has small horizontal padding.</div>
<div class="py-xl">This div has extra large vertical padding.</div>

Margin Classes

• m-[size]: Margin in all direction
• mx-[size]: Horizontal margin
• my-[size]: Vertical margin
• ml-[size]: Left margin
• mr-[size]: Right margin
• mt-[size]: Top margin
• mb-[size]: Bottom margin
• mx-[size]: Adds horizontal margin of the specified size.
• my-[size]: Adds vertical margin of the specified size.

Sizes available: 0, xs, s, m, l, xl, xxl,a- auto

Examples:

<div class="m-lg">This div has large margin on all sides.</div>
<div class="mx-xs">This div has extra small horizontal margin.</div>
<div class="my-xxl">This div has extra extra large vertical margin.</div>

Responsive Classes

To ensure a consistent experience across various screen sizes, the spacing classes are responsive and adapt to different breakpoints.

• p-[size]-[breakpoint]
• m-[size]-[breakpoint]

Example:

<!-- On small screens (576px and above), this div has medium padding -->
<div class="p-m-sm">Responsive padding on small screens.</div>

<div class="p-xs p-sm-md p-m-lg">
  Responsive padding for different breakpoints.
</div>
<!--
(0 and above) this div has extra small padding
(768px and above) this div has small padding
(992px and above) this div has medium padding
 -->

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>