Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kumarayushkumar/sassay
Simple and flexible Sass framework
https://github.com/kumarayushkumar/sassay
gulp sass
Last synced: 8 days ago
JSON representation
Simple and flexible Sass framework
- Host: GitHub
- URL: https://github.com/kumarayushkumar/sassay
- Owner: kumarayushkumar
- Created: 2023-03-28T15:56:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-04T11:38:00.000Z (about 1 year ago)
- Last Synced: 2025-01-03T23:42:10.223Z (8 days ago)
- Topics: gulp, sass
- Language: CSS
- Homepage:
- Size: 193 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sassay
Simple and flexible Sass framework.
Import it and modify it to your needs.
## Usage
Import sassay in your main file
```scss
@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**
```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**
```html
Jha2
```
same as
```css
padding: 0 0.25;
/* 0.25 because the $base-padding = $base-size = 1rem and $multi-xs = 0.25;
```
### Examples:
```html
This div has medium padding on all sides.
This div has small horizontal padding.
This div has extra large vertical padding.
```
### **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:
```html
This div has large margin on all sides.
This div has extra small horizontal margin.
This div has extra extra large vertical margin.
```
## **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:**
```html
Responsive padding on small screens.
Responsive padding for different breakpoints.
```
## **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
```html
This div has flex display with a row direction.
This span has inline-block display.
This section has grid display.
```
### **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
```html
This div has flex display, centred content, and items aligned to the end.
This section has grid display with space-around justification.
```
## 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.
```html
This element has a small border-radius.
```
## 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.
```html
```
- **`.container-fluid`**: Full-width container with 1rem padding in horizontal direction.
```html
```
### **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.
```html
Column 1
Column 2
```
- **Column Classes**: Columns are based on a 12-column grid system. Use these classes to define the width of your columns.
```html
This column takes up half the width
```
### **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.
```html
Column 1
Column 2
Column 3
```
### **Responsive Columns**
Define column widths based on screen size using responsive classes.
- **`.col-[size]-[viewport]`**: Define column width for a specific viewport.
```html
Responsive Columns
```