Libraries: Master: Components Overview
Components are sets of content for the <head> and/or <body> section, that can be enabled or disabled by config or by code. Components can depend on each other. Enabling one component will enable all depending components, too. Disabling a component, will disable all other depending components, if not used otherwise.
Components will always be included before other components depends on it. Also a component can be configured to be included always after another component.
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.
Normalized CSS
The libraries "YAML", "Normalize.css", "HTML5 Boilerplate" provide each own parts for:
- Normalized CSS that makes browsers render all elements more consistently.
- Fixing IE-Bugs for a robust and error-free presentation of layouts in old Internet Explorer.
- Typography definitions for a uniform design of standard content elements.
- HTML5-Definitions to render HTML5 elements correctly and uniform, even in older browsers.
- Special styling for printing HTML-Pages.
Each of this libraries normalize, fix or define some styles, that other do not. For this reason all of this libraries was used. The libraries will be used in the following order:
- normalize.css
- main.css from HTML5 Boilerplate
- base.css from YAML
- gray-theme.css from YAML (for styling forms)
- typography.css from YAML
- print.css from YAML
- iehacks.css from YAML
CSS Helper Classes
Including the YAML-Framework you can use a wide range of classes to build truly flexible, accessible and responsive websites. The framework provides stylesheets for:
- Building basic page layouts, fullpage-Layouts, grid based layouts, column layouts.
- Building flexible and theme based forms.
- Float handling and integrating accessibility features.
- Building vertical or horizontal navigations.
- Typography and styling standards for heading, highlighted paragraphs, media representation, tables and microformats.
- Supporting RTL websites
Read the documentation here: http://www.yaml.de/docs
By default CodeCoupler includes the basic features of YAML. Disabled are the navigation support and extenden layout support for page, fullpage or grid layouts. This features you can enable by configuration.
Polyfills
By default CodeCoupler will include the following libraries to allow developing modern webapplications without loosing time to fix old browser behaviours:
- 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.
- IE7.js: 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.
- PIE: PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
Not a pollyfill, but very usefull to detect the features of the UA and act correctly modernizr is also included:
- 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.
Hint: html5shiv is included in modernizr. So only the component "modernizr" is enebaled. You can, if you want, disable modernizr and enable the standalone component "html5shiv".
JavaScript Framework
To built cross-browser compaitible interactive webapplications the two popular javascript libraries jQuery and jQuery-UI are per default included.
Complete List
CodeCoupler have the following components ready to use:
jQuery
- Key: jquery
- Configuration Options: None
jQuery-UI
- Key: jquery
- Configuration Options: Associative array with the following keys:
- theme: The theme to use. Download first a theme from the jQuery-UI-Website and store it into the folder 'assets/jquery-ui/css. Use the foldername as configuration-value. By default only the theme "smoothness" is packaged.
Development
- Use always <?= base_url ?>. The url-helper is autoloaded.