Skip to content

Commit 238f3a9

Browse files
olivier3lancolivier3lanc
committed
fix: v0.4.1
1 parent ee1b989 commit 238f3a9

File tree

3 files changed

+35
-33
lines changed

3 files changed

+35
-33
lines changed

favicon.png renamed to docs/favicon.png

File renamed without changes.

‎docs/index.html‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<meta name="description" itemprop="description" content="A simple and customizable low-level CSS library generator">
1212
<meta name="application-name" content="BRiCSS">
1313
<meta name="author" content="01ivier 3lanc">
14-
<link rel="icon" type="image/png" href="https://ita-design-system.github.io/bricss/favicon.png">
14+
<link rel="icon" type="image/png" href="./favicon.png">
1515

1616
<meta name="msapplication-TileColor" content="#182026">
1717
<meta name="theme-color" content="#182026">
@@ -27,15 +27,15 @@
2727
<meta property="og:url" content="https://ita-design-system.github.io/bricss/">
2828
<meta property="og:title" content="BRiCSS">
2929
<meta property="og:description" content="A simple and customizable low-level CSS library generator">
30-
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/ita-design-system/bricss@main/dsg/medias/bricss-og-image.png">
30+
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/ita-design-system/ita-medias@main/bricss-og-image.png">
3131

3232

3333
<!-- Twitter -->
3434
<meta name="twitter:card" content="summary_large_image">
3535
<meta name="twitter:title" content="BRiCSS">
3636
<meta name="twitter:description" content="A simple and customizable low-level CSS library generator">
3737
<meta name="twitter:url" content="https://ita-design-system.github.io/bricss/">
38-
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/ita-design-system/bricss@main/dsg/medias/bricss-og-image.png">
38+
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/ita-design-system/ita-medias@main/bricss-og-image.png">
3939

4040
<!-- iOS -->
4141
<meta name="apple-mobile-web-app-title" content="BRiCSS">
@@ -70,6 +70,7 @@
7070
d-none="lg"
7171
c-toggle="toc"
7272
data-dismiss="true"
73+
title="Toggle menu"
7374
style="perspective: 5em; transform-style: preserve-3d;">
7475
<span class="d-flex fd-column gap-1 __animation_3"
7576
c-toggle-name="toc"
@@ -335,19 +336,19 @@ <h2 class="m-0 | ff-lead-700 fs-6">Single property</h2>
335336
</header>
336337
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
337338
<div class="d-flex fd-column">
338-
<code class="fs-5 c-primary-400">
339+
<code class="fs-5 c-primary-200">
339340
class=&quot;<span class="c-secondary-400">dis</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">flex</span>&quot;
340341
</code>
341342
<p class="m-0 | fs-3 | c-primary-300">⤷ display flex</p>
342343
</div>
343344
<div class="d-flex fd-column">
344-
<code class="fs-5 c-primary-400">
345+
<code class="fs-5 c-primary-200">
345346
class=&quot;<span class="c-secondary-400">dis</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">inline-flex</span>&quot;
346347
</code>
347348
<p class="m-0 | fs-3 | c-primary-300">⤷ display inline-flex</p>
348349
</div>
349350
<div class="d-flex fd-column">
350-
<code class="fs-5 c-primary-400">
351+
<code class="fs-5 c-primary-200">
351352
class=&quot;<span class="c-secondary-400">dis</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span>&quot;
352353
</code>
353354
<p class="m-0 | fs-3 | c-primary-300">⤷ display none</p>
@@ -441,19 +442,19 @@ <h2 class="m-0 | ff-lead-700 fs-6">Changing CSS property prefix</h2>
441442
</header>
442443
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
443444
<div class="d-flex fd-column">
444-
<code class="fs-5 c-primary-400">
445+
<code class="fs-5 c-primary-200">
445446
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">flex</span>&quot;
446447
</code>
447448
<p class="m-0 | fs-3 | c-primary-300">⤷ display flex</p>
448449
</div>
449450
<div class="d-flex fd-column">
450-
<code class="fs-5 c-primary-400">
451+
<code class="fs-5 c-primary-200">
451452
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">inline-flex</span>&quot;
452453
</code>
453454
<p class="m-0 | fs-3 | c-primary-300">⤷ display inline-flex</p>
454455
</div>
455456
<div class="d-flex fd-column">
456-
<code class="fs-5 c-primary-400">
457+
<code class="fs-5 c-primary-200">
457458
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span>&quot;
458459
</code>
459460
<p class="m-0 | fs-3 | c-primary-300">⤷ display none</p>
@@ -552,13 +553,13 @@ <h2 class="m-0 | ff-lead-700 fs-6">Adding <code class="c-secondary-500">!importa
552553
</header>
553554
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
554555
<div class="d-flex fd-column">
555-
<code class="fs-5 c-primary-400">
556+
<code class="fs-5 c-primary-200">
556557
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">flex</span>&quot;
557558
</code>
558559
<p class="m-0 | fs-3 | c-primary-300">⤷ standard display flex</p>
559560
</div>
560561
<div class="d-flex fd-column">
561-
<code class="fs-5 c-primary-400">
562+
<code class="fs-5 c-primary-200">
562563
class=&quot;<span class="c-primary-300">u</span><span class="c-tertiary-400">-</span><span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">flex</span>&quot;
563564
</code>
564565
<p class="m-0 | fs-3 | c-primary-300">⤷ utility display flex with <code>!important</code> keyword applied</p>
@@ -668,19 +669,19 @@ <h2 class="m-0 | ff-lead-700 fs-6">Custom value names</h2>
668669
</header>
669670
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
670671
<div class="d-flex fd-column">
671-
<code class="fs-5 c-primary-400">
672+
<code class="fs-5 c-primary-200">
672673
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">fx</span>&quot;
673674
</code>
674675
<p class="m-0 | fs-3 | c-primary-300">⤷ display flex</p>
675676
</div>
676677
<div class="d-flex fd-column">
677-
<code class="fs-5 c-primary-400">
678+
<code class="fs-5 c-primary-200">
678679
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">ifx</span>&quot;
679680
</code>
680681
<p class="m-0 | fs-3 | c-primary-300">⤷ display inline-flex</p>
681682
</div>
682683
<div class="d-flex fd-column">
683-
<code class="fs-5 c-primary-400">
684+
<code class="fs-5 c-primary-200">
684685
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span>&quot;
685686
</code>
686687
<p class="m-0 | fs-3 | c-primary-300">⤷ display none</p>
@@ -778,25 +779,25 @@ <h2 class="m-0 | ff-lead-700 fs-6">Adding responsive</h2>
778779
</header>
779780
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
780781
<div class="d-flex fd-column">
781-
<code class="fs-5 c-primary-400">
782+
<code class="fs-5 c-primary-200">
782783
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">flex</span><span class="c-tertiary-700">--</span><span class="c-quaternary-700">xs</span>&quot;
783784
</code>
784785
<p class="m-0 | fs-3 | c-primary-300">⤷ display flex on xs screen sizes</p>
785786
</div>
786787
<div class="d-flex fd-column">
787-
<code class="fs-5 c-primary-400">
788+
<code class="fs-5 c-primary-200">
788789
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">inline-flex</span><span class="c-tertiary-700">--</span><span class="c-quaternary-700">sm</span>&quot;
789790
</code>
790791
<p class="m-0 | fs-3 | c-primary-300">⤷ display inline-flex on sm screen sizes</p>
791792
</div>
792793
<div class="d-flex fd-column">
793-
<code class="fs-5 c-primary-400">
794+
<code class="fs-5 c-primary-200">
794795
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span><span class="c-tertiary-700">--</span><span class="c-quaternary-700">xs</span> <span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span><span class="c-tertiary-700">--</span><span class="c-quaternary-700">sm</span>&quot;
795796
</code>
796797
<p class="m-0 | fs-3 | c-primary-300">⤷ display none on xs and sm screen sizes with class names</p>
797798
</div>
798799
<div class="d-flex fd-column">
799-
<code class="fs-5 c-primary-400">
800+
<code class="fs-5 c-primary-200">
800801
<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span>=&quot;<span class="c-quaternary-700">xs</span>,<span class="c-quaternary-700">sm</span>&quot;
801802
</code>
802803
<p class="m-0 | fs-3 | c-primary-300">⤷ display none on xs and sm screen sizes with attribute</p>
@@ -966,25 +967,25 @@ <h2 class="m-0 | ff-lead-700 fs-6">Adding responsive selectively</h2>
966967
</header>
967968
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
968969
<div class="d-flex fd-column">
969-
<code class="fs-5 c-primary-400">
970+
<code class="fs-5 c-primary-200">
970971
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">flex</span><span class="c-tertiary-700">--</span><span class="c-quaternary-700">xs</span>&quot;
971972
</code>
972973
<p class="m-0 | fs-3 | c-primary-300">⤷ display flex on xs screen sizes</p>
973974
</div>
974975
<div class="d-flex fd-column">
975-
<code class="fs-5 c-primary-400">
976+
<code class="fs-5 c-primary-200">
976977
class=&quot;<span class="c-secondary-400">ai</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">center</span>&quot;
977978
</code>
978979
<p class="m-0 | fs-3 | c-primary-300">⤷ align-items flex-center</p>
979980
</div>
980981
<div class="d-flex fd-column">
981-
<code class="fs-5 c-primary-400">
982+
<code class="fs-5 c-primary-200">
982983
class=&quot;<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span><span class="c-tertiary-700">--</span><span class="c-quaternary-700">xs</span> <span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span><span class="c-tertiary-700">--</span><span class="c-quaternary-700">sm</span>&quot;
983984
</code>
984985
<p class="m-0 | fs-3 | c-primary-300">⤷ display none on xs and sm screen sizes with class names</p>
985986
</div>
986987
<div class="d-flex fd-column">
987-
<code class="fs-5 c-primary-400">
988+
<code class="fs-5 c-primary-200">
988989
<span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">none</span>=&quot;<span class="c-quaternary-700">xs</span>,<span class="c-quaternary-700">sm</span>&quot;
989990
</code>
990991
<p class="m-0 | fs-3 | c-primary-300">⤷ display none on xs and sm screen sizes with attribute</p>
@@ -1183,13 +1184,13 @@ <h2 class="m-0 | ff-lead-700 fs-6">Responsive utility</h2>
11831184
</header>
11841185
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
11851186
<div class="d-flex fd-column">
1186-
<code class="fs-5 c-primary-400">
1187+
<code class="fs-5 c-primary-200">
11871188
class=&quot;<span class="c-primary-300">u</span><span class="c-tertiary-400">-</span><span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">flex</span><span class="c-tertiary-700">--</span><span class="c-quaternary-700">xs</span>&quot;
11881189
</code>
11891190
<p class="m-0 | fs-3 | c-primary-300">⤷ display flex with <code>!important</code> keyword applied on xs screen sizes</p>
11901191
</div>
11911192
<div class="d-flex fd-column">
1192-
<code class="fs-5 c-primary-400">
1193+
<code class="fs-5 c-primary-200">
11931194
<span class="c-primary-300">u</span><span class="c-tertiary-400">-</span><span class="c-secondary-400">d</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">flex</span>=&quot;<span class="c-quaternary-700">xs</span>,<span class="c-quaternary-700">sm</span>&quot;
11941195
</code>
11951196
<p class="m-0 | fs-3 | c-primary-300">⤷ display flex with <code>!important</code> keyword applied on both xs and sm screen sizes</p>
@@ -1412,13 +1413,13 @@ <h2 class="m-0 | ff-lead-700 fs-6">With tokens</h2>
14121413
</header>
14131414
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
14141415
<div class="d-flex fd-column">
1415-
<code class="fs-5 c-primary-400">
1416+
<code class="fs-5 c-primary-200">
14161417
class=&quot;<span class="c-secondary-400">c</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">primary</span>&quot;
14171418
</code>
14181419
<p class="m-0 | fs-3 | c-primary-300">⤷ color primary</p>
14191420
</div>
14201421
<div class="d-flex fd-column">
1421-
<code class="fs-5 c-primary-400">
1422+
<code class="fs-5 c-primary-200">
14221423
class=&quot;<span class="c-secondary-400">bc</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">primary</span>&quot;
14231424
</code>
14241425
<p class="m-0 | fs-3 | c-primary-300">⤷ background-color primary</p>
@@ -1545,25 +1546,25 @@ <h2 class="m-0 | ff-lead-700 fs-6">With tokens + other names and values</h2>
15451546
</header>
15461547
<div class="d-flex fw-wrap gap-8 | p-6 maxw-110ch | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
15471548
<div class="d-flex fd-column">
1548-
<code class="fs-5 c-primary-400">
1549+
<code class="fs-5 c-primary-200">
15491550
class=&quot;<span class="c-secondary-400">c</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">primary</span>&quot;
15501551
</code>
15511552
<p class="m-0 | fs-3 | c-primary-300">⤷ color primary</p>
15521553
</div>
15531554
<div class="d-flex fd-column">
1554-
<code class="fs-5 c-primary-400">
1555+
<code class="fs-5 c-primary-200">
15551556
class=&quot;<span class="c-secondary-400">c</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">foo</span>&quot;
15561557
</code>
15571558
<p class="m-0 | fs-3 | c-primary-300">⤷ color foo</p>
15581559
</div>
15591560
<div class="d-flex fd-column">
1560-
<code class="fs-5 c-primary-400">
1561+
<code class="fs-5 c-primary-200">
15611562
class=&quot;<span class="c-secondary-400">bc</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">primary</span>&quot;
15621563
</code>
15631564
<p class="m-0 | fs-3 | c-primary-300">⤷ background-color primary</p>
15641565
</div>
15651566
<div class="d-flex fd-column">
1566-
<code class="fs-5 c-primary-400">
1567+
<code class="fs-5 c-primary-200">
15671568
class=&quot;<span class="c-secondary-400">bc</span><span class="c-tertiary-400">-</span><span class="c-quaternary-400">deepskyblue</span>&quot;
15681569
</code>
15691570
<p class="m-0 | fs-3 | c-primary-300">⤷ background-color deepskyblue</p>

0 commit comments

Comments
 (0)