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 framework. If you like to have some basic help 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.
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 enabel only one of them. Go into the file application/config/master.php and set the corresponding variable $config['master_components']['YOUR_FRAMEWORK']['enabled'] to "TRUE".
Choosing YAML
YAML includes a core css framework and some additional css files for special purposes. With the associative array $config['master_components']['yaml']['config'] 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 option here:
Choosing Bootstrap
If you choose Bootstrap, there are no further options. The only thing you could do is disabling the built-in responsive-features of the framework. To do this you have to remove the meta-tag "viewport" from the master template. This you will find in the file application/views/master/main.php.
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/
YAML
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.