|
8 | 8 | <title>Introduction - Codebase</title> |
9 | 9 |
|
10 | 10 | <link href="/codebase-5/prism/prism.css" rel="stylesheet"> |
11 | | - <link href="/codebase-5/dist/codebase.css?v=5.2.12" rel="stylesheet"> |
| 11 | + <link href="/codebase-5/dist/codebase.css?v=5.2.13" rel="stylesheet"> |
12 | 12 |
|
13 | 13 | <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg"> |
14 | 14 | <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png"> |
|
251 | 251 |
|
252 | 252 | <div class="grow"> |
253 | 253 | <div class="menu pr-1 flex flex-end sm:hidden-below"> |
254 | | - <div><a class="p-block t-gray-600 t-decoration-none t-semibold hover:t-decoration-underline hover:t-black t-semibold" href="/codebase-5/dist/codebase.css?v=5.2.12">Download CSS</a></div> |
| 254 | + <div><a class="p-block t-gray-600 t-decoration-none t-semibold hover:t-decoration-underline hover:t-black t-semibold" href="/codebase-5/dist/codebase.css?v=5.2.13">Download CSS</a></div> |
255 | 255 | <div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black t-semibold" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div> |
256 | 256 | </div> |
257 | 257 | </div> |
|
306 | 306 | <div id="side-menu-wrap" class="p-2 pb-6"> |
307 | 307 |
|
308 | 308 | <div class="mb-3 sm:hidden"> |
309 | | - <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.2.12">Download</a></div> |
| 309 | + <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.2.13">Download</a></div> |
310 | 310 | <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div> |
311 | 311 | </div> |
312 | 312 |
|
@@ -596,7 +596,7 @@ <h2 id="the-scss-library" tabindex="-1">The SCSS library</h2> |
596 | 596 | <p>You can incrementally add your web project’s distinctive design features after including Codebase in your HTML <code><head></code> (or including it whichever way you need to do it in your design platform). And you can customize Codebase itself.</p> |
597 | 597 | <p>The Codebase SCSS library contains a lot of <a href="https://github.com/codebase-frontend-library/codebase-5/tree/master/src/codebase/scss/00_setup/_default-variables.scss">default variables</a> that are under a <code>!default</code> flag – so that they can be overridden.</p> |
598 | 598 | <p>For example, here is the <a href="https://sass-lang.com/documentation/values/maps">Sass map</a> of the seven default theme colors in Codebase:</p> |
599 | | -<pre class="language-scss"><code class="language-scss"><span class="token property"><span class="token variable">$theme-color</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><br> <span class="token string">"blue"</span><span class="token punctuation">:</span> #1262ed<span class="token punctuation">,</span><br> <span class="token string">"green"</span><span class="token punctuation">:</span> #128a12<span class="token punctuation">,</span><br> <span class="token string">"amber"</span><span class="token punctuation">:</span> #f0b300<span class="token punctuation">,</span><br> <span class="token string">"red"</span><span class="token punctuation">:</span> #cf000f<span class="token punctuation">,</span><br> <span class="token string">"purple"</span><span class="token punctuation">:</span> #9400d3<span class="token punctuation">,</span><br> <span class="token string">"teal"</span><span class="token punctuation">:</span> #0080a2<span class="token punctuation">,</span><br> <span class="token string">"gray"</span><span class="token punctuation">:</span> #767676<span class="token punctuation">,</span><br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> |
| 599 | +<pre class="language-scss"><code class="language-scss"><span class="token property"><span class="token variable">$theme-color</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><br> <span class="token string">"blue"</span><span class="token punctuation">:</span> #1262ed<span class="token punctuation">,</span><br> <span class="token string">"green"</span><span class="token punctuation">:</span> #128a12<span class="token punctuation">,</span><br> <span class="token string">"amber"</span><span class="token punctuation">:</span> #f0b300<span class="token punctuation">,</span><br> <span class="token string">"red"</span><span class="token punctuation">:</span> #cf000f<span class="token punctuation">,</span><br> <span class="token string">"purple"</span><span class="token punctuation">:</span> #9400d3<span class="token punctuation">,</span><br> <span class="token string">"teal"</span><span class="token punctuation">:</span> #0d98ba<span class="token punctuation">,</span><br> <span class="token string">"gray"</span><span class="token punctuation">:</span> #767676<span class="token punctuation">,</span><br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> |
600 | 600 | <p>These colors are the same as those in the <code>$ui-color</code> map that sets the UI colors (for buttons, badges, and labels) but you can change that by editing the <code>$theme-color</code> map and preprocessing the SCSS.</p> |
601 | 601 | <p>You can override all these names and color codes, remove some or add more – to suit your branding – and the Codebase utility classes will all be generated using <code>each()</code> loops. So, you don’t need to figure out or input all the shades or each color.</p> |
602 | 602 | <p>Read more on <a href="/codebase-5/docs/1-getting-started/css-variables/">CSS variables in Codebase</a>.</p> |
@@ -641,7 +641,7 @@ <h2 id="browser-support" tabindex="-1">Browser support</h2> |
641 | 641 | <path d="M220 270.13 109.87 380 90 399.87l.13.13-.13.13 130 129.74 20.815-20.37L129.87 400 240.5 290.8 220 270.13Z" transform="translate(-90 -270.13)" fill="currentColor" /> |
642 | 642 | </svg> |
643 | 643 | <span class="inline-block mt-2 t-semibold"> |
644 | | - Codebase <span class="t-sm t-teal-300">v.5.2.12</span> |
| 644 | + Codebase <span class="t-sm t-teal-300">v.5.2.13</span> |
645 | 645 | </span> |
646 | 646 | </span> |
647 | 647 | </a> |
|
0 commit comments