https://github.com/adameier/utopian-sass
Sass module for generating values for fluid responsive design according to utopia.fyi .
https://github.com/adameier/utopian-sass
fluid responsive sass utopia
Last synced: 2 months ago
JSON representation
Sass module for generating values for fluid responsive design according to utopia.fyi .
- Host: GitHub
- URL: https://github.com/adameier/utopian-sass
- Owner: adameier
- License: mit
- Created: 2020-10-04T15:33:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-10-04T18:39:02.000Z (over 4 years ago)
- Last Synced: 2025-02-10T11:15:54.051Z (4 months ago)
- Topics: fluid, responsive, sass, utopia
- Language: SCSS
- Homepage:
- Size: 5.86 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# About
`utopian-sass` is a Sass module adaption of [Utopia](https://utopia.fyi/) for fluid responsive design. It is recommended you read about the generator [here](https://utopia.fyi/generator-mk-ii) if you haven't already.
## Getting Started
First thing to do is to install the package:
```
npm install utopian-sass
```
Then in your Sass, load the module like so:
```scss
@use '../node_modules/utopian-sass/utopian.scss';
```
This will generate fluid responsive CSS properties according to the default settings of the module.
## Configuration
`utopian-sass` uses configurable default values in its generation, which correspond to the options available in the [generator](https://utopia.fyi/generator-mk-ii), as well as options for prefixing the generated CSS properties. They appear in the codebase as follows:
```scss
$min-width: 320 !default;
$min-size: 21 !default;
$min-scale: 1.2 !default;
$max-width: 1140 !default;
$max-size: 24 !default;
$max-scale: 1.25 !default;
$neg-steps: 2 !default;
$pos-steps: 5 !default;
$prefix: 'fluid' !default;
$step-prefix: 'step' !default;
```
Any of these values can be configured when loading the module with the `@use` rule, for example:
```scss
@use '../node_modules/utopian-sass/utopian.scss' with (
$pos-steps: 7,
$min-size: 18,
$max-size: 22
);
```
**NB:** Ensure that when providing values for variables that contain numbers, you provide numbers that are _unitless_. Doing otherwise will likely lead to generated CSS properties that have no affect, and currently the module will not warn you if configured incorrectly.