alexandremasy / salt Goto Github PK

View Code? Open in Web Editor NEW

0.0 2.0 0.0 255 KB

Add some flavor to your product design workflow

License: MIT License

CSS 95.06% JavaScript 1.00% Shell 3.94%

sass sass-boilerplate sass-grid salt flavor

salt's Introduction

[WIP] Salt

Add some flavor to your product design workflow

Build

Clone the repository
Run

sass src/salt.scss build/salt.css

Documentation

Take a look at the documentation

salt's People

Contributors

Watchers

salt's Issues

Handle the font-style – Italic

Responsive typography

The font-size should adjust based on the size of the screen – based on the breakpoints

Being able to delay the generation of the helpers

Add a flag or a mixin to trigger the generation of the helpers. It can be helpful to delay the generation until all the information are set. E.g. all the fonts are registered.

Define the breakpoint of the application

Define the breakpoint for this range:

create mixin for font-size

Superbe font mixin

Create a mixin for better font declaration

@mixin font($font-family, $font-weight, $font-size, $font-style){}

Usage

@include font(heading, regular,  xxl);
@include font($font-size: xxs);

Add an easy way to declare icon

Find a way to disable some font format

Create a mixin to declare a font

Create a mixin that can:

Declare a local font or a provider one;
Declare the font-weights;
Declare the font-styles;
Declare the font-sizes;

It should be simply and elegant to use.

create mixin for color

Provide easy way to declare a media query

Provide an easy way to declare a media query based on the grid breakpoints

Generate font-sizes utilies

Generate the font-size utiliy classes for the heading and the body.

f-xxs
f-xs
f-s
f-m
f-l
f-xl
f-xxl

By default, f-[size] apply the sizes of the body.

Generate the utility classes for the heading:

f-heading-xxs
f-heading-xs
f-heading-s
f-heading-m
f-heading-l
f-heading-xl
f-heading-xxl

create mixin for line-height

Improve the settings management

Implement a better way to manage the settings values

Some will have multiple values;
Some will have one value;

Give separation between the header of the data and the actual data.

//
//  @param {String} $key – The key to register
//  @param {*} $value – The value to register
//  @return * – The value stored for the key
//
@mixin config($key, $value: null){}