Using the Framework: Get Started

Basic Configuration

The first step is to setup some basics of the master template. For this you should go to the following files:

• application/config/master.php: Setup here your author name (master_author).
• application/language/english/master_lang.php: Setup here your default title (master_title) and your default description (master_descritption)

Create any other language directory you need and create in every directory the file master_lang.php. Setup there the default title and description in it's specific language and setup the language code (master_lang) and the charset (master_charset) for this language.

Component Configuration

The default configuration has no component enabled. Of course you can start from the scratch and work without a component like a framework or something else. If you like to have some basic assistance you can easily enable one or more components. In the following chapters are some hints collected on what you have to pay attention to, if you want to enable some basic components.

• For enabling a component go into the file application/config/master.php and set the corresponding variable $config['master_components']['YOUR_COMPONENT']['enabled'] to "TRUE".
• The configuration of a component can be done with the configuration array $config['master_components']['YOUR_COMPONENT']['config']. It's an associative array where you can set some options for the component.

CSS Framework

First of all you should decide what Frontend-Framework you would like to use. CodeIgniter includes the following ones:

• YAML: A modular CSS framework for truly flexible, accessible and responsive websites. It offers a grid system and beyond this a stable column system for fixed layout styling. Source: http://www.yaml.de
• Bootstrap: Sleek, intuitive, and powerful mobile first front-end framework. The mobile first approach is "baked right into the core" and is one of the strengths of this Framework. Sorce: http://getbootstrap.com

You should of course enable only one of them.

Choosing YAML

YAML includes a core css framework and some additional css files for special purposes. With the configuration array you setup enable one or more of them. Maybe the most important key is "layout" with which you add a basic layout stylesheet. The yaml core do not include global page layout styles. They are separated in individual files. Depending on the basic layout on your page (Full Width, Fixed Width, Grif Based etc.) you can choose one of them. Possible Values of the key "layout" are: "page", "fullpage", "g960-12" and "g960-16". Please read the documentation about the different layout-styles here: http://www.yaml.de/docs/index.html#yaml-layouts

They are some other stylesheets which you could include. By default CodeCoupler will include "typography.css" and "print.css". You can find the full documentation of all possible configuration options here: Libraries: Master: Components Overview

Choosing Bootstrap

If you choose Bootstrap, there are no further options.

If you want to disable the built-in responsive-features of the framework, you have to remove the meta-tag "viewport" from the master template. This you will find in the file application/views/master/main.php. Read more about disabling the responsiveness here: http://getbootstrap.com/getting-started/#disable-responsive

You can find some other usefull snippets for using bootsrap here: Using the Framework: Snippets Library

Default Configuration

The goal of the default configuration of components was to have a html5-ready, cross-browser (and lagacy-browser) compatible quick-start boilerplate. To this purpose, several libraries are enabled by default.

Normalize.css

"Normalize.css" is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. Source: https://github.com/necolas/normalize.css/

Modernizr

Modernizr tests which native CSS3 and HTML5 features are available in the current UA and makes the results available to you in two ways: as properties on a global Modernizr object, and as classes on the <html> element. This information allows you to progressively enhance your pages with a granular level of control over the experience. Source: http://modernizr.com

html5shiv

Source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section. Source: http://code.google.com/p/html5shiv/

Hint: html5shiv is included in modernizr. So only the component "modernizr" is enabled. You can, if you want, disable modernizr and enable the standalone component "html5shiv".

jQuery and jQuery-UI

To built cross-browser compatible interactive webapplications the two popular javascript libraries jQuery and jQuery-UI are per default included.