Libraries: Master: Components Overview: Unterschied zwischen den Versionen

Aus CodeCoupler Wiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Tm (Diskussion | Beiträge)
447 Bearbeitungen
Tm (Diskussion | Beiträge)
447 Bearbeitungen
 
(14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
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.
== Frontend Frameworks ==


Components will always be included before other components depends on it. Also a component can be configured to be included always after another component.
=== YAML ===


== Default Configuration ==
* '''Description:''' A modular CSS framework for truly flexible, accessible and responsive websites.
* '''Source:''' http://www.yaml.de/
* '''Key:''' frameworks.yaml
* '''Configuration Options:'''
** layout (Default='page'): If empty no additionally layout-stylesheets will be included. Possible values: "page", "fullpage", "g960-12" and "g960-16"
** typography (Default=TRUE): If TRUE screen/typography.css will be included.
** print (Default=TRUE): If TRUE the print.css will be included
** rtl_support (Default=FALSE): If TRUE all necessary stylesheets for rtl-support will be included.
** use_skiplinks (Default=FALSE): Set to TRUE if skiplinks are used. In this case the focusfix-js will be included.
** navigation (Default=empty): Can be empty, "hlist", "vlist" or "both" for including the corresponding navigation-stylesheets.
** forms_theme (Default='gray'): If empty no theme-css will be included. Currently only one theme supported: "gray".
** addons (Default=empty): Array of included addons. Values can be: 'accessible-tabs', 'microformats', 'syncheight'


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.
=== Bootstrap ===


=== Normalized CSS ===
* '''Description:''' Sleek, intuitive, and powerful mobile first front-end framework.
* '''Source:''' http://getbootstrap.com/
* '''Key:''' frameworks.bootstrap
* '''Configuration Options:''' No


The libraries "YAML", "Normalize.css", "HTML5 Boilerplate" provide each own parts for:
=== jQuery-UI ===


* Normalized CSS that makes browsers render all elements more consistently.
* '''Description:''' jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
* Fixing IE-Bugs for a robust and error-free presentation of layouts in old Internet Explorer.
* '''Source:''' http://jqueryui.com/
* Typography definitions for a uniform design of standard content elements.
* '''Key:''' frameworks.jquery
* HTML5-Definitions to render HTML5 elements correctly and uniform, even in older browsers.
* '''Configuration Options:''' Associative array with the following keys:
* Special styling for printing HTML-Pages.
** theme (Default=smoothness): The theme to use. Download first a theme from the jQuery-UI-Website and store it into the folder '''components/jquery-ui-*.*.*/css''. Use the foldername as configuration-value. By default only the theme "smoothness" is packaged.


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:
== JavaScript Frameworks ==


# normalize.css
=== jQuery ===
# 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 ===
* '''Description:''' jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
* '''Source:''' http://jquery.com/
* '''Key:''' frameworks.jquery
* '''Configuration Options:''' None


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:
== Basics ==


* Building basic page layouts, fullpage-Layouts, grid based layouts, column layouts.
=== Normalize.css ===
* 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
* '''Description:''' "Normalize.css" is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
* '''Source:''' https://github.com/necolas/normalize.css/
* '''Key:''' frameworks.normalize
* '''Configuration Options:''' None


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.
=== Modernizr.js ===


=== Polyfills ===
* '''Description:''' 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/
* '''Key:''' frameworks.modernizr
* '''Configuration Options:''' None


By default CodeCoupler will include the following libraries to allow developing modern webapplications without loosing time to fix old browser behaviours:
== Basic Polyfills ==


* 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.
=== html5shiv ===
* 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:
* '''Description:''' 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.
* '''Source:''' https://github.com/aFarkas/html5shiv
* '''Key:''' polyfills.html5shiv
* '''Configuration Options:''' None


* 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.
=== Respond.js ===


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".
* '''Description:''' A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
* '''Source:''' https://github.com/scottjehl/Respond
* '''Key:''' polyfills.respond
* '''Configuration Options:''' None


=== JavaScript Framework ===
=== IE7.js ===


To built cross-browser compaitible interactive webapplications the two popular javascript libraries jQuery and jQuery-UI are per default included.
* '''Description:''' 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.
* '''Source:''' http://ie7-js.googlecode.com/svn/test/index.html
* '''Key:''' polyfills.ie7
* '''Configuration Options:''' None


== Components Configuration ==
== Further Polyfills ==


Components can be configured in '''application/config/master.php'''. Every component will be described in one array with three keys:
=== PIE ===


* '''enabled:''' If TRUE the component will be enabled by default.
* '''Description:''' PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
* '''config:''' This value ist component specific. Please read the chapter [[Components: Overview]].
* '''Source:''' http://css3pie.com/
* '''depends:''' Thia array tells the framework on what components this one depends. Normally you do not have to modify this.
* '''Key:''' polyfills.pie
* '''Configuration Options:''' None


== Enable/Disable Components Dynamicaly ==
Notes: Please read the documentation of PIE. It is not a component that you can drop only into your code and everything will run.


Everywhere in your code you can enable or disable components. You do not have to worry about enabling depending components or the order of the components. Use the following function to handle components:
== GUI Libraries ==


* '''$this->master->enable_component($key):''' Enable component. Use the key of the component.
=== Sliders ===
* '''$this->master->disable_component($key):''' Enable component. Use the key of the component.
* '''$this->master->is_component_enabled($key):''' Returns TRUE if the component is enabled, otherwise FALSE. Use the key of the component.


You can find an overview of all components, their keys and how to add you own components here: [[Components: Overview]]
==== Cycle2 ====


== Development ==
* '''Description:''' Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting.
 
* '''Source:''' http://jquery.malsup.com/cycle2/
* Use always <?= base_url ?>. The url-helper is autoloaded.
* '''Key:''' gui-libraries.sliders.cycle2
* '''Configuration Options:''' None

Aktuelle Version vom 2. Dezember 2013, 03:06 Uhr

Frontend Frameworks

YAML

  • Description: A modular CSS framework for truly flexible, accessible and responsive websites.
  • Source: http://www.yaml.de/
  • Key: frameworks.yaml
  • Configuration Options:
    • layout (Default='page'): If empty no additionally layout-stylesheets will be included. Possible values: "page", "fullpage", "g960-12" and "g960-16"
    • typography (Default=TRUE): If TRUE screen/typography.css will be included.
    • print (Default=TRUE): If TRUE the print.css will be included
    • rtl_support (Default=FALSE): If TRUE all necessary stylesheets for rtl-support will be included.
    • use_skiplinks (Default=FALSE): Set to TRUE if skiplinks are used. In this case the focusfix-js will be included.
    • navigation (Default=empty): Can be empty, "hlist", "vlist" or "both" for including the corresponding navigation-stylesheets.
    • forms_theme (Default='gray'): If empty no theme-css will be included. Currently only one theme supported: "gray".
    • addons (Default=empty): Array of included addons. Values can be: 'accessible-tabs', 'microformats', 'syncheight'

Bootstrap

  • Description: Sleek, intuitive, and powerful mobile first front-end framework.
  • Source: http://getbootstrap.com/
  • Key: frameworks.bootstrap
  • Configuration Options: No

jQuery-UI

  • Description: jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
  • Source: http://jqueryui.com/
  • Key: frameworks.jquery
  • Configuration Options: Associative array with the following keys:
    • theme (Default=smoothness): The theme to use. Download first a theme from the jQuery-UI-Website and store it into the folder 'components/jquery-ui-*.*.*/css. Use the foldername as configuration-value. By default only the theme "smoothness" is packaged.

JavaScript Frameworks

jQuery

  • Description: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
  • Source: http://jquery.com/
  • Key: frameworks.jquery
  • Configuration Options: None

Basics

Normalize.css

  • Description: "Normalize.css" is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
  • Source: https://github.com/necolas/normalize.css/
  • Key: frameworks.normalize
  • Configuration Options: None

Modernizr.js

  • Description: 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/
  • Key: frameworks.modernizr
  • Configuration Options: None

Basic Polyfills

html5shiv

  • Description: 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.
  • Source: https://github.com/aFarkas/html5shiv
  • Key: polyfills.html5shiv
  • Configuration Options: None

Respond.js

  • Description: A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
  • Source: https://github.com/scottjehl/Respond
  • Key: polyfills.respond
  • Configuration Options: None

IE7.js

  • Description: 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.
  • Source: http://ie7-js.googlecode.com/svn/test/index.html
  • Key: polyfills.ie7
  • Configuration Options: None

Further Polyfills

PIE

  • Description: PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
  • Source: http://css3pie.com/
  • Key: polyfills.pie
  • Configuration Options: None

Notes: Please read the documentation of PIE. It is not a component that you can drop only into your code and everything will run.

GUI Libraries

Sliders

Cycle2

  • Description: Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting.
  • Source: http://jquery.malsup.com/cycle2/
  • Key: gui-libraries.sliders.cycle2
  • Configuration Options: None
Abgerufen von „https://archive.codecoupler.org/index.php?title=Libraries:_Master:_Components_Overview&oldid=261“