2. The Core of Concise CSS

The Core is composed entirely of styles for native HTML elements, the grid system, and the default settings. When you include Concise on your project, you won't have any classes available; it will just provide a foundation to build your website however you like to do it.

Two elements compose the base styles: normalization using a custom version of sanitize.css and Concise-specific styles for native HTML elements, where we provide better defaults on top of the normalization ones.

As in the previous version, the grid system uses attributes instead of classes offering a more intuitive way to build layouts. But if you prefer to use another grid system you can turn off the default one by setting the variable $use-atgrid to false.

Finally, the core of Concise CSS provides a set of settings that will help you to build your website quickly: Font variables, spacing rules, custom media queries, a type scale function, a color palette, and other small things. All the key settings you will need when building any website.

2.1 Settings

Concise CSS provides a series of configuration variables that are used in the core and in the add-ons.

For example, suppose that you have customized your settings with a new color palette, now if you add the Concise UI add-on, it will use—without any further modifications—your new colors. The same will happen for all the other settings when you include add-ons; they will use your custom settings without any further changes.

Here is the complete file with the default settings:

//
// Base
// --------------------------------------------------

// Font size for small devices
$font-size: 16;

// Font size for big devices
$font-size-secondary: 18;

// Tracking
$letter-spacing: 0.05em;

// Font families
$font-primary: "Helvetica", "Arial", sans-serif;
$font-secondary: "Helvetica", "Arial", sans-serif;
$font-mono: "Consolas", monospace;
$font-print-primary: "Georgia", "Times New Roman", "Times", serif;
$font-print-secondary: "Georgia", "Times New Roman", "Times", serif;

// Enable margins to all the elements
// except the first one in each nesting level
$automargin: true;

// ^ How much margin for those elements
$block-margin: 1lh;

// Transition duration
$transition-duration: 150ms;

// Custom media queries
// Use as @media (--medium) { … }
@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);

// Spacing variables
$spacing-xs: 0.5lh;
$spacing-s:  1lh;
$spacing-m:  2lh;
$spacing-l:  3lh;
$spacing-xl: 4lh;

//
// Type Scale
// --------------------------------------------------

// Suggested ratios
// Source: http://type-scale.com/
$_minor-second:     1.067;
$_major-second:     1.125;
$_minor-third:      1.200;
$_major-third:      1.250;
$_perfect-fourth:   1.333;
$_augmented-fourth: 1.414;
$_perfect-fifth:    1.500;
$_golden-ratio:     1.618;

// Ratio for primary scale
$scale-ratio: $_minor-third;

// Ratio for secondary scale
$scale-ratio-secondary: $_perfect-fourth;

//
// Grid
// --------------------------------------------------

// Enable grid styles
$enable-grid: true;

// Enable x-*, sm-*, md-*, lg-*, xl-* columns and offsets
$full-grid: false;

// Max width for container
$container-width: 1200px;

// Gutter size
$gutter: 2rem;

// Number of columns in a row
$num-columns: 12;

// Prefix for attributes
$prefix: '';

// Create columns and offsets above this breakpoint
$breakpoint: --small;

//
// Color Palette
// --------------------------------------------------
// Use the getColor() function to use those values in
// your stylesheets. Example: getColor(base, primary)

$colors: (
  base: (
    "primary":   #C65146,
    "selection": #EBE1D3,
    "lines":     #DCDCDC
  ),

  text: (
    "primary":   #444,
    "secondary": #777,
    "heading":   #222,
    "inverted":  white
  ),

  background: (
    "dark":  #32373d,
    "light": #f5f5f5,
    "body":  white
  ),

  state: (
    "muted":   #eee,
    "success": #10a887,
    "warning": #F17F42,
    "error":   #da3c3c
  ),

  blue: (
    "darker":  #1573b6,
    "dark":    #1e80c6,
    "base":    #2b90d9,
    "light":   #3fa2e9,
    "lighter": #4eb1f9
  ),

  green: (
    "darker":  #089073,
    "dark":    #0b9d7d,
    "base":    #10a887,
    "light":   #1eb896,
    "lighter": #28ceaa
  ),

  red: (
    "darker":  #653131,
    "dark":    #b73333,
    "base":    #da3c3c,
    "light":   #f25a5a,
    "lighter": #fa8181
  ),

  gray: (
    "darker":  #333333,
    "dark":    #4d4d4d,
    "base":    #666666,
    "light":   #808080,
    "lighter": #999999
  )
);

You can just copy the previous code block in a _settings.scss file and include it in your project

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

// Concise Settings
@import "settings.scss";

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

The changes are extended to all the styles, after the compilation.

2.2 Typography

Typography is probably the most important element in web design, so we have added some features specially designed to get good results in this area.

Font families

Concise CSS includes five variables for font families:

Sometimes you will need to use those in certain elements when you want a different style; you can do so like this:

.myElement {
  font-family: $font-secondary;
}

Base font sizes

You can set two different base sizes for your text. One for large displays and the other for small ones.

When the screen size is smaller than the value of the $breakpoint variable (--small custom media query), it will use $font-size, and when is bigger it will use $font-size-secondary.

Type Scale

Concise CSS uses a type scale whenever we have to set font sizes. For this, we use the typeScale() function, it will receive an integer starting from 1 and will return the size in rem with that position.

The smaller size in the scale starts with 1. The second size (2) is equal to 1rem which is the font size in the root. The size will be increasing proportionally to the base font-size as you increase the input number.

As a reference, the following code shows the sizes of the headings using the type scale provided by default.

h1 { font-size: typeScale(6); }
h2 { font-size: typeScale(5); }
h3 { font-size: typeScale(4); }
h4 { font-size: typeScale(3); }
h5 { font-size: typeScale(2); }
h6 { font-size: typeScale(1); }

As you can see, we start with the smaller size for the h6 elements and we go up gradually until h1.

By default, the typeScale() function will use a ratio defined in the $scale-ratio variable, which is $_minor-third and has a value of 1.2.

You have eight available ratios ready to use, here is the list:

$_minor-second:     1.067
$_major-second:     1.125
$_minor-third:      1.200
$_major-third:      1.250
$_perfect-fourth:   1.333
$_augmented-fourth: 1.414
$_perfect-fifth:    1.500
$_golden-ratio:     1.618

So you can use any of those in the $scale-ratio variable. Also, you can directly use the ratio you want, however, is recommended the available ones that will get you beautiful results from the beginning.

You can visualize those ratios in this website: Type-scale.com.

We strongly recommend to always use the scale when setting up font sizes. If you have doubts about what ratio use, ask your designer, and if your designer is not using ratios then recommend him/her to do so.

Sometimes just one scale might not be enough. Concise CSS also provides a secondary scale; you can use it by passing a second argument to the typeScale() function with anther ratio.

.myElement {
  font-size: typeScale(3, $scale-ratio-secondary);
}

We provide a default secondary ratio using $_perfect-fourth by default, which has a value of 1.333. However, we recommend sticking to just one scale in a project unless you absolutely need more.

To customize the secondary scale, you can adjust the ratio in the $scale-ratio-secondary variable with any value you want, however, we also recommend to use one of the suggested ratios mentioned previously.

Letter spacing

We recommend increasing the letter spacing on uppercase text, especially if you like to use small caps between the text, like on this website.

Concise CSS provides a variable for this, and you can use it like this:

.myUppercaseText {
  letter-spacing: $letter-spacing;
}

The default value is 0.05em which will work for most of the cases, but you are free to modify it as you need. Just be careful in adding too much, is all about making uppercases more readable, not to make the text more flashy.

No, do not increase letter spacing in lowercase text, 99% of the time is a bad idea.

Paragraph spacing

By default, all the paragraphs—except the first one—will have a top margin of 1lh, which is translated to 1.5rem after compilation if the line height remains as 1.5 (default value). If you change the line-height of the :root element, the margin will be adapted automatically, for example, to 2rem if you set your line height to 2.

2.3 Grid System

A grid system is a tool used to build a webpage layout. With it, you can organize your content into containers and columns. Concise CSS uses a custom version of the atGrid.css grid system by James Kolce, that focus in the use of custom attribute selectors instead of the usual class selectors in other systems.

By default, the grid will have 12 columns ready to use.

Why Attribute selectors

Custom attributes provide more expressiveness when building a layout and without polluting your classes than the conventional approach of using classes.

For example, take a look at the following comparison:

<!-- Common approach -->
<div class="grid">
  <div class="col-6 pull-col-4">…</div>
</div>

<!-- Concise CSS -->
<div grid>
  <div column="6 +4">…</div>
</div>

You can get a cleaner result with Concise CSS, and this is totally okay to use though those attributes are not official. However, if you need HTML validation you can assign data- to the $prefix variable, and you can write your markup with data- attributes instead.

Containers

When building websites is a good practice to put the content inside a container that will have a limited width. So the content doesn't span across the screen making it hard to read.

To convert an element into a container you just have to add the container attribute to it.

<main container>
  …
</main>

<section container>
  …
</section>

The grid element

To organize your content sometimes you will need to split the site into columns. But columns should be contained in a grid element. The process is similar to containers; you just have to add the grid attribute to it.

<section grid>
  …
</section>

Columns

Once you have a grid element, you can proceed to add columns inside of it. The process is, again, the same, but with the column attribute.

<section grid>
  <article column>…</article>
  <article column>…</article>
  <article column>…</article>
  <article column>…</article>
</section>

By default, when you add a column it will take all the space available. In the previous example, each column will have a width of 25% because there are 4.

If you need one column to be bigger than other, you can put a number from 1 to 12 (by default) as the value of the column attribute, like this:

<main grid>
  <article column='8'>…</article>
  <section column='4'>…</section>
</main>

In that example, the article element will have a width of 2/3 (8/12) and the section element will have a width of 1/3, next to the article element.

Since columns without any value occupy all the space possible, we can omit the value for the section element:

<main grid>
  <article column='8'>…</article>
  <section column>…</section>
</main>

Column offsets

There are cases where you need to move a column to the right side without creating an empty column next to it. For this, you can use column offsets, which are pretty simple to use.

You just have to add a number from 1 to 11 prefixed with the plus symbol (+) in the column element.

<main grid>
<article column='8 +2'>…</article>
</main>

In that example, we have created a column with a width of 8/12 and with an offset of 2/12.

Columns without gutters

You can create columns without gutters by adding a no-gutters value in the grid attribute, like this:

<main grid="no-gutters">
  <article column>…</article>
  <article column>…</article>
  <article column>…</article>
  <article column>…</article>
</main>

Now we have four columns without space between them.

Avoid column collapsing

By default, when the viewport in smaller than the $breakpoint variable (--small) each column will have full width. If you want to prevent this behavior you can add a no-collapse value in the grid element.

<main grid="no-collapse">
  <article column>…</article>
  <article column>…</article>
  <article column>…</article>
  <article column>…</article>
</main>

The four columns will have a width of 25% no matter the size of the screen.

Grid direction

You can adjust the direction of the columns in a grid without changing the markup. Concise CSS has available the four Flexbox options for this available as attribute values for the grid element.

<section grid="row">…</section>
<section grid="row-reverse">…</section>
<section grid="column">…</section>
<section grid="column-reverse">…</section>

Grid justification

It’s possible to adjust how the elements inside a grid will occupy the space available. Concise CSS exposes all the justify-content property values as attribute values in your markup.

<section grid="justify-start">…</section>
<section grid="justify-end">…</section>
<section grid="justify-center">…</section>
<section grid="justify-between">…</section>
<section grid="justify-around">…</section>

You can find more detailed information about how justification works in this CSS-Tricks article.

Grid alignment

Vertical alignment of all the columns in a grid is easy and can be done directly in the markup by adding one of the following values in the grid attribute.

<section grid="top">…</section>
<section grid="center">…</section>
<section grid="bottom">…</section>
<section grid="baseline">…</section>
<section grid="stretch">…</section>

Column alignment

Sometimes you won’t want to align all the columns in the grid, but just one or two. You can make it happen by adding one of the following values in the column attribute.

<main grid>
  <section column="top">…</section>
  <section column="center">…</section>
  <section column="bottom">…</section>
</main>

Enabling the full grid

If your website is complex, you can enable a complete grid to have better control over the layout for all the device sizes.

To enable the this feature you have to set the variable $full-grid to true, and it will produce several new values for the column attribute.

When it’s enabled, you will have the following types of columns available:

And those can be used like this:

<main grid>
  <section column="2">…</section>
  <section column="4 l-6 m-2">…</section>
  <section column="xs-10 s-8 m-6 l-4 xl-2">…</section>
</main>

Those attribute values will set the size of the column depending on the size of the viewport. The variables used are the custom media queries defined previously.

Other customizations

This is the complete list of customizations available in the Concise CSS grid system:

2.4 Color Palette

Concise CSS provides a color palette ready to use or extend. It contains colors for text, primary colors, backgrounds, colors for states, and other tones.

You can use colors from the palette with the getColor() function. The first argument is the category of the color, and the second argument is the specific tone.

The getColor() function is used as follows:

.myElement {
  color: getColor(text, primary);
  background-color: getColor(background, light);
}

The following is a table with all the colors available by default.

base, primarybase, selectionbase, lines
text, headingtext, primarytext, secondarytext, inverted
background, darkbackground, lightbackground, body
state, mutedstate, successstate, warningstate, errror
blue, darkerblue, darkblue, baseblue, lightblue, lighter
green, darkergreen, darkgreen, basegreen, lightgreen, lighter
red, darkerred, darkred, basered, lightred, lighter
gray, darkergray, darkgray, basegray, lightgray, lighter

You can customize the color palette by modifying the $colors map in your settings file, as noted in the Settings section.

2.5 Print

Concise CSS also includes basic styles for print that will normalize your website to make it more print-friendly. However, the default settings might not be optimal for your website; If you want to officially support printing, you should still write your own print styles.

Take a look at the _print.scss file to see what styles are applied when a Concise CSS website is printed on paper.