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".
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
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
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.