Getting started

Configuration

Customization

We have tried to make Concise as easy as possible for you to customize. Included in the "Source SASS" download package, there is a /custom folder which includes two files: _custom.scss and _globals.scss. The first file is included to allow you to add custom styles on top of what is already included. In the second file, you can override the variables that are included in Concise by default.

You can use these two files to customize styles as you see fit, and you can then compile them using the instructions on how to build the project.

Sanitize.css

Concise includes Jonathan Neal's lovely sanitize.css to help in standardizing styles for common elements across multiple browsers. However, we have adjusted the package to include only what was needed for Concise, so it does not include 100% of the sanitize.css code.

Disabling Responsiveness

Not interested in the responsive design that comes with Concise by default? Have no fear, disabling responsiveness can be accomplished with a few easy steps.

First, we need to ensure that the following <meta> tags are not present in our website's <head> section.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

In your custom CSS files, or in <style> tags, you need to set a fixed width for your container element (I'm using 960 pixels as example):

[container] { width: 960px !important; }

This overrides the Concise responsive container that is enabled by default.

Lastly, you need to apply the .nonresponsive class to the <body> element to properly disable responsiveness.

Examples

We have a couple of pre-built templates that take advantage of the core Concise styles that should help you get started working on your own projects.

Bare Bones

To get started with a bare-bones responsive website using Concise, we recommend structuring your template as such:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">

  <title>Concise Template</title>

  <link rel="stylesheet" type="text/css" media="screen" href="css/concise.min.css" />
</head>

<body></body>
</html>

Right there, you have a basic template with all included files, proper meta tags for responsiveness, and you're ready to start coding.

Other Examples

File Organization

Pre-Compiled Concise

The Concise directory is pretty simple. Here is what you are looking at for the regular distribution download:

/css
  concise.css
  concise.min.css

Concise Source Code

If you are downloading the SASS package, the folder structure will look like:

All of the files labeled with an underscore are referred to as partials. A partial is a file that does not become compiled on its own, but rather, is included in a master file (in this case, it's concise.scss) to be compiled.

/dist
  /css
    concise.css
    concise.min.css
/src
  /sass
    /addons
      /concise-ui
        /components
          _alerts.scss
          _badges.scss
          _breadcrumbs.scss
          _buttons.scss
          _cards.scss
          _collections.scss
          _dropdowns.scss
          _groups.scss
          _labels.scss
          _modals.scss
          _progress.scss
          _spinner.scss
          _tooltips.scss
        _concise-ui.scss
    /core
      /globals
        _functions.scss
        _globals.scss
        _mixins.scss
      /layout
        _base.scss
        _blockquotes.scss
        _buttons.scss
        _forms.scss
        _headings.scss
        _lists.scss
        _print.scss
        _tables.scss
        _type.scss
      /utils
        _atgrid.scss
        _colors.scss
        _conditional-styling.scss
        _helpers.scss
    /custom
      _custom.scss
      _globals.scss
    concise.scss
/test
  test.html
.editorconfig
.gitattributes
.gitignore
LICENSE
README.md
package.json

Naming Conventions

Concise's naming conventions are influenced by the work being done on the SUIT CSS framework. This framework relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This is to help work around the current limits of applying CSS to the DOM (i.e., the lack of style encapsulation) and to better communicate the relationships between classes.

Syntax: [--modifierName|-descendantName]

Component driven development offers several benefits when reading and writing HTML and CSS:

It helps to distinguish between the classes for the root of the
It keeps the specificity of selectors low.
It helps to decouple presentation semantics from document semantics.

You can think of components as custom elements that enclose specific semantics, styling, and behavior.

componentName

The component's name must be written in camel case.

.myComponent { ... }

<div class="myComponent">
  ...
</div>

componentName--modifierName

A component modifier is a class that modifies the presentation of the base component in some form. Modifier names must be written in camel case and be separated from the component name by two hyphens. The class should be included in the HTML in addition to the base component class.

.btn { ... }
.btn--primary { ... }
<button class="btn btn--primary">...</button>

componentName-descendantName

A component descendant is a class that is attached to a descendant of a component. It's responsible for applying presentation directly to the descendant on behalf of a particular component. Descendant names must be written in camel case.

<div class="tweet">
  <div class="tweet-header">
    <img class="tweet-avatar">
  </div>

  <div class="tweet-body">
    ...
  </div>
</div>

componentName.is-stateOfComponent

Use is-stateName for state-based modifications of components. The state name must be camel case. Please don't style these classes directly; they should always be used as an adjoining class.

JS can add/remove these classes. This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).

.dropdown { ... }
.dropdown.is-open { ... }
<div class="dropdown is-open">
  ...
</div>

Semantics

Concise is built on a set of simple but important principles that aid in effective and manageable web design. By understanding these principles, Concise can be used to its full potential, and we can create a better paradigm for using HTML and CSS to build websites.

Concise was built with semantics in mind. Semantics in regard to web design, for those unfamiliar with the term, describes the use of readable and meaningful HTML tags and CSS class names used to build a website.

Meaningful names are those such as .article-content. This class name easily explains that this portion of our website is the content of an article. This class name is not too verbose, and provides meaning and context for our code.

Thanks to the utility classes that Concise provides, we can also very easily style this class so that it fits into our layout. Say we want our articles to take up 8 columns and our sidebar to take up 4. Our HTML could look like:

<div column="8">
  Article
</div>

<div column="4">
  Sidebar
</div>

Or, we could use an included SASS mixin to have this make a little more sense:

.article {
  @include column(8);
}

.sidebar {
  @include column(4);
}

<div class="article">
  Article
</div>

<div class="sidebar">
  Sidebar
</div>

While this does add some CSS overhead to your project, it makes a lot more sense than just using the column="*" attributes, and would be much easier to find inside of your CSS or SASS document.