{"id":24489793,"url":"https://github.com/zeixcom/ueli","last_synced_at":"2025-10-03T18:05:45.925Z","repository":{"id":37454630,"uuid":"402048178","full_name":"zeixcom/ueli","owner":"zeixcom","description":"(S)CSS Framework by Zeix","archived":false,"fork":false,"pushed_at":"2023-11-14T14:06:04.000Z","size":2209,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2024-03-27T10:55:28.044Z","etag":null,"topics":["css","framework","responsive","scss"],"latest_commit_sha":null,"homepage":"https://zeixcom.github.io/ueli/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeixcom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-09-01T12:13:10.000Z","updated_at":"2022-05-17T14:07:32.000Z","dependencies_parsed_at":"2022-08-19T12:21:20.900Z","dependency_job_id":"7d71865b-9474-410f-b6a4-058cf7b4c434","html_url":"https://github.com/zeixcom/ueli","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeixcom%2Fueli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeixcom%2Fueli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeixcom%2Fueli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeixcom%2Fueli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeixcom","download_url":"https://codeload.github.com/zeixcom/ueli/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234787012,"owners_count":18886446,"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":["css","framework","responsive","scss"],"created_at":"2025-01-21T17:15:55.938Z","updated_at":"2025-10-03T18:05:45.872Z","avatar_url":"https://github.com/zeixcom.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ueli\n\nCSS Framework from Zeix\n\n## Installation\n\n[npm](https://www.npmjs.com/package/@zeix/ueli): `npm i @zeix/ueli`\n\n## Sass\n\nImport ueli’s source files in your `main.scss`.\n\n```scss\n// main.scss\n\n// 1. Include functions first (allows usage of to-rem or get-color in settings)\n@import '../node_modules/@zeix/ueli/scss/01-tools/functions';\n\n// 2. Add token and variable overrides here\n\n// 3. Include remainder of required partials\n@import '../node_modules/@zeix/ueli/scss/00-settings/tokens';\n@import '../node_modules/@zeix/ueli/scss/00-settings/variables';\n@import '../node_modules/@zeix/ueli/scss/01-tools/mixins';\n\n// 4. Include any optional parts of ueli as needed\n@import '../node_modules/@zeix/ueli/scss/02-generic';\n@import '../node_modules/@zeix/ueli/scss/03-elements';\n@import '../node_modules/@zeix/ueli/scss/04-objects';\n@import '../node_modules/@zeix/ueli/scss/05-components';\n@import '../node_modules/@zeix/ueli/scss/06-utilities';\n\n// 5. Add your custom styles here\n```\n\n## Media Queries\n\nMedia Queries are handled by [Sass MQ](https://github.com/sass-mq/sass-mq).\n\n### Usage\n\n```scss\n// Load the sass module\n@use 'sass-mq' as *;\n\n// Include the media query mixin and pass a breakpoint key\n@include mq(md) {\n}\n```\n\nThe snippet above compiles to the following CSS:\n\n```css\n@media (min-width: 56.52em) {\n}\n```\n\n## NPM Scripts\n\n| Command            | Description                                |\n| :----------------- | :----------------------------------------- |\n| `npm run build`    | Build project in development mode          |\n| `npm run watch`    | Watch files and build in development mode  |\n| `npm run serve`    | Serve project in development mode          |\n| `npm run prod`     | Build project in production mode           |\n| `npm run lint`     | Run stylelint and fix errors               |\n| `npm run prettier` | Reformat files with prettier               |\n| `npm run sassdoc ` | Generate sassdoc files                     |\n| `npm run test `    | Run sass-true tests via jest               |\n| `npm run release`  | Run commands required for a release commit |\n\n## Folder Structure\n\nThe folder structure inside the scss folder is based on Harry Robert’s ITCSS.\n\n```\n├── 00-settings    # Variables\n├── 01-tools       # Functions and mixins\n├── 02-generic     # Normalization styles\n├── 03-elements    # Styles for bare HTML elements (h1, input, etc.)\n├── 04-objects     # Class-based selectors for undecorated patterns\n├── 05-components  # Specific UI components\n├── 06-utilities   # Helper classes\n```\n\n## Settings\n\nSettings are split into [tokens](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_tokens.scss) and [variables](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss).\n\n## Tools\n\nFunctions and mixins are annotated using sassdoc syntax. Please refer to the [sassdoc page](https://zeixcom.github.io/ueli/sassdoc) for their documentation.\n\n## Objects\n\n### Container\n\n```html\n\u003cdiv class=\"container\"\u003e\u003c/div\u003e\n```\n\nRelated variables: `$container`, [`$container-gutter`](https://zeixcom.github.io/ueli/sassdoc#global-variable-container-gutter)\n\n### Grid\n\nGrid classes are generated depending on the [`$grid-mode`](https://zeixcom.github.io/ueli/sassdoc#global-variable-grid-mode).\n\n#### CSS Grid (grid-mode: grid)\n\nRelated mixins: [`grid-row`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-grid-row), [`grid-column`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-grid-column), [`grid-column-start`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-grid-column-start)\n\n##### Basic\n\n```html\n\u003cdiv class=\"grid-row\"\u003e\n  \u003cdiv class=\"grid-col\"\u003eColumn A\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##### Responsive\n\n```html\n\u003cdiv class=\"grid-row\"\u003e\n  \u003cdiv class=\"grid-col grid-col-md-6 grid-col-xl-9\"\u003eColumn A\u003c/div\u003e\n  \u003cdiv class=\"grid-col grid-col-md-6 grid-col-xl-3\"\u003eColumn B\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##### Offset\n\n```html\n\u003cdiv class=\"grid-row\"\u003e\n  \u003cdiv class=\"grid-col grid-col-5\"\u003eColumn A\u003c/div\u003e\n  \u003cdiv class=\"grid-col grid-col-5 grid-col-start-8\"\u003eColumn B\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##### Nested\n\n```html\n\u003cdiv class=\"grid-row\"\u003e\n  \u003cdiv class=\"grid-col grid-col-md-8\"\u003e\n    \u003cdiv class=\"grid-row\"\u003e\n      \u003cdiv class=\"grid-col grid-col-md-6\"\u003eNested column A\u003c/div\u003e\n      \u003cdiv class=\"grid-col grid-col-md-6\"\u003eNested column B\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Flex Grid (grid-mode: flex)\n\nRelated mixins: [`flex-row`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-flex-row), [`flex-column`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-flex-column), [`flex-column-base`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-flex-column-base), [`flex-column-push`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-flex-column-push), [`flex-column-pull`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-flex-column-pull), [`flex-column-offset`](https://zeixcom.github.io/ueli/sassdoc#grid-mixin-flex-column-offset)\n\n##### Basic\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col\"\u003eColumn A\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##### Responsive\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col col-md-6 col-xl-9\"\u003eColumn A\u003c/div\u003e\n  \u003cdiv class=\"col col-md-6 col-xl-3\"\u003eColumn B\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##### Offset\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col col-5\"\u003eColumn A\u003c/div\u003e\n  \u003cdiv class=\"col col-5 col-offset-2\"\u003eColumn B\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##### Push / Pull\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col col-6 col-push-6\"\u003eFirst column in markup\u003c/div\u003e\n  \u003cdiv class=\"col col-6 col-pull-6\"\u003eSecond column in markup\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##### Nested\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col col-md-8\"\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"col col-md-6\"\u003eNested column A\u003c/div\u003e\n      \u003cdiv class=\"col col-md-6\"\u003eNested column B\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nRelated variables: [`$grid-mode`](https://zeixcom.github.io/ueli/sassdoc#global-variable-grid-mode), `$grid-columns`, [`$grid-gutter`](https://zeixcom.github.io/ueli/sassdoc#global-variable-grid-gutter)\n\n### Embed\n\n```html\n\u003cdiv class=\"embed-responsive\"\u003e\u003c/div\u003e\n```\n\nRelated token: `$ratios`\n\n### Formatted Text\n\n```html\n\u003cdiv class=\"formatted-text\"\u003e\u003c/div\u003e\n```\n\nRelated variables: `$formatted-text-selector`\n\n## Components\n\n### Button\n\n```html\n\u003cbutton type=\"button\" class=\"button\"\u003e\u003c/button\u003e\n```\n\n```html\n\u003ca class=\"button\" href=\"#\" role=\"button\"\u003e\u003c/a\u003e\n```\n\n```html\n\u003cbutton type=\"button\" class=\"button-link\"\u003e\u003c/button\u003e\n```\n\nRelated variables: See section \"Button Base\" and \"Button Variations\" in [\\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)\n\n### Input\n\n```html\n\u003cinput type=\"text\" class=\"form-control\" /\u003e\n```\n\n```html\n\u003ctextarea class=\"form-control\"\u003e\u003c/textarea\u003e\n```\n\nRelated variables: See section \"Input\" in [\\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)\n\n### Select\n\n```html\n\u003cselect class=\"select\"\u003e\n  \u003coption\u003eOption One\u003c/option\u003e\n  \u003coption\u003eOption Two\u003c/option\u003e\n  \u003coption\u003eOption Three\u003c/option\u003e\n\u003c/select\u003e\n```\n\nRelated variables: See section \"Select\" in [\\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)\n\n### Selection\n\n```html\n\u003cdiv class=\"radio\"\u003e\n  \u003cinput type=\"radio\" id=\"radio1\" name=\"radio\" /\u003e\n  \u003clabel for=\"radio1\"\u003eOption 1\u003c/label\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"radio\"\u003e\n  \u003cinput type=\"radio\" id=\"radio2\" name=\"radio\" /\u003e\n  \u003clabel for=\"radio2\"\u003eOption 2\u003c/label\u003e\n\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"checkbox\"\u003e\n  \u003cinput type=\"checkbox\" id=\"checkbox1\" name=\"checkbox\" /\u003e\n  \u003clabel for=\"checkbox1\"\u003eChoice A\u003c/label\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"checkbox\"\u003e\n  \u003cinput type=\"checkbox\" id=\"checkbox2\" name=\"checkbox\" /\u003e\n  \u003clabel for=\"checkbox2\"\u003eChoice B\u003c/label\u003e\n\u003c/div\u003e\n```\n\nRelated variables: See section \"Checkbox \u0026 Radio\" in [\\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)\n\n### List\n\n```html\n\u003col class=\"list list--ordered\"\u003e\n  \u003cli\u003eList Item 1\u003c/li\u003e\n  \u003cli\u003eList Item 2\u003c/li\u003e\n  \u003cli\u003e\n    List Item 3\n    \u003col class=\"list list--ordered\"\u003e\n      \u003cli\u003eNested List Item 1\u003c/li\u003e\n      \u003cli\u003eNested List Item 2\u003c/li\u003e\n      \u003cli\u003eNested List Item 3\u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/li\u003e\n\u003c/ol\u003e\n```\n\n```html\n\u003cul class=\"list list--unordered\"\u003e\n  \u003cli\u003eList Item 1\u003c/li\u003e\n  \u003cli\u003eList Item 2\u003c/li\u003e\n  \u003cli\u003e\n    List Item 3\n    \u003cul class=\"list list--unordered\"\u003e\n      \u003cli\u003eNested List Item 1\u003c/li\u003e\n      \u003cli\u003eNested List Item 2\u003c/li\u003e\n      \u003cli\u003eNested List Item 3\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nRelated variables: See section \"List\" in [\\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)\n\n## Utilities\n\n### Screenreader\n\n```html\n\u003cspan class=\"sr-only\"\u003e\u003c/span\u003e\n```\n\n```html\n\u003cspan class=\"sr-only-focusable\"\u003e\u003c/span\u003e\n```\n\n### Display\n\n```html\n\u003cdiv class=\"visible-xs\"\u003eVisible only on the xs breakpoint\u003c/div\u003e\n\u003cdiv class=\"visible-sm\"\u003eVisible only on the sm breakpoint\u003c/div\u003e\n\u003cdiv class=\"visible-md\"\u003eVisible only on the md breakpoint\u003c/div\u003e\n\u003cdiv class=\"visible-lg\"\u003eVisible only on the lg breakpoint\u003c/div\u003e\n\u003cdiv class=\"visible-xl\"\u003eVisible only on the xl breakpoint\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"visible-sm-up\"\u003eVisible from the sm breakpoint\u003c/div\u003e\n\u003cdiv class=\"visible-md-up\"\u003eVisible from the md breakpoint\u003c/div\u003e\n\u003cdiv class=\"visible-lg-up\"\u003eVisible from the lg breakpoint\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"hidden-xs\"\u003eHidden only on the xs breakpoint\u003c/div\u003e\n\u003cdiv class=\"hidden-sm\"\u003eHidden only on the sm breakpoint\u003c/div\u003e\n\u003cdiv class=\"hidden-md\"\u003eHidden only on the md breakpoint\u003c/div\u003e\n\u003cdiv class=\"hidden-lg\"\u003eHidden only on the lg breakpoint\u003c/div\u003e\n\u003cdiv class=\"hidden-xl\"\u003eHidden only on the xl breakpoint\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"hidden-sm-up\"\u003eHidden from the sm breakpoint\u003c/div\u003e\n\u003cdiv class=\"hidden-md-up\"\u003eHidden from the md breakpoint\u003c/div\u003e\n\u003cdiv class=\"hidden-lg-up\"\u003eHidden from the lg breakpoint\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeixcom%2Fueli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeixcom%2Fueli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeixcom%2Fueli/lists"}