Using the Framework: Get Started

Aus CodeCoupler Wiki
Zur Navigation springen Zur Suche springen

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

If you choose "YAML" as your framework you setup some more options in the variable $config['master_components']['normalize']['config']. Please read the documentation of YAML for more informations about the additional features:

  • layout: This is the most important setting. Depending on its value a layout-stylesheet will be included. Possible values are: "page", "fullpage", "g960-12" and "g960-16". If empty no additionally layout-stylesheets will be included.
  • typography: If TRUE screen/typography.css will be included.
  • print: If TRUE the print.css will be included
  • rtl_support: If TRUE all necessary stylesheets for rtl-support will be included.
  • use_skiplinks: Set to TRUE if skiplinks are used. In this case the focusfix-js will be included.
  • navigation: Can be empty, "hlist", "vlist" or "both" for including the corresponding navigation-stylesheets.
  • forms_theme: If empty no theme-css will be included. Currently only one theme supported: "gray".
  • addons: Array of included addons. Values can be: 'accessible-tabs', 'microformats', 'syncheight'

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.

Abgerufen von „https://archive.codecoupler.org/index.php?title=Using_the_Framework:_Get_Started&oldid=231“