-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
288 lines (211 loc) · 10.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="en" data-herman="root">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@get-sinister/sass Documentation</title>
<link href="assets/img/sinister-logo.svg" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="assets/webpack/app_styles.min.css" />
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script type="text/javascript" async src="https://www.googletagmanager.com/gtag/js?id=G-3EEL4L8PHG"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'G-3EEL4L8PHG');
</script>
</head>
<body data-herman="body">
<svg xmlns="http://www.w3.org/2000/svg" hidden>
<symbol id="icon-logo" viewBox="0 0 16 16">
<path d="M.2 8 0 7.8v-.2C.8 6.9 1.9 5.9 2.7 5l.4.3c-.5.8-1.1 1.6-1.8 2.3 1 1.2 1 1.3 1.7 2.4l-.4.3c-.4-.4-.5-.6-1-1C1 8.6 1.1 8.7.2 8zM13 10c.6-1.1.7-1.1 1.7-2.4-.6-.6-1.3-1.5-1.7-2.3l.3-.3c.8.8 1.8 1.8 2.7 2.6v.2l-.8.7c-.3.3-1.2 1.1-1.8 1.7L13 10z"/><path d="M2.6 13.1H3c.9 0 1.1-.2 1.1-1.4V4.2c0-1.1-.2-1.4-1.1-1.4h-.4v-.6h4.5v.7h-.3c-.9 0-1.1.2-1.1 1.4v3.2h4.6V4.2c0-1.1-.2-1.4-1.1-1.4h-.3v-.6h4.5v.7H13c-.9 0-1.1.2-1.1 1.4v7.5c0 1.1.2 1.4 1.1 1.4h.4v.7H8.9v-.7h.3c.9 0 1.1-.2 1.1-1.4V8.2H5.7v3.5c0 1.1.2 1.4 1.1 1.4h.3v.7H2.6v-.7z"/>
</symbol>
<symbol id="icon-menu" viewBox="0 0 24 28">
<path d="M24 21v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1V5c0-.547.453-1 1-1h22c.547 0 1 .453 1 1z"/>
</symbol>
</svg>
<div data-region="app">
<header data-region="banner">
<button data-nav-toggle data-toggle="button" aria-controls="nav" aria-pressed="false" type="button" data-toggle-synced="false">
<svg data-icon="menu" data-icon-size="nav-icon" ><title>menu</title><use xlink:href="#icon-menu" />
</svg>
</button>
<div class="project-title">
<a href="index.html" rel="home" class="project-name">@get-sinister/sass</a>
<span class="project-version">0.7.1</span>
</div>
</header>
<div data-region="container">
<nav data-region="nav" data-toggle="target" id="nav" data-target-id="nav" aria-expanded="false" data-auto-closing="false" data-auto-closing-on-any-click="false">
<form action="search.html">
<input type="text" name="q" placeholder="Search…" required minlength="3">
</form>
<div class="nav-subsection">
<h3 class="nav-home">
<a href="index.html" data-nav="is-active">@get-sinister/sass</a>
</h3>
</div>
<div class="nav-subsection">
<ul>
<li class="nav-item">
<a href="undefined.html" data-nav="is-not-active">General</a>
</li>
<li class="nav-item">
<a href="classes.html" data-nav="is-not-active">classes</a>
</li>
<li class="nav-item">
<a href="design.html" data-nav="is-not-active">design</a>
</li>
<li class="nav-item">
<a href="dev.html" data-nav="is-not-active">dev</a>
</li>
<li class="nav-item">
<a href="devgetmap.html" data-nav="is-not-active">devgetmap</a>
</li>
<li class="nav-item">
<a href="experimental.html" data-nav="is-not-active">experimental</a>
</li>
<li class="nav-item">
<a href="grid.html" data-nav="is-not-active">grid</a>
</li>
<li class="nav-item">
<a href="setup.html" data-nav="is-not-active">setup</a>
</li>
<li class="nav-item">
<a href="typography.html" data-nav="is-not-active">typography</a>
</li>
<li class="nav-item">
<a href="unit-conversion.html" data-nav="is-not-active">unit-conversion</a>
</li>
<li class="nav-item">
<a href="utility.html" data-nav="is-not-active">utility</a>
</li>
</ul>
</div>
<aside class="footer-credit">
<a href="https://www.oddbird.net/herman/" class="footer-icon">
<svg data-icon="logo" data-icon-size="footer-logo" ><use xlink:href="#icon-logo" />
</svg>
</a>
<span>
Documented with
<a href="https://www.oddbird.net/herman/" class="footer-link">
Herman
</a>
</span>
<span>
by
<a href="https://www.oddbird.net/" class="footer-link">
OddBird
</a>
</span>
</aside>
</nav>
<main data-region="main">
<div data-page="index">
<ul class="project-links">
<li class="project-link-item">
<a href="https://github.com/TheoKondak/Sinister#readme" class="project-link">View Project</a>
</li>
</ul>
<div class="text-block">
<h1 id="sinister">SINISTER</h1>
<br>
<p>Sinister is an SCSS and JS utility<span class="widont"> </span>library.</p>
<p>The SCSS library tries to simplify daily common cases like creating a grid, managing spacings like paddings, gaps etc, managing project color palette in SCSS level as well as give usefull utility mixin and functions. For more read the<span class="widont"> </span>documentation.</p>
<p>You can implement Sinister in your SCSS routine just by importing it to your SCSS<span class="widont"> </span>file.</p>
<p>The JS part is currently in hietus, with not much to<span class="widont"> </span>offer.</p>
<p>Most of the <code>mixins</code> and <code>functions</code> are unit tested and work as<span class="widont"> </span>expected.</p>
<p>That being said, this is a one-man project. I only work on the it only when I have some free time, so be aware that some things might not work as intended since coverage is not 100%<span class="widont"> </span>yet.</p>
<h2 id="installation">Installation</h2>
<p><code>npm i @get-sinister/sass</code></p>
<h2 id="changelog">Changelog</h2>
<blockquote>
<p>Not working at the<span class="widont"> </span>moment</p>
</blockquote>
<ul>
<li><a href="https://github.com/TheoKondak/Sinister/blob/main/scss/CHANGELOG.md">CHANGELOG.md</a></li>
<li><a href="https://github.com/TheoKondak/Sinister/blob/main/scss/changelog-data.json">CHANGELOG.JSON</a></li>
</ul>
<h2 id="configuration">Configuration</h2>
<p>In order for sinister to work, 2 files are<span class="widont"> </span>needed.</p>
<ul>
<li>
<p>In your root directory, where <code>npm_package</code> is located, create a file called <code>_sin.config.scss</code>.</p>
<pre><code class="lang-Folder">.
├── package.json
├── node_modules/
├── _sin.config.scss
</code></pre>
<p>Then open <code>_sin.config.scss</code> file and add the boilerplate to start<span class="widont"> </span>working.</p>
<pre><code class="lang-scss"> _sin.config.scss content
@use './node_modules/@get-sinister/sass/sin-core/functions/public/set-config-func' as sin;
$configuration: sin.set-config(
(
breakpoints: (
new-breakpoint: 420px;
)
)
);
</code></pre>
<blockquote>
<p><strong>tip:</strong> at any point in your scss file you can type <code>@debug help();</code> to print sinister configuration<span class="widont"> </span>values.</p>
</blockquote>
<blockquote>
<p><strong>tip:</strong> keep in mind that if you update <code>_sin.config.scss</code> values, and you are using <code>sass --watch</code> you will have to<span class="widont"> </span>restart.</p>
</blockquote>
</li>
</ul>
<br>
<ul>
<li>
<p>Inside your scss files directory create a file called <code>_sin.scss</code>. You will have to <code>@use</code> this file to load sinister in your<span class="widont"> </span>project.</p>
<pre><code class="lang-Folder"> ├── package.json
├── node_modules/
├── _sin.config.scss
├── scss/
├── custom.scss # Main scss file
├── pages/ # Folder with more scss files
├── _sin.scss # file to import `Sinister` to your project.
</code></pre>
<p>To see the scema and default values check the <a href="https://theokondak.github.io/Sinister/#setup-variable-sinister-default-configuration">documentation</a>.</p>
</li>
<li>
<p>The functionality of Sinister lies within <code>sin-core</code> folder. All you have to do is load this folder into a file in order to start working with it. Open <code>_sin.scss</code> file and add the <code>@forward</code> link to the<span class="widont"> </span>package.</p>
<pre><code class="lang-_sin.scss"> @forward '../node_modules/@get-sinister/sass/sin-core';
</code></pre>
</li>
<li>
<p>Importing sinister to a new file is easy. Use the <code>@use</code> to import it to the file you are working on. <a href="https://sass-lang.com/documentation/at-rules/use">Read<span class="widont"> </span>More</a></p>
</li>
</ul>
<p>ex.</p>
<br>
<pre><code class="lang-scss">
@use '../sin' as *;
</code></pre>
<br>
<p>Keep in mind that the path is<span class="widont"> </span>relative.</p>
<h2 id="documentation">Documentation</h2>
<p>For more, refer to the online<span class="widont"> </span>documentation.</p>
<ul>
<li><a href="https://theokondak.github.io/Sinister/">Documentation</a></li>
<li>For older versions check the <a href="https://github.com/TheoKondak/Sinister/tree/main/scss/documentation">archive</a></li>
</ul>
<br>
<br>
<h2 id="warning-">Warning!</h2>
<blockquote>
<p><em>The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.the software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the<span class="widont"> </span>software.</em></p>
</blockquote>
</div>
</div>
</main>
</div>
</div>
<script type="text/javascript" src="assets/webpack/runtime.min.js"></script>
<script type="text/javascript" src="assets/webpack/common.min.js"></script>
<script type="text/javascript" src="assets/webpack/app.min.js"></script>
</body>
</html>