Skip to content

Commit 361f3d7

Browse files
ALPIXELMaikiALPIXELMaiki
committed
Update doc xith ChuckCSS v3.6.1
1 parent 2bc4e1f commit 361f3d7

File tree

7 files changed

+301
-236
lines changed

7 files changed

+301
-236
lines changed

‎dist/front.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎documentation.html‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -644,7 +644,7 @@ <h3 id="chuckcss-default-setups-typography">
644644
In ChuckCSS, the &lt;body> element is set to :
645645
<ul>
646646
<li>font-family : -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif</li>
647-
<li>font-size : 15px (1.5rem)</li>
647+
<li>font-size : 16px (1.6rem)</li>
648648
<li>line-height : 1.5</li>
649649
<li>color : #3a3a3a</li>
650650
</ul>
@@ -678,7 +678,7 @@ <h5>Convert pixels in em and rem units</h5>
678678
<div class="alert alert-warning">
679679
<i class="ion-ios-lightbulb"></i>
680680
<div>
681-
In ChuckCSS, the default font-size is set to <strong>15px.</strong>
681+
In ChuckCSS, the default font-size is set to <strong>16px.</strong>
682682
</div>
683683
</div>
684684

@@ -751,9 +751,26 @@ <h5>Convert pixels in em and rem units</h5>
751751
-- @ Texts @ --
752752
*/
753753
@text-mc: #3a3a3a; /* Texts ~ Main color (hexa, rgb, rgba...) */
754-
@text-fs-old : 15px; /* Texts font-size ~ Used for old browsers that doesn't support rem units */
755-
@text-fs: unit(@text-fs-old/10,rem); /* Textes font-size (applied to &lt;body>) */
756-
@text-lh : 1.5; /* Texts line-height : ~= font-size*1.5 */
754+
755+
// Font-size && line-height for small screens (<= 359px)
756+
@text-fs: 1.6rem; /* applied to &lt;body> */
757+
@text-lh : 1.5; /* Texts line-height : ~= font-size*1.5 */
758+
759+
// Font-size && line-height for phone screens (>= 360px)
760+
@text-fs-s: 1.6rem; /* Textes font-size (applied to &lt;body>) */
761+
@text-lh-s : 1.5; /* Texts line-height : ~= font-size*1.5 */
762+
763+
// Font-size && line-height for medium screens (>= 768px)
764+
@text-fs-m: 1.6rem; /* Textes font-size (applied to &lt;body>) */
765+
@text-lh-m : 1.5; /* Texts line-height : ~= font-size*1.5 */
766+
767+
// Font-size && line-height for large screens (>= 989px)
768+
@text-fs-l: 1.6rem; /* Textes font-size (applied to &lt;body>) */
769+
@text-lh-l : 1.5; /* Texts line-height : ~= font-size*1.5 */
770+
771+
// Font-size && line-height for x-large screens (>= 1200px)
772+
@text-fs-xl: 1.6rem; /* Textes font-size (applied to &lt;body>) */
773+
@text-lh-xl : 1.5; /* Texts line-height : ~= font-size*1.5 */
757774
</code>
758775
</pre>
759776
</div>

‎getting-started.html‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ <h2 id="start-download">
171171
<p>
172172
YARN package
173173
</p>
174-
<a href="https://yarnpkg.com/en/package/ChuckCSS" crel="nofollow" lass="btn external-link black">
174+
<a href="https://yarnpkg.com/en/package/ChuckCSS" rel="nofollow" class="btn external-link black">
175175
$ yarn add ChuckCSS
176176
</a>
177177
</div>
@@ -197,17 +197,17 @@ <h2 id="start-jsdelivr">
197197
<pre class="HTML">
198198
<code class="language-markup"><!-- -->
199199
&lt;!-- Include the ChuckCSS CSS file -->
200-
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/chuckcss.min.css" integrity="sha384-9Q5efsUnTOxxKSBqSr+Xu5C6NhT9C7ZpXmOJlQDLWsN43EpVBS1C/uqmwfuJJdw4" crossorigin="anonymous">
200+
&lt;link media="screen" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/chuckcss.min.css" integrity="sha384-9Q5efsUnTOxxKSBqSr+Xu5C6NhT9C7ZpXmOJlQDLWsN43EpVBS1C/uqmwfuJJdw4" crossorigin="anonymous">
201201

202202
&lt;!-- ** OPTIONNAL ** -->
203203
&lt;!-- Print file -->
204-
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/print.css" integrity="sha384-v3V621jdwau+HZBAsgh1A2BAbGS203f9aH7aedLd1AIWLQYDnluBvLmdMkgkN3hU" crossorigin="anonymous">
204+
&lt;link media="print" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/print.css" integrity="sha384-v3V621jdwau+HZBAsgh1A2BAbGS203f9aH7aedLd1AIWLQYDnluBvLmdMkgkN3hU" crossorigin="anonymous">
205205

206206
&lt;!-- ** OPTIONNAL ** -->
207207
&lt;!-- Just before the &lt;/body> close tag, include the ChuckCSS JS file -->
208208
&lt;!-- The javascript file is optionnal. It manages modals (openings and closures) and alerts (closures) -->
209209
&lt;!-- You can easily create your own javascript file to manage by yourself modals and alerts -->
210-
&lt;script src="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/chuckcss.js" integrity="sha384-ADz7aKD9VLw6IBaYl8pwAckpQVIk9vjGsvvNtj3lPPWWgcgu9ZgvNnR+AP7oz7x+" crossorigin="anonymous">&lt;/script>
210+
&lt;script src="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/chuckcss.js" integrity="sha384-ADz7aKD9VLw6IBaYl8pwAckpQVIk9vjGsvvNtj3lPPWWgcgu9ZgvNnR+AP7oz7x+" crossorigin="anonymous" defer>&lt;/script>
211211
</code>
212212
</pre>
213213
</div>
@@ -234,13 +234,14 @@ <h2 id="start-tree-files">
234234
├──────── modals.less
235235
├──────── tabs.less
236236
|
237-
├── core/
237+
├── main/
238238
├──────── animations.less &lt;!-- radio, checkbox, loaders animations -->
239239
├──────── base.less &lt;!-- &lt;html> and &lt;body> general definitions -->
240240
├──────── functions.less &lt;!-- powerful mixins file -->
241241
├──────── generator.less &lt;!-- grids items width, texts helpers... -->
242-
├──────── helpers.less
243-
├──────── icons.less &lt;!-- icons file -->
242+
├──────── helpers.less &lt;!-- block helpers : visibility, width... -->
243+
├──────── icons.less &lt;!-- simple icons placement -->
244+
├──────── normalize.less &lt;!-- reset css -->
244245
├──────── responsive.less &lt;!-- responsive mixins -->
245246
|
246247
├── elements/
@@ -351,7 +352,8 @@ <h2 id="start-source-files">
351352
@green : #80ae37;
352353
@green-na : green;
353354

354-
// By filling the @aColors array, you can use cc-bg-{color} and cc-{color} class onto your HTML elements with your own colors
355+
// By filling the @aColors array, you can use cc-bg-{color} and cc-{color} class onto
356+
// your HTML elements with your own colors
355357
@aColors :
356358
@primary-na @primary,
357359
@green-na @green,
@@ -363,9 +365,28 @@ <h2 id="start-source-files">
363365
-- @ Texts @ --
364366
*/
365367
@text-mc: #1A1A1A; /* Texts ~ Main color (hexa, rgb, rgba...) */
366-
@text-fs-old : 17px; /* Texts font-size ~ Used for old browsers that doesn't support rem units */
368+
@text-fs : 1.7rem; /* Texts font-size */
367369

368370
// The body will have a font-size of 1.7rem (17px), and texts will be written with color #1A1A1A
371+
372+
373+
// You can easily define different font-size regarding the screen width by filling vars below
374+
375+
// Font-size && line-height for phone screens (>= 360px)
376+
@text-fs-s: 1.6rem; /* Textes font-size (applied to &lt;body>) */
377+
@text-lh-s : 1.5; /* Texts line-height : ~= font-size*1.5 */
378+
379+
// Font-size && line-height for medium screens (>= 768px)
380+
@text-fs-m: 1.6rem; /* Textes font-size (applied to &lt;body>) */
381+
@text-lh-m : 1.5; /* Texts line-height : ~= font-size*1.5 */
382+
383+
// Font-size && line-height for large screens (>= 989px)
384+
@text-fs-l: 1.6rem; /* Textes font-size (applied to &lt;body>) */
385+
@text-lh-l : 1.5; /* Texts line-height : ~= font-size*1.5 */
386+
387+
// Font-size && line-height for x-large screens (>= 1200px)
388+
@text-fs-xl: 1.6rem; /* Textes font-size (applied to &lt;body>) */
389+
@text-lh-xl : 1.5; /* Texts line-height : ~= font-size*1.5 */
369390
</code>
370391
</pre>
371392
</div>

‎index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<!-- COOKIES -->
4242
<div id="cookies">
4343
<i class="far fa-exclamation-circle icon-left"></i> Our website use cookies to work properly. By browsing our website you understand cookies will be used on your computer.
44-
<a href="#" class="accept-cookie close btn cc-bg-blue">I understand</a>
44+
<a href="#" class="accept-cookie close btn">I understand</a>
4545
</div>
4646

4747
<header id="main-header">
@@ -134,6 +134,7 @@ <h2 class="cc-mab-20">Start a new project with ChuckCSS CDN (lastest version)</h
134134
<pre class="HTML">
135135
<code class="language-markup"><!-- -->
136136
&lt;link
137+
media="screen"
137138
rel="stylesheet"
138139
href="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/chuckcss.min.css"
139140
integrity="sha384-9Q5efsUnTOxxKSBqSr+Xu5C6NhT9C7ZpXmOJlQDLWsN43EpVBS1C/uqmwfuJJdw4"
@@ -146,7 +147,7 @@ <h2 class="cc-mab-20">Start a new project with ChuckCSS CDN (lastest version)</h
146147
&lt;script
147148
src="https://cdn.jsdelivr.net/npm/ChuckCSS/dist/chuckcss.js"
148149
integrity="sha384-ADz7aKD9VLw6IBaYl8pwAckpQVIk9vjGsvvNtj3lPPWWgcgu9ZgvNnR+AP7oz7x+"
149-
crossorigin="anonymous">
150+
crossorigin="anonymous" defer>
150151
&lt;/script>
151152
</code>
152153
</pre>

0 commit comments

Comments
 (0)