https://github.com/zeixcom/ueli
(S)CSS Framework by Zeix
https://github.com/zeixcom/ueli
css framework responsive scss
Last synced: 6 months ago
JSON representation
(S)CSS Framework by Zeix
- Host: GitHub
- URL: https://github.com/zeixcom/ueli
- Owner: zeixcom
- License: mit
- Created: 2021-09-01T12:13:10.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2023-11-14T14:06:04.000Z (over 2 years ago)
- Last Synced: 2024-03-27T10:55:28.044Z (about 2 years ago)
- Topics: css, framework, responsive, scss
- Language: SCSS
- Homepage: https://zeixcom.github.io/ueli/
- Size: 2.11 MB
- Stars: 5
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ueli
CSS Framework from Zeix
## Installation
[npm](https://www.npmjs.com/package/@zeix/ueli): `npm i @zeix/ueli`
## Sass
Import ueli’s source files in your `main.scss`.
```scss
// main.scss
// 1. Include functions first (allows usage of to-rem or get-color in settings)
@import '../node_modules/@zeix/ueli/scss/01-tools/functions';
// 2. Add token and variable overrides here
// 3. Include remainder of required partials
@import '../node_modules/@zeix/ueli/scss/00-settings/tokens';
@import '../node_modules/@zeix/ueli/scss/00-settings/variables';
@import '../node_modules/@zeix/ueli/scss/01-tools/mixins';
// 4. Include any optional parts of ueli as needed
@import '../node_modules/@zeix/ueli/scss/02-generic';
@import '../node_modules/@zeix/ueli/scss/03-elements';
@import '../node_modules/@zeix/ueli/scss/04-objects';
@import '../node_modules/@zeix/ueli/scss/05-components';
@import '../node_modules/@zeix/ueli/scss/06-utilities';
// 5. Add your custom styles here
```
## Media Queries
Media Queries are handled by [Sass MQ](https://github.com/sass-mq/sass-mq).
### Usage
```scss
// Load the sass module
@use 'sass-mq' as *;
// Include the media query mixin and pass a breakpoint key
@include mq(md) {
}
```
The snippet above compiles to the following CSS:
```css
@media (min-width: 56.52em) {
}
```
## NPM Scripts
| Command | Description |
| :----------------- | :----------------------------------------- |
| `npm run build` | Build project in development mode |
| `npm run watch` | Watch files and build in development mode |
| `npm run serve` | Serve project in development mode |
| `npm run prod` | Build project in production mode |
| `npm run lint` | Run stylelint and fix errors |
| `npm run prettier` | Reformat files with prettier |
| `npm run sassdoc ` | Generate sassdoc files |
| `npm run test ` | Run sass-true tests via jest |
| `npm run release` | Run commands required for a release commit |
## Folder Structure
The folder structure inside the scss folder is based on Harry Robert’s ITCSS.
```
├── 00-settings # Variables
├── 01-tools # Functions and mixins
├── 02-generic # Normalization styles
├── 03-elements # Styles for bare HTML elements (h1, input, etc.)
├── 04-objects # Class-based selectors for undecorated patterns
├── 05-components # Specific UI components
├── 06-utilities # Helper classes
```
## Settings
Settings 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).
## Tools
Functions and mixins are annotated using sassdoc syntax. Please refer to the [sassdoc page](https://zeixcom.github.io/ueli/sassdoc) for their documentation.
## Objects
### Container
```html
```
Related variables: `$container`, [`$container-gutter`](https://zeixcom.github.io/ueli/sassdoc#global-variable-container-gutter)
### Grid
Grid classes are generated depending on the [`$grid-mode`](https://zeixcom.github.io/ueli/sassdoc#global-variable-grid-mode).
#### CSS Grid (grid-mode: grid)
Related 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)
##### Basic
```html
Column A
```
##### Responsive
```html
Column A
Column B
```
##### Offset
```html
Column A
Column B
```
##### Nested
```html
Nested column A
Nested column B
```
#### Flex Grid (grid-mode: flex)
Related 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)
##### Basic
```html
Column A
```
##### Responsive
```html
Column A
Column B
```
##### Offset
```html
Column A
Column B
```
##### Push / Pull
```html
First column in markup
Second column in markup
```
##### Nested
```html
Nested column A
Nested column B
```
Related 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)
### Embed
```html
```
Related token: `$ratios`
### Formatted Text
```html
```
Related variables: `$formatted-text-selector`
## Components
### Button
```html
```
```html
```
Related variables: See section "Button Base" and "Button Variations" in [\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)
### Input
```html
```
```html
```
Related variables: See section "Input" in [\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)
### Select
```html
Option One
Option Two
Option Three
```
Related variables: See section "Select" in [\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)
### Selection
```html
Option 1
Option 2
```
```html
Choice A
Choice B
```
Related variables: See section "Checkbox & Radio" in [\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)
### List
```html
- List Item 1
- List Item 2
-
List Item 3
- Nested List Item 1
- Nested List Item 2
- Nested List Item 3
```
```html
- List Item 1
- List Item 2
-
List Item 3
- Nested List Item 1
- Nested List Item 2
- Nested List Item 3
```
Related variables: See section "List" in [\_variables.scss](https://github.com/zeixcom/ueli/tree/develop/scss/00-settings/_variables.scss)
## Utilities
### Screenreader
```html
```
```html
```
### Display
```html
```
```html
```
```html
```
```html
```