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.

If you want to change the default language, you have to set the variable $config['language'] in applictaion/config/config.php.

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.

1.) Choosing 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

Name of the component: "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

Name of the component: "bootstrap"

If you choose Bootstrap, there are no further options. Read the basic tips for using this framework: Tips and Tricks: Bootstrap

2.) Crossbrowser Reseting CSS

CodeCoupler includes the well-known normalize.css from Nicolas Gallagher (http://necolas.github.io/normalize.css/). Bootstrap already includes normalize.css, so you do not have to enable it. If you are using YAML you can decide if you want to use it or not. YAML includes itself many normalizing css and a sophisticated legacy browser support. But normalize.css do a little bit more. Some of the cross-browser normalized styles are not included in YAML. I recommend to enable the normalize.css if you are using YAML.

Name of the component: "normalize"

3.) Enable modernizr?

Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. (http://modernizr.com/)

The question now is if you will use it or not. Enabling this component only to have it, is pointless. I recommend to enable it the first time you see a meaningful usage. If you do not enable this component you have to know that the predefined class "no-js" in the html element will stay there. You cannot rely on this until you enable Modernizr.

Name of the component: "modernizr"

4.) Choosing JavaScript Framework

CodeCoupler currently only includes jQuery (http://jquery.com/). Enabling bootstrap or some options of YAML will enable this component automatically. If you do not use any of them and want to write JavaScript working across a multitude of browsers, i recommend to enable this component and use the jQuery API.

Name of the component: "jquery"

5.) Choosing UI Framework

Depending on what CSS Framework you enabled you could enable the included framework jQuery-UI (http://jqueryui.com/).

Bootstrap includes already a bunch of components. In this case you should exactly check if jQuery-UI offers you components that bootstrap do not have. Only in this case you could enable this component. In production environment i recommend to build a finetuned jQuery-UI, including only the stuff you need. YAML do not include components like bootstrap. If you want to use them you can enable this component.

Name of the component: "jquery-ui"

5.) Choosing Polyfills

There are many Polyfills out there for almost every functionality in browsers that don't natively support them. The best overview you can find here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

The complete List of Polyfills currently included in CodeCoupler you can find here: Libraries: Master: Components Overview

I recommend to take the following into account:

• html5shiv:
  • The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x (https://github.com/aFarkas/html5shiv).
  • It should always be enabled, if you want to use the new HTML5-Elements.
  • It should be disabled if you use "modernizr", because it's already included.

• respond.js: A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) (https://github.com/scottjehl/Respond)
  • It should be enabled if you want to use CSS3 Media Queries
  • It should be enabled if you have choosed Bootstrap

• ie7: IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6 (http://ie7-js.googlecode.com/svn/test/index.html).
  • It should be enabled if you want to use CSS Selectors like :disable, :checked etc.

Setup a Static Layout

The following files which will be included globally into every page:

• application/assets/js/global.js: Your global JavaScript-File. If you do not want to be included, or include another or more than one, change the array "master_autoload_scripts" provided in the file "application/config/master.php".
• application/assets/css/global.css: Your global CSS-File. Write here CSS- or SASS-Code. It will be recompiled everytime you modify this. If you do not want to be included, or include another or more than one, change the array "master_autoload_styles" provided in the file "application/config/master.php".
• HTML Files in application/views/master: With these files you can write code which will be included in every page. If you want to add some static content on every page you should "body_init_afterComponents" and "body_finish_beforeComponents" for embracing your controller output.

Hint: If you want to have multiple "static environments" you can copy the folder "master" multiple times. Each controller can specify what folder will be used, by modifying the foldername on the fly with $this->master->config->path_static.

Start using Assets

Assets should always be placed into the subfolders within 'application/assets. Here some important hints:

• Stylesheets in Subfolder "css": Use here SASS/SCSS if you want. Files will be automatically compiled and ceched within application/compiled/css.
• Images in Subfolder "img":
  • Images will be downsized automatically if the device width is smaller than the image width. Because of this it is very important to use width and height in img-tags! Without this you would get a messy layout.
  • Retina displays will be detected and the bigger image will be used if there is one. Because of this you should always save images in the double size of what stated in the img-tag. If you do so, retina displays will display a sharp image, using the biggest one. This is another important reason to not forgett to set width and height into the img-tag!
• JavaScripts in Subfolder "js": For now there is no special processing for javascript files. Its just a convention to put the files here.
• Other Binaries like PDF's in Subfolder "etc": For now there is no special processing for all the other files. Its just a convention to put the files here.