Get Started

Getting up-and-running with Concise is simple.

Getting Started

Getting started with Concise is very simple. First, pick a package to download below. If you are unsure of which package is the right one for you, download the first, titled "Concise.CSS".

Concise.CSS

Compiled files (minified and non-minified) as JavaScript files.

Download

SASS

Compiled files (minified and non-minified), source SASS files and JavaScript files.

Download

What's Included

Pre-Compiled Concise

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

/css
  concise.css
  concise.min.css
/js
  concise.js
  concise.min.js

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
  /js
    concise.js
    concise.min.js
/js
  close.js
  dropdown.js
  naver.js
  navigation.js
  non-responsive.js
/sass
  /base
    _headings.scss
    _main.scss
    _print.scss
    _grid.scss
    _selection.scss
    _type.scss
    _vertical-rhythm.scss
  /components
    _buttons.scss
    _colors.scss
    _dropdowns.scss
    _navigation.scss
  /helpers
    _clearfix.scss
    _conditional.scss
    _functions.scss
    _helpers.scss
    _mixins.scss
    _normalize.scss
    _variables.scss
  /layout
    _container.scss
    _forms.scss
    _grid.scss
    _lists.scss
    _tables.scss
  concise.scss

Including Necessary Files

To get started with a bare-bones responsive website using Concise, I would 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">

  <title>Concise Template</title>

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

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/concise.min.js"></script>
</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.