README.md 1.63 KB
Newer Older
sio's avatar
sio committed
1
# Say hi to Helium 👋
sio's avatar
sio committed
2

sio's avatar
sio committed
3
..a sassy offiziermesser for frontend development
sio's avatar
sio committed
4

sio's avatar
sio committed
5
## Getting started
sio's avatar
sio committed
6

sio's avatar
sio committed
7
Helium is a Sass toolkit that provide to the developer a lot of functions, mixins and variables to easily write complex stylesheets.
sio's avatar
sio committed
8

sio's avatar
v0.0.0    
sio committed
9
By default this library produces no output, you can import it and use some of its utils without your css growing in size beyond the expected.
sio's avatar
sio committed
10
11

```scss
sio's avatar
sio committed
12
@use 'helium';
sio's avatar
sio committed
13
14

$colors: (
15
16
17
    1: helium.random-color(),
    2: helium.random-color(),
    3: helium.random-color(),
sio's avatar
sio committed
18
19
20
21
22
);

.my-button {
    // ...styles

sio's avatar
sio committed
23
24
25
    @each $class, $color in $colors {
        &.#{$class} {
            background: $color;
sio's avatar
sio committed
26
27
28
        }
    }
}
sio's avatar
sio committed
29
30
```

sio's avatar
sio committed
31
32
33
34
### Import from CDN

Note that in this way you are importing a css file.

sio's avatar
sio committed
35
```html
sio's avatar
sio committed
36
<link rel="stylesheet" type="text/css" href="https://unpkg.com/helium" />
sio's avatar
sio committed
37
38
```

sio's avatar
sio committed
39
40
41
42
43
For a better experience:

### Install from npm

```shell
sio's avatar
sio committed
44
npm i sass helium
sio's avatar
sio committed
45
46
```

sio's avatar
sio committed
47
48
49
### Usage

```scss
sio's avatar
v0.0.0    
sio committed
50
51
52
@use 'helium' with (
    $reset: true // this will print a basic reset to start with
);
sio's avatar
sio committed
53
54
```

sio's avatar
sio committed
55
Referring to the above example, due to the nature of [Sass Modules](https://sass-lang.com/blog/the-module-system-is-launched) to use an utility you need to prefix them:
sio's avatar
sio committed
56
57

```scss
sio's avatar
v0.0.0    
sio committed
58
59
60
@use 'helium' with (
    $reset: true
);
sio's avatar
sio committed
61

sio's avatar
sio committed
62
.my-navbar {
sio's avatar
sio committed
63
    @include helium.is-fixed-top;
sio's avatar
sio committed
64
}
sio's avatar
sio committed
65
66
67

// We recommend to, at least, shortening `helium` to `h`
// @use "helium" as "h";
sio's avatar
sio committed
68
69
70
71
72
```

To avoid the `helium.` repetition, if you are not using another frameworks that would enter in conflict with helium you can do this:

```scss
sio's avatar
v0.0.0    
sio committed
73
74
75
@use 'helium' as * with (
    $reset: true
);
sio's avatar
sio committed
76
77

.my-class {
sio's avatar
sio committed
78
    @include is-fixed-top;
sio's avatar
sio committed
79
}
sio's avatar
sio committed
80
81
```

sio's avatar
sio committed
82
Docs are still under development, please do not hesitate to ask for information!