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
Keine Bearbeitungszusammenfassung
Tm (Diskussion | Beiträge)
447 Bearbeitungen
 
(11 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.
== Frontend Frameworks ==


== Default Configuration ==
=== YAML ===


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.
* '''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'


=== Normalized CSS ===
=== Bootstrap ===


The libraries "YAML", "Normalize.css", "HTML5 Boilerplate" provide each own parts for:
* '''Description:''' Sleek, intuitive, and powerful mobile first front-end framework.
* '''Source:''' http://getbootstrap.com/
* '''Key:''' frameworks.bootstrap
* '''Configuration Options:''' No


* Normalized CSS that makes browsers render all elements more consistently.
=== jQuery-UI ===
* 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:
* '''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.


# normalize.css
== JavaScript Frameworks ==
# 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 ===
=== jQuery ===


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:
* '''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


* Building basic page layouts, fullpage-Layouts, grid based layouts, column layouts.
== Basics ==
* 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
=== Normalize.css ===


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.
* '''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


=== Polyfills ===
=== Modernizr.js ===


By default CodeCoupler will include the following libraries to allow developing modern webapplications without loosing time to fix old browser behaviours:
* '''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


* 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.
== Basic Polyfills ==
* 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:
=== html5shiv ===


* 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.
* '''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


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


=== JavaScript Framework ===
* '''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


To built cross-browser compaitible interactive webapplications the two popular javascript libraries jQuery and jQuery-UI are per default included.
=== IE7.js ===


== Complete List ==
* '''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 ==


CodeCoupler have the following components ready to use:
=== PIE ===


=== jQuery ===
* '''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


* '''Key:''' jquery
Notes: Please read the documentation of PIE. It is not a component that you can drop only into your code and everything will run.
* '''Configuration Options:''' None


=== jQuery-UI ===
== GUI Libraries ==


* '''Key:''' jquery
=== Sliders ===
* '''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 ==
==== Cycle2 ====


* Use always <?= base_url ?>. The url-helper is autoloaded.
* '''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

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“