1<!DOCTYPE html> 2<html lang="en-US"> 3 <head> 4 <meta charset="utf-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=53130a1d-55b2-4154-bdb8-3a01cb2c79db 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <title>Less | UIkit 3.x Documentation (as of v3.15.0)</title> 10 <meta name="generator" content="VuePress 1.8.2"> 11 <link rel="icon" href="/images/favicon.png"> 12 <meta name="description" content="Searchable UIkit documentation"> 13 14 <link rel="preload" href="/assets/css/0.styles.c8e23b86.css" as="style"><link rel="preload" href="/assets/js/app.28ee8114.js" as="script"><link rel="preload" href="/assets/js/2.a1624ba5.js" as="script"><link rel="preload" href="/assets/js/48.4802b2dc.js" as="script"><link rel="prefetch" href="/assets/js/10.81bcef61.js"><link rel="prefetch" href="/assets/js/11.a456de51.js"><link rel="prefetch" href="/assets/js/12.8b17d73d.js"><link rel="prefetch" href="/assets/js/13.aeca1c23.js"><link rel="prefetch" href="/assets/js/14.13ad5959.js"><link rel="prefetch" href="/assets/js/15.208a4ad3.js"><link rel="prefetch" href="/assets/js/16.3abab1b8.js"><link rel="prefetch" href="/assets/js/17.3e96fbe5.js"><link rel="prefetch" href="/assets/js/18.9168fdc5.js"><link rel="prefetch" href="/assets/js/19.7859f3f3.js"><link rel="prefetch" href="/assets/js/20.518c153d.js"><link rel="prefetch" href="/assets/js/21.600cac34.js"><link rel="prefetch" href="/assets/js/22.bef9d6e6.js"><link rel="prefetch" href="/assets/js/23.bc54a051.js"><link rel="prefetch" href="/assets/js/24.e9dc8614.js"><link rel="prefetch" href="/assets/js/25.09a3ed63.js"><link rel="prefetch" href="/assets/js/26.2397d888.js"><link rel="prefetch" href="/assets/js/27.92e4a8cf.js"><link rel="prefetch" href="/assets/js/28.fa85087c.js"><link rel="prefetch" href="/assets/js/29.b21fcbe3.js"><link rel="prefetch" href="/assets/js/3.2ee1ba6b.js"><link rel="prefetch" href="/assets/js/30.b74a30e7.js"><link rel="prefetch" href="/assets/js/31.ac593d59.js"><link rel="prefetch" href="/assets/js/32.dd498d66.js"><link rel="prefetch" href="/assets/js/33.2f80285c.js"><link rel="prefetch" href="/assets/js/34.5d232c7c.js"><link rel="prefetch" href="/assets/js/35.551b876a.js"><link rel="prefetch" href="/assets/js/36.db47a963.js"><link rel="prefetch" href="/assets/js/37.ab39913d.js"><link rel="prefetch" href="/assets/js/38.33063fbc.js"><link rel="prefetch" href="/assets/js/39.5b78e58c.js"><link rel="prefetch" href="/assets/js/4.b37b1c6e.js"><link rel="prefetch" href="/assets/js/40.c0216a91.js"><link rel="prefetch" href="/assets/js/41.b395f0b3.js"><link rel="prefetch" href="/assets/js/42.194c5603.js"><link rel="prefetch" href="/assets/js/43.fd97b02e.js"><link rel="prefetch" href="/assets/js/44.dc93f2f2.js"><link rel="prefetch" href="/assets/js/45.c32c36ed.js"><link rel="prefetch" href="/assets/js/46.76336d72.js"><link rel="prefetch" href="/assets/js/47.c39398f9.js"><link rel="prefetch" href="/assets/js/49.417c2101.js"><link rel="prefetch" href="/assets/js/5.3ea9c5a4.js"><link rel="prefetch" href="/assets/js/50.124de526.js"><link rel="prefetch" href="/assets/js/51.db29daf0.js"><link rel="prefetch" href="/assets/js/52.a0b60f45.js"><link rel="prefetch" href="/assets/js/53.7d749ec7.js"><link rel="prefetch" href="/assets/js/54.56ac7883.js"><link rel="prefetch" href="/assets/js/55.be5407c4.js"><link rel="prefetch" href="/assets/js/56.d45f5c98.js"><link rel="prefetch" href="/assets/js/57.9d651230.js"><link rel="prefetch" href="/assets/js/58.15e7d740.js"><link rel="prefetch" href="/assets/js/59.dfa76549.js"><link rel="prefetch" href="/assets/js/6.d230f3d5.js"><link rel="prefetch" href="/assets/js/60.6dd0298d.js"><link rel="prefetch" href="/assets/js/61.1b0b9f92.js"><link rel="prefetch" href="/assets/js/62.3391f9c3.js"><link rel="prefetch" href="/assets/js/63.e1c12639.js"><link rel="prefetch" href="/assets/js/64.546e8803.js"><link rel="prefetch" href="/assets/js/65.73df344c.js"><link rel="prefetch" href="/assets/js/66.a8e7bb57.js"><link rel="prefetch" href="/assets/js/67.01aa9d7c.js"><link rel="prefetch" href="/assets/js/68.3e669e15.js"><link rel="prefetch" href="/assets/js/69.a601c1e5.js"><link rel="prefetch" href="/assets/js/7.523c6b20.js"><link rel="prefetch" href="/assets/js/70.6e9aeff4.js"><link rel="prefetch" href="/assets/js/71.86c46b55.js"><link rel="prefetch" href="/assets/js/72.100be650.js"><link rel="prefetch" href="/assets/js/73.1fa65ded.js"><link rel="prefetch" href="/assets/js/74.bf5df972.js">
14<link rel="prefetch" href="/assets/js/75.1559de5e.js"><link rel="prefetch" href="/assets/js/76.63068614.js"><link rel="prefetch" href="/assets/js/77.4d5b285c.js"><link rel="prefetch" href="/assets/js/78.e3f44145.js"><link rel="prefetch" href="/assets/js/79.78555498.js"><link rel="prefetch" href="/assets/js/8.614be5ec.js"><link rel="prefetch" href="/assets/js/80.8449ed3f.js"><link rel="prefetch" href="/assets/js/81.fb5503e5.js"><link rel="prefetch" href="/assets/js/82.a2869969.js"><link rel="prefetch" href="/assets/js/83.28816ea2.js"><link rel="prefetch" href="/assets/js/84.1a7feeec.js"><link rel="prefetch" href="/assets/js/85.28f6caa9.js"><link rel="prefetch" href="/assets/js/86.4df754eb.js"><link rel="prefetch" href="/assets/js/87.5919fc1f.js"><link rel="prefetch" href="/assets/js/88.94c17aa5.js"><link rel="prefetch" href="/assets/js/89.43297fc4.js"><link rel="prefetch" href="/assets/js/9.7bba49e8.js"><link rel="prefetch" href="/assets/js/90.72bd5b63.js"><link rel="prefetch" href="/assets/js/91.302e47a9.js"><link rel="prefetch" href="/assets/js/92.bab944da.js"><link rel="prefetch" href="/assets/js/93.68f5fcaa.js"><link rel="prefetch" href="/assets/js/94.476f6f27.js"><link rel="prefetch" href="/assets/js/95.a9665d7f.js">
14<link rel="prefetch" href="/assets/js/96.aab13972.js"><link rel="prefetch" href="/assets/js/97.db586d7a.js"> 15 <link rel="stylesheet" href="/assets/css/0.styles.c8e23b86.css"> 16 </head> 17 <body> 18 <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/uikit-logo-black.svg" alt="UIkit 3.x Documentation (as of v3.15.0)" class="logo"> <span class="site-name can-hide">UIkit 3.x Documentation (as of v3.15.0)</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"> 19 Home 20</a></div><div class="nav-item"><a href="https://getuikit.com/docs/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external"> 21 Official UIkit Docs 22 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/lesaff/uikit-docs" target="_blank" rel="noopener noreferrer" class="nav-link external"> 23 Github 24 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"> 25 Home 26</a></div><div class="nav-item"><a href="https://getuikit.com/docs/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external"> 27 Official UIkit Docs 28 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/lesaff/uikit-docs" target="_blank" rel="noopener noreferrer" class="nav-link external"> 29 Github 30 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Getting Started</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a class='sidebar-link' href='/introduction'>Introduction</a></li><li><a href="/installation.html" class="sidebar-link">Installation</a></li><li><a aria-current='page' class='active sidebar-link' href='/less'>Less</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a class='sidebar-link' href='/less#how-to-build'>How to build</a></li><li class="sidebar-sub-header"><a class='sidebar-link' href='/less#create-a-uikit-theme'>Create a UIkit theme</a></li><li class="sidebar-sub-header">
30<a class='sidebar-link' href='/less#how-to-structure-your-theme'>How to structure your theme</a></li></ul></li><li><a class='sidebar-link' href='/sass'>Sass</a></li><li><a class='sidebar-link' href='/javascript'>JavaScript</a></li><li><a class='sidebar-link' href='/webpack'>Webpack</a></li><li><a class='sidebar-link' href='/custom-icons'>Custom icons</a></li><li><a class='sidebar-link' href='/avoiding-conflicts'>Avoiding conflicts</a></li><li><a class='sidebar-link' href='/rtl'>Right-to-left support</a></li><li><a class='sidebar-link' href='/migration'>Migration</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1>Less</h1> <p class="uk-text-lead">Learn how to modify the UIkit styling and create your own theme with Less.</p> <p>When you have <a href="/installation.html">installed UIkit</a> with Less sources, you can compile it and add your own custom theme. <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> is the language that the UIkit styles are written in. This allows you to include customizations in the build process, rather than manually overwriting a lot of CSS rules by hand.</p> <hr> <h2 id="how-to-build"><a href="#how-to-build" class="header-anchor">#</a> How to build</h2> <p>The Less source files allow you to customize UIkit. To use the customized version on your website, you need to compile the Less sources into CSS. There are basically two approaches available to you: Set up your own build process or use the build scripts included in UIkit.</p> <h3 id="use-your-own-build-process"><a href="#use-your-own-build-process" class="header-anchor">#</a> Use your own build process</h3> <p>To include UIkit in your project's build workflow, you need to import the core UIkit styles (<code>uikit.less</code>) or UIkit with its default theme (<code>uikit.theme.less</code>) into your project's own Less file. This main Less file than needs to be compiled in any way you like. Read the <a href="http://lesscss.org/usage/" target="_blank" rel="noopener noreferrer">official Less docs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> if you are unsure how to compile Less.</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// Import UIkit default theme (or uikit.less with only core styles)</span> 31<span class="token variable">@import</span> <span class="token string">"node_modules/uikit/src/less/uikit.theme.less"</span><span class="token punctuation">;</span> 32 33<span class="token comment">// Your custom code goes here, e.g. mixins, variables.</span> 34<span class="token comment">// See "how to create a theme" below for more info.</span> 35</code></pre></div><h3 id="use-included-build-process"><a href="#use-included-build-process" class="header-anchor">#</a> Use included build process</h3> <p>If you want to change the styling of UIkit, you can use its build process to create a differently themed version of the CSS, that you can then include in your project. That way you do not need to set up your own build process.</p> <p>
35To include your own Less theme in the build process, create a <code>/custom</code> directory, which will contain all of your custom themes.</p> <p><strong>Note</strong> The <code>/custom</code> folder is listed in <code>.gitignore</code>, which prevents your custom files from being pushed into the UIkit repository. You might also have the <code>/custom</code> directory as your own Git repository. That way your theme files are under version control without interfering with the UIkit files.</p> <p>Create a file <code>/custom/my-theme.less</code> (or any other name) and import the core UIkit styles (<code>uikit.less</code>) or UIkit with its default theme (<code>uikit.theme.less</code>).</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// Import UIkit default theme (or uikit.less with only core styles)</span> 36<span class="token variable">@import</span> <span class="token string">"../src/less/uikit.theme.less"</span><span class="token punctuation">;</span> 37 38<span class="token comment">// Your custom code goes here, e.g. mixins, variables.</span> 39<span class="token comment">// See "how to create a theme" below for more info.</span> 40</code></pre></div><p>To compile UIkit and your custom theme into CSS, run the yarn task <code>compile</code> .</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token comment"># Run once to install all dependencies</span> 41<span class="token function">yarn</span> <span class="token function">install</span> 42 43<span class="token comment"># Compile all source files including your theme</span> 44<span class="token function">yarn</span> compile 45 46<span class="token comment"># Watch files and compile automatically everytime a file changes</span> 47<span class="token function">yarn</span> <span class="token function">watch</span> 48</code></pre></div><p>The generated CSS files will be located in the <code>/dist/css</code> folder.</p> <p><strong>Note</strong> The custom theme is also available in the test files, just navigate your browser to the index of the <code>/tests</code> directory and select your theme from the Dropdown menu.</p> <hr> <h2 id="create-a-uikit-theme"><a href="#create-a-uikit-theme" class="header-anchor">#</a> Create a UIkit theme</h2> <p>When you have set up a file to put in your own Less code, you can get started to theme UIkit the way you want. If you have never used Less before, check out the <a href="http://lesscss.org/features/" target="_blank" rel="noopener noreferrer">language features<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. When working with the UIkit Less sources, we have a few recommendations.</p> <h3 id="use-variables"><a href="#use-variables" class="header-anchor">#</a> Use variables</h3> <p>A lot of customization is possible by simply overwriting the values of already declared variables. You can find all variables for each component inside their Less files of the framework and override them in your theme.</p> <p>First, find a Less variable you want to change inside the UIkit source. For example, the global link color is defined in <code>/src/less/components/variables.less</code>:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// default value</span> 49<span class="token variable">@global-link-color<span class="token punctuation">:</span></span> #4091D2<span class="token punctuation">;</span> 50</code></pre></div><p>Then, overwrite the default by setting a custom value inside your own file, i.e. in <code>/custom/my-theme.less</code>:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// new value</span> 51<span class="token variable">@global-link-color<span class="token punctuation">:</span></span> #DA7D02<span class="token punctuation">;</span> 52</code></pre></div><p>The compiled CSS will then have your custom value. But not only has the global link color changed. Many components make use of the <code>@global-*</code> variables to infer their own colors, and just adapt them slightly. That way you can rapidly create a theme by just changing some global variables.</p> <h3 id="use-hooks"><a href="#use-hooks" class="header-anchor">#</a> Use hooks</h3> <p>To prevent overhead selectors, we use Mixins from <a href="http://lesscss.org" target="_blank" rel="noopener noreferrer">Less<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
52<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, which hook into predefined selectors from the UIkit source and apply additional properties. Selectors don't have to be repeated throughout all documents and global changes can be made much more easily.</p> <p>First, find a rule that you want to extend by looking through the component's Less file, for example <code>/src/less/components/card.less</code> for the Card component:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// CSS rule</span> 53<span class="token selector">.uk-card</span> <span class="token punctuation">{</span> 54 <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> 55 <span class="token property">box-sizing</span><span class="token punctuation">:</span> border<span class="token operator">-</span>box<span class="token punctuation">;</span> 56 57 <span class="token comment">// mixin to allow adding new declarations</span> 58 .<span class="token function">hook-card</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 59<span class="token punctuation">}</span> 60</code></pre></div><p>
60Then, inject additional CSS by using the hook inside your own Less file, i.e. in <code>/custom/my-theme.less</code>:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// mixin to add new declaration</span> 61<span class="token selector">.hook-card()</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token punctuation">}</span> 62</code></pre></div><h3 id="miscellaneous-hooks"><a href="#miscellaneous-hooks" class="header-anchor">#</a> Miscellaneous hooks</h3> <p>Should there be neither a variable nor a hook available, you can also create your own selector. To do so, use the <em>.hook-card-misc</em> hook and write your selector inside. This will sort your new selector to the right place of the compiled CSS file. Just add the following lines to your own Less file, i.e. to <code>/custom/my-theme.less</code>:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// misc mixin</span> 63<span class="token selector">.hook-card-misc()</span> <span class="token punctuation">{</span> 64 65 <span class="token comment">// new rule</span> 66 <span class="token selector">.uk-card a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span> <span class="token punctuation">}</span> 67<span class="token punctuation">}</span> 68</code></pre></div><h3 id="disable-inverse-component"><a href="#disable-inverse-component" class="header-anchor">#</a> Disable inverse component</h3> <p>The Inverse component includes additional styles to implement the flexible inverse behaviour. If your project does not make use of these styles, you can leave them out when compiling Less. This allows smaller file sizes of the compiled CSS. To do so, search for Less variables containing <code>color-mode</code> (e.g. <code>@card-primary-color-mode</code>), and set them to <code>none</code>.</p> <p>To disable the inverse styles completely, set:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token variable">@inverse-global-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 69</code></pre></div><p>You can also disable the inverse mode for specific components:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// Card</span> 70<span class="token variable">@card-primary-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 71<span class="token variable">@card-secondary-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 72 73<span class="token comment">// Navbar</span> 74<span class="token variable">@navbar-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 75 76<span class="token comment">// Off-canvas</span> 77<span class="token variable">@offcanvas-bar-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 78 79<span class="token comment">// Overlay</span> 80<span class="token variable">@overlay-primary-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 81 82<span class="token comment">// Section</span> 83<span class="token variable">@section-primary-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 84<span class="token variable">@section-secondary-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 85 86<span class="token comment">// Tile</span> 87<span class="token variable">@tile-primary-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 88<span class="token variable">@tile-secondary-color-mode<span class="token punctuation">:</span></span> none<span class="token punctuation">;</span> 89</code></pre></div>
89<h2 id="how-to-structure-your-theme"><a href="#how-to-structure-your-theme" class="header-anchor">#</a> How to structure your theme</h2> <p>In the examples above, we have added all custom rules directly to <code>/custom/my-theme.less</code>. When you change a few variables but are happy with the rest, this is perfectly fine. However, for larger customizations, we recommend to only use this file as an entry point for the Less compiler. You should better sort all rules into a single file per component inside of a subfolder. This is the same structure that you can find in the default theme <code>/src/less/uikit.theme.less</code>.</p> <p><strong>Note</strong> The example assumes you are building a theme in the <code>/custom</code> directory of the full UIkit project. You can adapt these paths if you have set up your own build process.</p> <div class="language-html extra-class"><pre class="language-html"><code>custom/ 90 91 <span class="token comment"><!-- entry file for Less compiler --></span> 92 my-theme.less 93 94 <span class="token comment"><!-- folder with single Less files --></span> 95 my-theme/ 96 97 <span class="token comment"><!-- imports all components in this folder --></span> 98 _import.less 99 100 <span class="token comment"><!-- one file per customized component --></span> 101 accordion.less 102 alert.less 103 ⦠104</code></pre></div><p>The entry point for the Less compiler, <code>/custom/my-theme.less</code>:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// Core</span> 105<span class="token variable">@import</span> <span class="token string">"../../src/less/uikit.less"</span><span class="token punctuation">;</span> 106 107<span class="token comment">// Theme</span> 108<span class="token variable">@import</span> <span class="token string">"my-theme/_import.less"</span><span class="token punctuation">;</span> 109</code></pre></div><p>Your theme folder has one file which imports all single component customizations, <code>custom/my-theme/_import.less</code>:</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token variable">@import</span> <span class="token string">"accordion.less"</span><span class="token punctuation">;</span> 110<span class="token variable">@import</span> <span class="token string">"alert.less"</span><span class="token punctuation">;</span> 111<span class="token comment">// â¦</span> 112</code></pre></div><p><strong>Note</strong> With this setup you can remove the import statements of components you do not use. This will produce smaller CSS. Just make sure to preserve the correct import order as listed in <a href="https://github.com/uikit/uikit/blob/develop/src/less/components/_import.less" target="_blank" rel="noopener noreferrer">src/less/components/_import.less<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev"> 113 â 114 <a href="/installation.html" class="prev"> 115 Installation 116 </a></span> <span class="next"><a href='/sass'> 117 Sass 118 </a> 119 â 120 </span></p></div> </main></div><div class="global-ui"></div></div> 121
121<script src="/assets/js/app.28ee8114.js" defer></script>
121<script src="/assets/js/2.a1624ba5.js" defer></script>
121<script src="/assets/js/48.4802b2dc.js" defer></script>
121 122 </body> 123</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.