<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Concise CSS—Give up the bloat. Stop tripping over your classes. Be Concise.</title><meta name="description" content="Concise is a lightweight front-end framework that provides a number of great features without the bloat."><meta name="viewport" content="width=device-width, initial-scale=1"><script src="//use.typekit.net/glq4bcp.js"></script><script>try{Typekit.load({ async: true });}catch(e){}</script><link rel="stylesheet" href="/styles/main.css"><link rel="icon" href="/favicon.png"></head><body class="home-page"><div container><header class="home-header"><a href="/"><img class="logo" src="/images/logo.svg" title="Concise CSS logo"></a><a class="docs" href="/documentation">Documentation</a><h1 class="title">Concise <em>CSS</em><small>Give up the bloat. Stop tripping over your classes. Be Concise.</small></h1><div class="version-box"><h3 class="title">Current versions:</h3><p class="version"><span>Core:</span><span class="js-currentVersion">v4.1.2</span></p><p class="version"><span>Utils:</span><span>v1.0.0</span></p><p class="version"><span>UI:</span><span>v0.2.1</span></p></div></header><main class="_bt1"><section grid><div column="4"><h2 class="_mb0">Getting started</h2></div><div column="8"><h3>Using NPM</h3><p>This is the prefered method to install Concise CSS, you will be able to customize and compile the source files with Concise CLI.</p><pre class="language-scss"><code>// Get Concise CSS

npm install concise.css

// Get Concise CLI

npm install -g concise-cli

// Import Concise CSS

@import "node_modules/concise.css/concise";

// Compile files

concisecss compile source.scss styles.css

</code></pre><h3>Using the CDN</h3><p>If you just want to try Concise CSS or if you do not have plans to customize the styles from the source code, then you can use our CDN.</p><pre class="language-markup"><code>&lt;!-- Minified - Latest version -->

&lt;link rel="stylesheet" href="https://cdn.concisecss.com/concise.min.css">

</code></pre></div></section><p class="_text-right"><a href="/documentation">See the Documentation</a></p><section grid><div column="4"><h2 class="_mb0">Why Concise CSS</h2></div><div column="8"><div grid><div column><h3>Bloat-Free</h3><p>No unnecessary styles are added so you can spend more time building and less time overriding.</p></div><div column><h3>Concise UI</h3><p>Do you need CSS components? We provide a basic UI kit for Concise CSS as an add-on.</p></div></div><div grid><div column><h3>Concise Utils</h3><p>We also provide utility classes for rapid prototyping and context-dependent styles.</p></div><div column><h3>Sass + PostCSS</h3><p>The usual features from Sass with some custom additions using PostCSS.</p></div></div><div grid><div column><h3>Design-Oriented</h3><p>A framework built with design in mind. Get better results from the beginning with less code.</p></div><div column><h3>Easy to use</h3><p>Concise has a small learning curve; the simplicity of the styles helps to get started faster.</p></div></div></div></section><p class="_text-right"><a href="documentation/#why">Read the introduction</a></p><section class="_ptm" grid><div column="4"><h2 class="_mt0">Showcase<small>Websites made with Concise CSS</small></h2></div><div column="8"><div grid><div column><a class="_clear-link" href="https://jameskolce.com"><img class="_fluid-img" src="/images/showcase/jameskolce.com.png" alt="Jameskolce.com"></a></div><div column><a class="_clear-link" href="https://brain.jameskolce.com"><img class="_fluid-img" src="/images/showcase/brain.jameskolce.com.png" alt="Brain.jameskolce.com"></a></div></div><div class="_mts" grid><div column><a class="_clear-link" href="http://gdquest.com/"><img class="_fluid-img" src="/images/showcase/gdquest.com.png" alt="GDquest.com"></a></div><div column><a class="_clear-link" href="http://dbhs.tech/"><img class="_fluid-img" src="/images/showcase/dbhs.tech.png" alt="dbhs.tech"></a></div></div><div class="_mts" grid><div column><a class="_clear-link" href="http://xyentific.com/"><img class="_fluid-img" src="/images/showcase/xyentific.com.png" alt="xyentific.com"></a></div><div column><a class="_clear-link" href="https://stocksandwich.com/"><img class="_fluid-img" src="/images/showcase/stocksandwich.com.png" alt="stocksandwich.com"></a></div></div><div class="_mts" grid><div column><a class="_clear-link" href="https://acaudio.co.uk"><img class="_fluid-img" src="/images/showcase/acaudio.co.uk.png" alt="acaudio.co.uk"></a></div><div column><a class="_clear-link" href="http://aclighting.com"><img class="_fluid-img" src="/images/showcase/aclighting.com.png" alt="aclighting.com"></a></div></div><div class="_mts" grid><div column="6"><a class="_clear-link" href="https://nbg.nl"><img class="_fluid-img" src="/images/showcase/nbg.nl.png" alt="nbg.nl"></a></div></div></div></section><p class="_text-right"><a class="_clear-link" href="https://github.com/ConciseCSS/concisecss.github.io/issues/new">Submit your website</a></p></main><footer class="main-footer"><p>Sponsored by <a href="https://www.keycdn.com/">KeyCDN</a>

<br>

&copy; <script>document.write(new Date().getFullYear());</script>

<a href="https://jameskolce.com">James Kolce</a>,

<a href="http://keenanpayne.com">Keenan Payne</a> &

<a href="https://github.com/ConciseCSS/concise.css/graphs/contributors">Concise CSS Contributors</a>.

</p><p class="links-box"><a class="link" href="https://github.com/ConciseCSS/concise.css/issues">Support</a><a class="link" href="https://github.com/ConciseCSS/concise.css/releases">Changelog</a><a class="link" href="https://github.com/concisecss">Github</a><a class="link" href="http://twitter.com/concisecss">Twitter</a><a class="link" href="http://facebook.com/concisecss">Facebook</a></p></footer></div><script src="/scripts/prism.js"></script><script src="/scripts/main.js"></script><script>window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;

ga('create','UA-23449205-5','auto');ga('send','pageview')

</script><script src="https://www.google-analytics.com/analytics.js" async defer></script></body></html>