Getting Started

Overview of the project, its contents, and how to get started with a simple template.

1. Download

When beginning a new project, start by downloading the framework.

Get the original Sass and JavaScript files by downloading the latest version directly from GitHub.

2. File structure

Within the download you'll find the following file structure and contents, logically grouping common assets.

Once downloaded, unzip the compressed folder to see the structure of the CashCall Framework.

Sass NOTE: The Sass is broken up into easy to find categories for quick development. These Sass files are then imported into the master.scss file in a specific order to allow proper cascading. We utilize the great advancement of Object Oriented CSS (OOCSS) in this framework with the implementation of Sass to structure the CSS, optimize, and compile it much more efficiently.

jQuery NOTE: We've included the jquery.js for you. The Javascript plugins all require it to work correctly.

  cashcall-framework/
  |-- css/
  |   |-- global-styles.css
  |   |-- local-styles.css
  |   └── etc.
  |-- fonts/
  |   |-- fontawesome-webfont.eot
  |   |-- fontawesome-webfont.svg
  |   └── etc.
  |-- images/
  |   |-- favicon.ico
  |   |-- logo-emblem.png
  |   └── etc.
  |-- sass/
  |   |-- _base.scss
  |   |-- _buttons.scss
  |   └── etc.
  └── js/
      |-- jquery.js
      |-- jquery.localscroll.js
      └── etc.

3. What's included

The CashCall Framework comes equipped with HTML, Sass, and JS for all sorts of things.

HTML

template.html: Can be used as a jumping-off point when beginning new projects.
maintenance.html: This is a simple "site update" page.
index.html, getstarted.html, & framework.html: All used to display the documentation of this framework.

Sass

global-styles.scss: The global scss file which imports all basic Sass files. This is a shared file among all sites.
local-styles.scss: The local (site specific) scss file. All site specific styles go here.
_base.scss: Controls that base settings; ie. colors, typography, links, lists, images, forms, & tables.
_variables.scss: All Sass variables are set here.
_mixins.scss: Common Sass mixins that can save time coding.
_grid.scss: This is the grid structure of the layout.
_buttons.scss: Controls all button formations in the HTML.
_font-awesome.scss: All icons are listed and formatted here.
_reveal.scss: Controls the modal window and works in conjunction with reveal.js file.
_tooltip.scss: Controls the tooltip and works with the tooltip.js file.

Javascript

jquery.js: A normal-read view of the jQuery js file. Needed for other Javascript plugins to work.
reveal.js: Used for the modal window. Works with _reveal.scss.
tooltip.js: Controls the tooltips feature in the HTML. Works with _tooltip.scss.
jquery.localscroll.js, jquery.scrollTo.js & scrollspy.js: All used for the display and navigation control of the Framework page.

4. Basic HTML template

With a few additions to your HTML, you can have the basic CashCall Framework ready to go.

A look at the basic HTML template.

<!DOCTYPE html>
<html>
  <head>
    <title>CashCall Template</title>
    <link href="css/global-styles.css" rel="stylesheet" media="screen">
    <link href="css/local-styles.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/tooltip.js"></script>
    <script src="js/reveal.js"></script>
  </body>
</html>