1. Introduction

Concise CSS provides a solid foundation to stylize your website. It offers an alternative to frameworks like Bootstrap and Foundation, with the difference that Concise only includes the minimum styles required. That does not mean that the features are limited; is possible to use add-ons on top of the core to extend the functionality as required.

The core of the framework only includes styles for native HTML elements. Components and utilities are provided as optional add-ons, Concise UI and Concise Utils, respectively.

Concise CSS is written using a custom CSS preprocessor, built on top of Sass and some PostCSS plugins; this means that you can still write Sass code as usual, but you can also enjoy other custom features.

1.1 Why Concise CSS

Concise CSS is a hybrid of the most common practices in web development. The small core allows the inclusion of custom styles and add-ons without the bloat or excessive overwrites. The UI add-on provides pre-made components as the other well-known frameworks, and the Utils add-on provides utility classes to quickly make prototypes.

Also, we have adapted the framework to work with the RSCSS coding convention which provides a solid foundation to write website styles, separating them into components, elements, variants, and helpers. Both Concise UI and Concise Utils work well with RSCSS.

The core of the framework doesn't include any classes; it only provides normalization styles and the grid system—which unlike other grid systems—uses attributes instead of classes, providing a cleaner syntax and avoids conflicts in case you need to use a different one.

Because the current features of CSS are sometimes not enough, we have added more. A worth mentioning addition is the lh unit that is translated to rems using the root line-height as the base value.

1.2 Language additions

The Concise CLI is a wrapper for the Sass compiler and some PostCSS plugins; this allows us to add custom features with ease of use. You can still write usual Sass code plus the following:

lh Unit

The lh unit is meant to be used for spacing rules. A lh equals the line height of the :root element and is translated to a rem unit. Example:

:root {
  line-height: 1.5;
}

section {
  margin-bottom: 1lh;
  padding-top: .5lh;
}

In the previous example, section will have a margin-bottom with 1 times the line height of the :root element, and the padding-top will have half of the size.

In this way, we can preserve the vertical rhythm. Using a constant that is present in any Concise stylesheet and that provides aesthetic results by its nature.

The previous example—after compilation—will be turned into the following:

:root {
  line-height: 1.5;
}

section {
  margin-bottom: 1.5rem;
  padding-top: 0.75rem;
}

Custom Media Queries

Usually, when you define media queries, you select a certain breakpoint from predefined sizes. With preprocessors like Sass this can be accomplished with simple variables, but in Concise we have a specific way to define breakpoints using custom media queries, making explicit that we are dealing with viewport sizes and not other types of variables.

The following custom media queries are predefined and ready to use. This is also the way you define new ones:

@custom-media --extra-small (width <= 480px);
@custom-media --small (width >= 480px);
@custom-media --medium (width >= 768px);
@custom-media --large (width >= 960px);
@custom-media --extra-large (width >= 1100px);
@custom-media --only-small (480px < width <= 768px);
@custom-media --only-medium (768px < width <= 980px);
@custom-media --only-large (980px < width <= 1100px);

Their use is similar to simple variables, but prefixed with -- instead of $. The following is an example:

@media (--medium) {
  // Styles for medium size devices and up (bigger than 768px)
}

@media ($breakpoint) {
  // The same as --small (dy default)
}

Concise also includes a $breakpoint variable with the value of --small by default. It’s used primarily in the grid system, so you can change it if you need to adjust the size where columns are collapsed.

Min/Max helpers for Media Queries

You might have noticed the use of comparison symbols (< > >= <=) instead of the keywords max-width and min-width in the custom media queries section. Well, we have added those to improve the usability of media queries when using viewport sizes. Those can be used both in custom media queries as in normal media queries in your stylesheets.

1.3 Installation

There are 3 different ways to install Concise CSS in your website, although the recommended one is to use NPM.

Using the CDN

If you just want to try Concise CSS or if you do not have plans to customize the styles, you can use our CDN. This is the easier way to get started.

<!-- Normal - Latest version -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise.css">

<!-- Minified - Latest version -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise.min.css">

That is for the latest version, if you want to use a specific one you can add something like the following:

<!-- Normal - Specific version -->
<link rel="stylesheet" href="https://cdn.concisecss.com/v4.1/concise.css">

<!-- Minified - Specific version -->
<link rel="stylesheet" href="https://cdn.concisecss.com/v4.1/concise.min.css">

Install with NPM

Execute the following command to install Concise CSS from NPM. If you are new to NPM, you can check their documentation first.

npm install concise.css

Then you can include the main file inside your project:

//
// main.scss
// ---------

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

Copy the Source Files

Finally, if you prefer, you can just copy the framework files to your project folder.

You can download the latest version from Github from this link, and place the files wherever you need them.

1.4 The Concise CLI

To build the source files, you need to install the Concise CLI globally:

npm install -g concise-cli

You won’t need to install the CLI globally if you plan to use it within NPM scripts.

Once it is installed, you can compile source files with the concisecss compile command:

concisecss compile input.scss output.css

When compiling the source code, Autoprefixer will automatically add the required browser prefixes.

1.5 Using Add-ons

The core styles of Concise CSS can be extended using add-ons. They are just separate packages that use the settings from the core.

Currently, there are two official add-ons: Concise UI and Concise Utils. The first one includes a series of UI components that can be used directly. The second one contains single-responsibility classes that you can use for quick prototyping.

You can check all the styles available in those add-ons in their respective pages: Concise UI and Concise Utils.

From the CDN

As with the core styles, you can include the styles from the add-ons directly using our CDN.

<!-- CONCISE UI - Latest version -->

<!-- Normal -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise-ui/concise-ui.css">

<!-- Minified -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise-ui/concise-ui.min.css">


<!-- CONCISE UI - Specific version -->

<!-- Normal -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise-ui/v0.2/concise-ui.css">

<!-- Minified -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise-ui/v0.2/concise-ui.min.css">

<!-- CONCISE UTILS - Latest version -->

<!-- Normal -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise-utils/concise-utils.css">

<!-- Minified -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise-utils/concise-utils.min.css">


<!-- CONCISE UTILS - Specific version -->

<!-- Normal -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise-utils/v1.0/concise-utils.css">

<!-- Minified -->
<link rel="stylesheet" href="https://cdn.concisecss.com/concise-utils/v1.0/concise-utils.min.css">

With NPM

You can also install the add-ons using NPM:

npm install concise-utils

npm install concise-ui

Then include them in your main file as the other styles:

// Concise Utils
@import "node_modules/concise-utils/concise-utils"

// Concise UI
@import "node_modules/concise-ui/concise-ui"

Downloading the Packages

Those packages are also available to download from Github, using the following links: Download Concise UI and Download Concise Utils. Then you have to include the files in your project as you need them.

1.6 Coding Conventions

Concise CSS uses RSCSS, a set of simple ideas to guide your process of building maintainable CSS. Although it’s not mandatory to follow those rules in your projects, you could get a more predictable code base by using it.

Is recommended to read those guidelines before working with Concise CSS to understand how this framework itself is organized and to help you to organize your projects.

1.7 Examples

Soon…