Using the Framework: Get Started - Versionsgeschichte

Tm: /* 1.) Choosing CSS Framework */

2014-02-18T14:48:41Z

1.) Choosing CSS Framework

← Nächstältere Version		Version vom 18. Februar 2014, 14:48 Uhr
Zeile 17:		Zeile 17:
	* 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.		* 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 ===		=== 1.) Choosing Frontend Framework ===

	First of all you could decide to use a Frontend-Framework. CodeIgniter includes the following ones:		First of all you could decide to use a Frontend-Framework. CodeIgniter includes the following ones:

Tm: /* 1.) Choosing CSS Framework */

2014-02-18T10:26:07Z

1.) Choosing CSS Framework

← Nächstältere Version		Version vom 18. Februar 2014, 10:26 Uhr
Zeile 19:		Zeile 19:
	=== 1.) Choosing CSS Framework ===		=== 1.) Choosing CSS Framework ===

	First of all you ~~should~~ decide ~~what~~ Frontend-Framework ~~you would like to use~~. CodeIgniter includes the following ones:		First of all you could decide to use a Frontend-Framework. 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		* '''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		* '''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.		You should of course enable only one or no one of them.

	==== Choosing YAML ====		==== Choosing YAML ====

Tm: /* Start using Assets */

2014-02-17T21:23:37Z

Start using Assets

← Nächstältere Version		Version vom 17. Februar 2014, 21:23 Uhr
Zeile 102:		Zeile 102:

	* Put your further assets into the subfolders of "application/assets". Read the documentation on how images and stylesheets will be processed: [[Controllers: Asset Management]]		* Put your further assets into the subfolders of "application/assets". Read the documentation on how images and stylesheets will be processed: [[Controllers: Asset Management]]

	~~== 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 cached 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.

Tm: /* Setup a Static Layout */

2014-02-17T21:23:18Z

Setup a Static Layout

← Nächstältere Version		Version vom 17. Februar 2014, 21:23 Uhr
Zeile 93:		Zeile 93:

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


			* Put your further assets into the subfolders of "application/assets". Read the documentation on how images and stylesheets will be processed: [[Controllers: Asset Management]]

	== Start using Assets ==		== Start using Assets ==

Tm: /* Start using Assets */

2014-02-17T17:22:28Z

Start using Assets

← Nächstältere Version		Version vom 17. Februar 2014, 17:22 Uhr
Zeile 102:		Zeile 102:
	Assets should always be placed into the subfolders within '''application/assets''. Here some important hints:		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'''.		* '''Stylesheets in Subfolder "css":''' Use here SASS/SCSS if you want. Files will be automatically compiled and cached within '''application/compiled/css'''.
	* '''Images in Subfolder "img":'''		* '''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.		** 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.

Tm: /* Setup your Global Environment */

2014-02-17T17:21:30Z

Setup your Global Environment

← Nächstältere Version		Version vom 17. Februar 2014, 17:21 Uhr
Zeile 88:		Zeile 88:
	** It should be enabled if you want to use CSS Selectors like :disable, :checked etc.		** It should be enabled if you want to use CSS Selectors like :disable, :checked etc.

	== Setup ~~your Global Environment~~ ==		== Setup a Static Layout ==

	~~After setup your environment you can directly start using the~~ following files which will be included globally into every page:		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/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".		* '''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.		* '''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.
	** If you want to have multiple "static environments" you can ~~modify~~ the foldername on the fly with ''$this->master->config->path_static'' ~~or via config-variable "$config['master_path_static']" in "application/config/master.php".~~
	** You should use "body_init_afterComponents" and "body_finish_beforeComponents" for embracing layout elements. Javacsripts will be placed at the end of the body to speedup the page loading. If you would put some layout content into "body_finish_'''afterComponents'''" this could lead into conflicts.		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 ==		== Start using Assets ==

Tm: /* Setup your Global Environment */

2014-02-17T17:16:20Z

Setup your Global Environment

← Nächstältere Version		Version vom 17. Februar 2014, 17:16 Uhr
Zeile 93:		Zeile 93:

	* '''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/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 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".		* '''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.		* '''HTML Files in application/views/master:''' With these files you can write code which will be included in every page.
	** If you want to have multiple "static environments" you can modify the foldername on the fly with ''$this->master->config->path_static'' or via config-variable "$config['master_path_static']" in "application/config/master.php".		** If you want to have multiple "static environments" you can modify the foldername on the fly with ''$this->master->config->path_static'' or via config-variable "$config['master_path_static']" in "application/config/master.php".

Tm: /* Choosing Bootstrap */

2014-02-17T17:09:09Z

Choosing Bootstrap

← Nächstältere Version		Version vom 17. Februar 2014, 17:09 Uhr
Zeile 38:		Zeile 38:
	Name of the component: "bootstrap"		Name of the component: "bootstrap"

	If you choose Bootstrap, there are no further options. Read the basic tips for using this framework: [[Tips & Tricks: 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 ===		=== 2.) Crossbrowser Reseting CSS ===

Tm: /* Choosing Bootstrap */

2014-02-17T17:07:46Z

Choosing Bootstrap

← Nächstältere Version		Version vom 17. Februar 2014, 17:07 Uhr
Zeile 38:		Zeile 38:
	Name of the component: "bootstrap"		Name of the component: "bootstrap"

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

	If you want to disable the built-in responsive-features of the framework, you have to remove the meta-tag "viewport" from the master template. This you will find in the file '''application/views/master/main.php'''. Read ~~more about disabling~~ the ~~responsiveness here: http://getbootstrap.com/getting-started/#disable-responsive~~

	~~You can find some other usefull snippets~~ for using ~~bootsrap here~~: [[~~Using the Framework~~: ~~Snippets Library~~]]

	=== 2.) Crossbrowser Reseting CSS ===		=== 2.) Crossbrowser Reseting CSS ===

Tm: /* Basic Configuration */

2014-02-17T16:58:49Z

Basic Configuration

← Nächstältere Version		Version vom 17. Februar 2014, 16:58 Uhr
Zeile 7:		Zeile 7:

	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.		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 ==		== Component Configuration ==