Setup

The following steps describe the installation of CoreSheet. Afterwards you can see how to setup the Sass compiler. The second section below explains the various Sass variables of the framework.

Installation

To install CoreSheet you can download the GitHub respository, NPM or Bower. If you choose NPM, just open the command prompt and install the package via this command.

$ npm install coresheet

For Bower use this.

$ bower install coresheet

The file structure of CoreSheet looks the following.

CoreSheet/
├ dist/
└ coresheet.css
└ coresheet.min.scss
├ themes/
└ coresheet-theme-default.scss
└ ...
├ bower.json
├ coresheet.scss
├ coresheet-config.scss
├ gulpfile.js
├ LICENSE
├ package.json
├ README.md
└ template.html

The other theme files are not displayed for simplicity. If you want to quickly start developing you can just pick the compiled coresheet.css or coresheet.min.css which include the CoreSheet default theme and a 12 column grid. In order to customize the framework or use another theme, you'll need to compile the Sass files. The following section describes two ways to accomplish this.

Sass compiler

To compile Sass/SCSS files into CSS, there are currently two runtimes to do this on all platforms: Ruby and Node.js. If you want go for Ruby, head over to the official Sass documentation for installation instructions. The following steps describe two ways for the Node.js Sass compiler which is called node-sass.

node-sass

If you want to simply compile CoreSheet into a CSS file, you can install node-sass and use it via command line. By setting up a file watcher, file changes in a Sass file will be detected and the CSS compilation will start automatically. This is a very basic command for only one Sass file. Open the command prompt and switch to your CoreSheet directory. The commands are as follows.

$ npm install node-sass -g
$ node-sass -w coresheet.scss coresheet.css

Gulp

The ideal solution to compile all Sass files of the framework is possible via Gulp. There is a ready-made gulpfile.js in the CoreSheet package which will do all the work. It can compile the Sass files directly or through a watcher. Head over to your CoreSheet directory and use the following commands.

$ npm install
$ gulp

To start a file watcher for the Sass files, use this.

$ gulp watch

The gulp commands will both compile coresheet.scss, coresheet-config.scss and the referenced coresheet-theme.scss files into coresheet.css and coresheet.min.css in the dist directory.

Sass Configuration

The framework is completely made up with Sass. It consists of three SCSS files: the framework itself, the configuration and a theme. The usual workflow for CoreSheet is to choose or modify a theme and adjust the configuration. Modifications on the framework core are easy to do but not necessary. Below you will find the explained Sass variables of the configuration file.

Config variables

The configuration file of CoreSheet is called coresheet-config.scss. It contains all variables that define the layout configuration like the grid system, font settings, sizes and margins. All color values are stored in the theme file so you can easily switch between different themes or design your own. Below you will find all configuration variables and their explanation. Since the color variables in the theme files are kind of self explaining, they aren't listed here.

// =====================================================
// Configuration
// =====================================================

// -----------------------------------------------------
// Theme
// -----------------------------------------------------

// Import theme file
@import "themes/coresheet-theme-default.scss";


// -----------------------------------------------------
// Dimensions
// -----------------------------------------------------

// Width of centered main page container
$page-middle-width: 1220px;

// Breakpoint for smaller screens where elements and grid rows are stretched to full width
$page-breakpoint-fullwidth: 767px;


// -----------------------------------------------------
// Grid System
// -----------------------------------------------------

// Amount of grid columns
$grid-system-columns: 12;

// Gutter width in percent (space between columns)
$grid-system-gutter: 4%;

// Optional width for smaller screens to increase space on the sides
$grid-system-row-width-responsive: 94%;

// Include classes for nested columns (1 level)
$grid-system-include-nesting: true;


// -----------------------------------------------------
// Typography
// -----------------------------------------------------

// Global font stack that defines the default font
$page-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

// Global font size
$page-font-size: 16px;

// Global page font setting
$page-font: normal normal 500 #{$page-font-size}/1.45 $page-font-family;


// Enumeration for heading font sizes mixin (from <h1> to <h6>)
$headings-font-sizes: 38px, 32px, 26px, 20px, 16px, 12px;

// Line height of headings
$headings-line-height: 1.1;

// Font weight of headings
$headings-font-weight: 500;

// Top margin of headings
$headings-margin-top: 24px;


// Margin of <p> elements
$paragraph-margin: 0 0 12px;


// Enumeration for atomic text transform classes mixin
$text-transform-classes: txt-tfm-upr uppercase, txt-tfm-lwr lowercase, txt-tfm-cpl capitalize;

// Enumeration for atomic text align classes mixin
$text-align-classes: txt-aln-lft left, txt-aln-ctr center, txt-aln-rht right, txt-aln-jst justify;


// -----------------------------------------------------
// Horizontal Rulers
// -----------------------------------------------------

// Margin of <hr> elements
$horizontal-ruler-margin: 0;

// Border height of <hr> elements
$horizontal-ruler-height: 1px;

// Border style of <hr> elements
$horizontal-ruler-style: solid;


// -----------------------------------------------------
// Media
// -----------------------------------------------------

// Scale images up to their parent element's width if their width is smaller
$images-enable-responsive-upscaling: false;


// -----------------------------------------------------
// Forms
// -----------------------------------------------------

// Bottom margin of form rows (class="form-row")
$form-row-margin-bottom: 12px;

// Top margin of horizontal form rows (class="form-rows-horizontal")
$form-row-horizontal-label-margin-top: 8px;


// Bottom margin of <label> elements
$label-margin-bottom: 3px;


// Font size of <input> elements
$input-text-font-size: 16px;

// Line height of <input> elements
$input-text-line-height: 1.2;

// Height of <input> elements
$input-text-height: 38px;

// Padding of <input> elements
$input-text-padding: 8px 12px;


// Enable CSS styled radio buttons
$input-radio-customize: true;

// Outer circle size of radio buttons
$input-radio-circle-size: 18px;

// Margin of radio buttons
$input-radio-margin: 1px 8px 4px 0;

// Inner circle position of checked radio buttons
$input-radio-checked-inner-circle-top-left: 5px;

// Inner circle size of checked radio buttons
$input-radio-checked-inner-circle-size: 10px;


// Enable CSS styled checkboxes
$input-checkbox-customize: true;

// Outer square size of checkboxes
$input-checkbox-square-size: 16px;

// Margin of checkboxes
$input-checkbox-margin: 2px 8px 4px 0;

// Top position for checkmarks of checked checkboxes
$input-checkbox-checkmark-top: 4px;

// Left position for checkmarks of checked checkboxes
$input-checkbox-checkmark-left: 6px;

// Width for checkmarks of checked checkboxes
$input-checkbox-checkmark-width: 4px;

// Height for checkmarks of checked checkboxes
$input-checkbox-checkmark-height: 8px;

// Line thickness for checkmarks of checked checkboxes
$input-checkbox-checkmark-thickness: 2px;


// -----------------------------------------------------
// Buttons
// -----------------------------------------------------

// Font size of buttons
$button-font-size: $page-font-size;

// Line height of buttons
$button-line-height: 1.2;

// Padding of buttons
$button-padding: 8px 18px;

// Text align of buttons on smaller screens
$button-text-align-responsive: center;


// -----------------------------------------------------
// Tables
// -----------------------------------------------------

// Enable background colors for <table> elements
$table-background-colors: true;

// Enable different colors for odd and even table rows
$table-odd-even-rows: true;

// Enable inner borders for tables
$table-inner-borders: true;

// Enable outer border for <table> elements
$table-outer-border: false;


// -----------------------------------------------------
// Navigation Menus
// -----------------------------------------------------

// Defines whether a navigation menu has a fixed height (above 0px)
$navmenu-fixed-height: 0px;

// Padding of navigation menus
$navmenu-padding: 10px 18px;

// Text align of navigation menus
$navmenu-text-align: center;

// Text align of vertical navigation menus
$navmenu-text-align-vertical: left;

// Text align of navigation menus on smaller screens
$navmenu-text-align-responsive: center;


// Margin of regular navigation menu items (class="navmenu")
$navmenu-regular-item-margin: 3px;

// Margin of vertical navigation menu items (class="navmenu vertical")
$navmenu-vertical-item-margin: 3px;

// Width of one size navigation menu items (class="navmenu one-size")
$navmenu-one-size-width: 110px;

// Width of vertical navigation menu items (class="navmenu vertical")
$navmenu-vertical-width: 250px;

// Width for dividers of divided navigation menus (class="navmenu dividers")
$navmenu-divider-width: 1px;

// Margin of divided navigation menu items (class="navmenu dividers")
$navmenu-divider-margin: 8px;

// Add classes for stretched one size navigation menus (class="navmenu stretch-one-size-#")
$navmenu-stretch-one-size: true;

// Margin of stretched one size navigation menu items (class="navmenu stretch-one-size-#")
$navmenu-stretch-one-size-margin: 1%;

// Classes to generate for stretched one size navigation menus (class="navmenu stretch-one-size-#")
$navmenu-stretch-one-size-count: 7;


// -----------------------------------------------------
// Sticky Footer
// -----------------------------------------------------

// Stretch sticky footer to full window width (class="footer")
$footer-fullwidth: true;

// Height of sticky footer (class="footer")
$footer-height: 320px;

// Height where the sticky footer docks to the element above (class="footer-dock")
$footer-dock-height: 360px;