{"id":23901493,"url":"https://github.com/kumarayushkumar/sassay","last_synced_at":"2026-04-21T09:31:16.086Z","repository":{"id":204073402,"uuid":"620401771","full_name":"kumarayushkumar/sassay","owner":"kumarayushkumar","description":"Simple and flexible Sass framework","archived":false,"fork":false,"pushed_at":"2023-12-04T11:38:00.000Z","size":198,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T10:16:46.800Z","etag":null,"topics":["gulp","sass"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kumarayushkumar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-28T15:56:58.000Z","updated_at":"2024-01-03T11:01:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"8630e8a6-c941-4d8c-9020-c182df68e0c4","html_url":"https://github.com/kumarayushkumar/sassay","commit_stats":{"total_commits":31,"total_committers":1,"mean_commits":31.0,"dds":0.0,"last_synced_commit":"7cd76ceff2a0f8ba0708db758d52dcf36f606c75"},"previous_names":["kumarayushkumar/sasslib","kumarayushkumar/sassay"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarayushkumar%2Fsassay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarayushkumar%2Fsassay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarayushkumar%2Fsassay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarayushkumar%2Fsassay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kumarayushkumar","download_url":"https://codeload.github.com/kumarayushkumar/sassay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240298489,"owners_count":19779283,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","sass"],"created_at":"2025-01-04T21:20:50.104Z","updated_at":"2026-04-21T09:31:15.645Z","avatar_url":"https://github.com/kumarayushkumar.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sassay\n\nSimple and flexible Sass framework.\n\nImport it and modify it to your needs.\n\n## Usage\n\nImport sassay in your main file\n\n```scss\n@import '../../node_modules/sassay/scss/sassay.base.scss';\n```\n\n## Custom style\n\nWe recommend you creating a \\_custom.scss file where you can overwrite the variables and import sassay.\n\nMust define your style before starting working on your project.\n\n**Must check node_modules/sassay/scss/absracts/\\_variables.scss**\n\n```scss\n$primary: #fff;\n// More variables\n\n@import '../../node_modules/sassay/scss/sassay.base.scss';\n```\n\n## **Breakpoints**\n\n- **`xs`**: Extra small screens (0px and above)\n- **`sm`**: Small screens (576px and above)\n- **`md`**: Medium screens (768px and above)\n- **`lg`**: Large screens (992px and above)\n- **`xl`**: Extra large screens (1200px and above)\n- **`xxl`**: Extra extra large screens (1400px and above)\n\n## Spacing\n\n### **Padding Classes**\n\n- **`p-[size]`**: Padding in all direction\n- **`px-[size]`**: Horizontal padding\n- **`py-[size]`**: Vertical padding\n- **`pl-[size]`**: Left padding\n- **`pr-[size]`**: Right padding\n- **`pt-[size]`**: Top padding\n- **`pb-[size]`**: Bottom padding\n- **`px-[size]`**: Adds horizontal padding of the specified size.\n- **`py-[size]`**: Adds vertical padding of the specified size.\n\nSizes available: **`0`**, **`xs`**, **`s`**, **`m`**, **`l`**, **`xl`**, **`xxl`**,**`a`- auto**\n\n```html\n\u003cp class=\"p-xs\"\u003eJha2\u003c/p\u003e\n```\n\nsame as\n\n```css\npadding: 0 0.25;\n/* 0.25 because the $base-padding = $base-size = 1rem and $multi-xs = 0.25;\n```\n\n### Examples:\n\n```html\n\u003cdiv class=\"p-m\"\u003eThis div has medium padding on all sides.\u003c/div\u003e\n\u003cdiv class=\"px-sm\"\u003eThis div has small horizontal padding.\u003c/div\u003e\n\u003cdiv class=\"py-xl\"\u003eThis div has extra large vertical padding.\u003c/div\u003e\n```\n\n### **Margin Classes**\n\n- **`m-[size]`**: Margin in all direction\n- **`mx-[size]`**: Horizontal margin\n- **`my-[size]`**: Vertical margin\n- **`ml-[size]`**: Left margin\n- **`mr-[size]`**: Right margin\n- **`mt-[size]`**: Top margin\n- **`mb-[size]`**: Bottom margin\n- **`mx-[size]`**: Adds horizontal margin of the specified size.\n- **`my-[size]`**: Adds vertical margin of the specified size.\n\nSizes available: **`0`**, **`xs`**, **`s`**, **`m`**, **`l`**, **`xl`**, **`xxl`**,**`a`- auto**\n\n### Examples:\n\n```html\n\u003cdiv class=\"m-lg\"\u003eThis div has large margin on all sides.\u003c/div\u003e\n\u003cdiv class=\"mx-xs\"\u003eThis div has extra small horizontal margin.\u003c/div\u003e\n\u003cdiv class=\"my-xxl\"\u003eThis div has extra extra large vertical margin.\u003c/div\u003e\n```\n\n## **Responsive Classes**\n\nTo ensure a consistent experience across various screen sizes, the spacing classes are responsive and adapt to different breakpoints.\n\n- **`p-[size]-[breakpoint]`**\n- **`m-[size]-[breakpoint]`**\n\n### **Example:**\n\n```html\n\u003c!-- On small screens (576px and above), this div has medium padding --\u003e\n\u003cdiv class=\"p-m-sm\"\u003eResponsive padding on small screens.\u003c/div\u003e\n\n\u003cdiv class=\"p-xs p-sm-md p-m-lg\"\u003e\n  Responsive padding for different breakpoints.\n\u003c/div\u003e\n\u003c!--\n(0 and above) this div has extra small padding\n(768px and above) this div has small padding\n(992px and above) this div has medium padding\n --\u003e\n```\n\n## **Typography**\n\n### **Font Sizes**\n\n- **`.fs-xs`**: Extra-small font size\n- **`.fs-s`**: Small font size\n- **`.fs-m`**: Medium font size\n- **`.fs-l`**: Large font size\n- **`.fs-xl`**: Extra-large font size\n- **`.fs-xxl`**: Larger than extra-large font size\n- **`.fs-xxxl`**: Super font size\n\n### **Font Weights**\n\n- **`.fw-n`**: Normal font weight\n- **`.fw-b`**: Bold font weight\n- **`.fw-l`**: Lighter font weight\n- **`.fw-bd`**: Bolder font weight\n- **`.fw-1` to `.fw-9`**: Numeric font weights from 100 to 900\n\n## Text Alignment\n\n- **`.ta-l`**: Align text to the left\n- **`.ta-c`**: Align text to the centre\n- **`.ta-r`**: Align text to the right\n- **`.ta-j`**: Justify text\n\n## **Display**\n\n### **Display Property Options**\n\n- **`.d-n`**: Display none\n- **`.d-b`**: Display block\n- **`.d-ib`**: Display inline-block\n- **`.d-i`**: Display inline\n- **`.d-f`**: Display flex\n- **`.d-if`**: Display inline-flex\n- **`.d-g`**: Display grid\n- **`.d-ig`**: Display inline-grid\n\n### **Flexbox Container Direction**\n\n- **`.f-r`**: Flex container with a row direction\n- **`.f-rr`**: Flex container with a row-reverse direction\n- **`.f-c`**: Flex container with a column direction\n- **`.f-cr`**: Flex container with a column-reverse direction\n\n```html\n\u003cdiv class=\"d-f f-r\"\u003eThis div has flex display with a row direction.\u003c/div\u003e\n\u003cspan class=\"d-ib\"\u003eThis span has inline-block display.\u003c/span\u003e\n\u003csection class=\"d-g\"\u003eThis section has grid display.\u003c/section\u003e\n```\n\n### **Flexbox and Grid Alignment**\n\n- **`.jc-start`**: Justify content start\n- **`.ai-start`**: Align items start\n- **`.ac-start`**: Align content start\n- **`.jc-center`**: Justify content centre\n- **`.ai-center`**: Align items centre\n- **`.ac-center`**: Align content centre\n- **`.jc-space-between`**: Justify content space between\n- **`.ai-space-between`**: Align items space between\n- **`.ac-space-between`**: Align content space between\n- **`.jc-space-around`**: Justify content space around\n- **`.ai-space-around`**: Align items space around\n- **`.ac-space-around`**: Align content space around\n- **`.jc-space-evenly`**: Justify content space evenly\n- **`.ai-space-evenly`**: Align items space evenly\n- **`.ac-space-evenly`**: Align content space evenly\n- **`.jc-flex-start`**: Justify content flex-start\n- **`.ai-flex-start`**: Align items flex-start\n- **`.ac-flex-start`**: Align content flex-start\n- **`.jc-flex-end`**: Justify content flex-end\n- **`.ai-flex-end`**: Align items flex-end\n- **`.ac-flex-end`**: Align content flex-end\n\n```html\n\u003cdiv class=\"d-f jc-center ai-flex-end\"\u003e\n  This div has flex display, centred content, and items aligned to the end.\n\u003c/div\u003e\n\u003csection class=\"d-g jc-space-around\"\u003e\n  This section has grid display with space-around justification.\n\u003c/section\u003e\n```\n\n## Border Radius\n\n- **`.bdr-rd-0`**: No border-radius applied.\n- **`.bdr-rd-xs`**: Extra-small border-radius.\n- **`.bdr-rd-s`**: Small border-radius.\n- **`.bdr-rd-m`**: Medium border-radius.\n- **`.bdr-rd-l`**: Large border-radius.\n- **`.bdr-rd-xl`**: Extra-large border-radius.\n- **`.bdr-rd-xxl`**: Border-radius of 50%, creating a circular shape.\n\n```html\n\u003cdiv class=\"bdr-rd-s\"\u003eThis element has a small border-radius.\u003c/div\u003e\n```\n\n## Layout\n\n### **Container**\n\nThe container class sets the width, maximum width, margin, and padding for the main content container.\n\n- **`.container`**: Container with a width of 80%, maximum width of 1400px, and 1rem padding in horizontal direction.\n\n```html\n\u003cdiv class=\"container\"\u003e\u003c!-- Your content goes here --\u003e\u003c/div\u003e\n```\n\n- **`.container-fluid`**: Full-width container with 1rem padding in horizontal direction.\n\n```html\n\u003cdiv class=\"container-fluid\"\u003e\u003c!-- Your full-width content goes here --\u003e\u003c/div\u003e\n```\n\n### **Rows and Columns**\n\nRows and columns are used to create flexible and responsive layouts.\n\n- **`.row`**: Flex container with a row wrap, used to create rows of columns.\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-6\"\u003eColumn 1\u003c/div\u003e\n  \u003cdiv class=\"col-6\"\u003eColumn 2\u003c/div\u003e\n\u003c/div\u003e\n```\n\n- **Column Classes**: Columns are based on a 12-column grid system. Use these classes to define the width of your columns.\n\n```html\n\u003cdiv class=\"col-6\"\u003eThis column takes up half the width\u003c/div\u003e\n```\n\n### **Gaps**\n\nControl the spacing between elements using gap classes.\n\n- **`.gap-0`**: No padding between elements.\n- **`.gap-1`**: 10px padding between elements.\n- **`.gap-2`**: 20px padding between elements.\n- **`.gap-3`**: 30px padding between elements.\n\n```html\n\u003cdiv class=\"row gap-2\"\u003e\n  \u003cdiv class=\"col-4\"\u003eColumn 1\u003c/div\u003e\n  \u003cdiv class=\"col-4\"\u003eColumn 2\u003c/div\u003e\n  \u003cdiv class=\"col-4\"\u003eColumn 3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### **Responsive Columns**\n\nDefine column widths based on screen size using responsive classes.\n\n- **`.col-[size]-[viewport]`**: Define column width for a specific viewport.\n\n```html\n\u003cdiv class=\"col-6-xs col-4-md col-3-lg\"\u003eResponsive Columns\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkumarayushkumar%2Fsassay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkumarayushkumar%2Fsassay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkumarayushkumar%2Fsassay/lists"}