If you have any suggestions, comments or just found a bug – please do not hesitate to write.

Download sources&examples (54Kb)

{
  from: 5,
  to: 50,
  step: 2.5,
  round: 1,
  dimension: ' €'
}

{
  from: 5000,
  to: 150000,
  heterogeneity: ['50/50000'],
  step: 1000,
  dimension: ' $'
}

{
  from: 0,
  to: 500,
  heterogeneity: ['50/100', '75/250'],
  scale: [0, '|', 50, '|' , '100', '|', 250, '|', 500],
  limits: false,
  step: 1,
  dimension: '&nbsp;m<small>2</small>'
}

{
  from: 1,
  to: 30,
  heterogeneity: ['50/5', '75/15'],
  scale: [1, '|', 3, '|', '5', '|', 15, '|', 30],
  limits: false,
  step: 1,
  dimension: '',
  skin: "blue"
}

{
  from: 480,
  to: 1020,
  step: 15,
  dimension: '',
  scale: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
  limits: false,
  calculate: function( value ){
    var hours = Math.floor( value / 60 );
    var mins = ( value - hours*60 );
    return (hours < 10 ? "0"+hours : hours) + ":" + ( mins == 0 ? "00" : mins );
  }
}

Documentation

• from — [number] left limit
• to — [number] right limit
• step — [number] step of pointer
• round — [number] how many numbers after comma
• heterogeneity — [array] (percentage of place)/(value of place)
• dimension — [string] show this after number
• limits — [boolean] show or not limits
• scale — [array] labels under slider, ‘|’ — show just line
• skin — [string] if you define new skin, just write here his name, in sources defined blue skin for example
• calculate — [function(value)] function to calculate final numbers, for example time.
• onstatechange — [function(value)] function fires while slider change state.
• callback — [function(value)] function fires on “mouseup” event.

Do not forget to set absolute or true relative path for png in jslider.ie6.css and jslider.ie6.[skin].css

Download sources

Simple search:

<div style="width: 200px"> <!-- ← Define searcher width by setting width to parent node.-->
  <input id="SimpleSearcher"
    type="search"
    placeholder="Search"
    autocomplete="off"
  />
</div>
<script type="text/javascript" charset="utf-8">
  $("#SimpleSearcher").searcher();
</script>

Incremental search:

<div style="width: 200px">
  <input id="IncrementalSearcher"
    type="search"
    placeholder="Search"
    autocomplete="off"
 
    incremental="yes"
    onsearch="onSearchHandler.apply(this, arguments)"
 
  />
</div>
<script type="text/javascript" charset="utf-8">
  $("#IncrementalSearcher").searcher();
  function onSearchHandler(){
    this.loading(true);
    /* AJAX or simple JavaScript actions */
  }
</script>

Getting Search Object

<script type="text/javascript" charset="utf-8">
  $("#IncrementalSearcher").data("SearchHandler").onsearch = function(){ /* whatever */ };
</script>

Next: jQuery Slider plugin

Everyone can purchase it here ( 10$ ).

Typical bottlenecks

• structuring large project
• faster developing
• group developing
• easy extensibility
• future support by new developers
• using parts in future projects

Download

css_framework.zip

Basic folder structure

/framework
	/stylesheets
		/global
		/layout
		/blocks

	/javascripts
		/global
		/jquery ← or any JS framework

	/plugins

/stylesheets
	application.css ← import all styles here
	application.ie.css ← fixes for all of IE (6,7,8)
	application.ie67.css ← fixes for IE6&7
	application.ie7.css
	application.ie6.css

Explanations

/framework/stylesheets — here we are going to put all simple stylesheets without any interactive (JS)
/framework/stylesheets/global — basic styles, usually the same for every project
/framework/stylesheets/layout — styles to make page layouts, columns and so on
/framework/stylesheets/blocks — all styles for current project

/framework/javascripts — here we are going to put all simple javascripts without any layout (CSS)
/framework/javascripts/global — basic scripts, usually the same for every project
/framework/javascripts/jquery — any JS framework

/framework/plugins — here we are going to put all interactive blocks with layout

/stylesheets — connect these files to page

Name of files and selectors

We need some rules to name files and selectors, to be able to search it quicker and without any mess. First of all, we have to name a files.
example.css

But if we need the same fixes for all IE, we must create new file:
example.ie.css

Or/and we need fixes just for IE 6, we must create file:
example.ie6.css

The way to organize selectors is name it by first letter of folder where it placed, for example we have folders “global”, “layout” and “blocks”:
.g-pseudo-link { … }
.l-column { … }
.b-menu { … }

Fixes for different browsers (/framework/javascripts/global/browsers.js):
.e-webkit .b-menu { … }
.e-gecko .b-post { … }
.e-opera .b-post_featured { … }

Now we have structure of our framework and some basic rules, so we can start with styles.

Global styles

global.reset.css — reset default browser layout.
global.link.css — styles for normal and pseudo links.
global.css — another default styles.

Download sample framework to see all with IE fixes.

Blocks

The most important thing is split page on simple blocks. Then we need to give a right name to that block and write styles. For example we have block:

This is a way to show post on LOOKATME.RU home page.

So, we are creating a new folder and file and write css just for this block:
/framework/stylesheets/blocks/b-post/b-post.css

Place any pictures (if we need) close to this file.

The name of inner selectors are like this:

.b-post { ... }
.b-post .b-post-border { ... }
.b-post .b-post-border .l { ... }

Redefine existing blocks

In the same home page we have another view of post — featured post, basically it is almost the same style, but it has a little difference.

We are creating new file close to b-post.css:
/framework/stylesheets/blocks/b-post/b-post.featured.css

And here we just need to write styles to extend .b-post for new layout.
Selectors will have names like:

.b-post_featured { ... }
.b-post_featured .b-post-border .l { display: none; }

And html:

<div class="b-post b-post_featured">
...
</div>

For IE fixes we just need to create files like b-post.ie.css or b-post.featured.ie6.css or any another combinations.

Structure of plugins

/framework/plugins
	/b-search
		/javascripts
		/stylesheets
		/tests ← examples how this plugin work and how to use it

Conclusion

This is just one way to organize files that I’ve used in two large projects. I’ve used a lot of different ways before, but finally I think this one is better.

Be careful with IE because it has limit of 32 external css files. The way to solve it — join all css to one file.

Special thanks to Vitaly Harisov from Yandex for his help to solved the mess with selector names.

So we need to have one main template with basic layout and another (inherited) templates with layout for each page.

Solution

First of all we need to create main template which will be wrapper for all the next templates.

Creating global template, named it “_global”. Files that we need:

• /templates/_global/index.php
• /templates/_global/layout.php
• /templates/_global/templateDetails.xml
• /templates/_global/helper.php

1. index.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
  <head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/framework/stylesheets/application.css" type="text/css" charset="utf-8">
  </head>
<body>
  <div class="header">
    Header of page
  </div>
  <div class="layout">
    <jdoc:file name="layout.php" />
  </div>
  <div class="footer">
    &copy; Egor Hmelyoff
  </div>
</body>
</html>

Here we’ve written the new construction <jdoc:file name=”layout.php” />. Which means that you include layout.php from the current template. After that, we will create this file in each new template and insert there our layout.

2. layout.php (for _global template):

<div class="content">basic layout</div>

Here we can write whatever we need.

3. templateDetails.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"  
 "http://dev.joomla.org/xml/1.5/template-install.dtd">  
<install version="1.5.9" type="template">  
  <name>_global template</name>  
  <creationDate>23 April 2009</creationDate>  
  <author>hmelyoff</author>  
  <authorEmail>hmelyoff@gmail.com</authorEmail>  
  <authorUrl>http://blog.evershow.me</authorUrl>  
  <copyright>Life Fm, 2009</copyright>  
  <license>GNU/GPL</license>  
  <version>1.5.0</version>  
  <description>Global template with basic html layout</description>  
  <files>  
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>  
    <filename>helper.php</filename>
    <filename>layout.php</filename>  
  </files>         
 
  <positions>
  </positions>  
 
</install>

Here nothing special.

4. helper.php: (updated)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<?php
  defined('_JEXEC') or die('Restricted access');
 
  function global_render($_params = null)
  {
    global $mainframe;
 
    // Base instances
    $document =& JFactory::getDocument();
    $user     =& JFactory::getUser();
 
    // Define global template
    $_template	= "_global";
    $_template_dir	= JPATH_THEMES.DS.$_template;
 
    // Define _global params
    if (is_readable( $_template_dir.DS.'params.ini' ))
    {
      $_content = file_get_contents($_template_dir.DS.'params.ini');
      $_global_params = new JParameter($_content);
    }
 
    // Define empty params if not exist
    if(!$_params){
      $_params = new JParameter('');
    }
 
    // example includes/application.php "render" function
    $file	= JRequest::getCmd( 'tmpl', 'index' );
    if ( JSite::getCfg('offline') && $user->get('gid') < '23' ) {
      $file = 'offline';
    }
    if ( !is_dir( $_template_dir ) && !JSite::getCfg( 'offline' ) ) {
      $file = 'component';
    }
 
    $params = array(
      'template' 	=> $_template,
      'file'		=> $file.'.php',
      'directory'	=> JPATH_THEMES
    );
 
    // Catch current template
    $template = $mainframe->getTemplate();
    $template_dir = JPATH_THEMES.DS.$template;
 
    // Set global template as current and render document
    $mainframe->setTemplate( $_template );
    $data = $document->render( JSite::getCfg('caching'), $params );
 
    // Set back current template
    $mainframe->setTemplate( $template );
 
    $replace = array();
    $matches = array();
 
    // Catch own construction for include files
    // (example /libraties/joomla/document/html/html.php "_parseTemplate" function)
    if( preg_match_all( '#<jdoc:file\ name="([^"]+)".*\/>#iU', $data, $matches ) ){
      $matches[0] = array_reverse( $matches[0] );
      $matches[1] = array_reverse( $matches[1] );
 
      $count = count( $matches[1] );
 
      for( $i = 0; $i < $count; $i++ ){
        $inc = $matches[1][$i];
        $tpl_dir = $template_dir;
 
        // if file does not exist in current template,
        // looking for it in "_global" teamplate dir
        if( !file_exists( $template_dir.DS.$inc ) ){
          $tpl_dir = $_template_dir;
        }
 
        $document->params = $_params;
        $document->global_params = $_global_params;
 
        $tpl = $document->_loadTemplate( $tpl_dir, $inc );
        $tpl = $document->_parseTemplate( $tpl );
 
        $replace[$i] = $tpl;
 
      }
 
      $data = str_replace( $matches[0], $replace, $data );
 
    }
 
    return $data;
  }
 
?>

This is the main function to render new inherited templates.
So, we’ve created “_global” template, but remeber: this template not for assign it.

Inherited templates

Next step: we will create new inherited template for home page (for example).

Files that we need:

• /templates/home/index.php
• /templates/home/layout.php
• /templates/home/templateDetails.php

“home” here for example, we can give any name to inherited templates.

1. index.php: (updated)

1
2
3
4
5

<?php
  defined('_JEXEC') or die('Restricted access');
  include JPATH_THEMES.DS.'_global/helper.php';
  echo global_render($this->params);
?>

2. layout.php:

1
2
3
4

<div class="content">
  <div class="left">new left column in home template</div>
  <div class="center">content part</div>
</div>

3. templateDetails.php: nothing special again.

That’s all. Now we can assign this template by Joomla administrator panel.
Also, in inherited template we have access to params of _global template by $this->global_params->get(…)

Download

Two blank templates (_global and inherited).

Summary

1. Any count of inherited templates.
2. Redefining modules will be in context of templates (right way).
   

   For example we need to redefine layout for mod_mainmenu module for all pages, add file default.php to /templates/_global/html/mod_mainmenu/default.php. Or we need to redefine layout for mod_latestnews just in home page layout, add file default.php to /templates/home/html/mod_latestnews/default.php.

3. All controled by administrator panel.

Feel free to mail me anytime if you have any problem or question.

Drew Diller public researched post “Medicine for your IE6/PNG headache” and javascript library DD_belatedPNG (Current: 0.0.7a on 2009.01.01). That is a very good solution but it’s got one big problem: If you are going to use CSS sprites, you will have your png a little fuzzy. That problem prevents us from using this library.

The problem is inside VML technology with shape and fill objects (what Drew Diller have used).

So I’ve written a special CSS library for CSS sprites use.

What do we need?

1. Declare VML namespace for Internet Explorer
2. DOM ready CSS event
3. My CSS library

Let’s do it!

1. Declare VML namespace for Internet Explorer

Using Conditional Comments in head part of our HTML:

1
2
3

<!--[if IE]>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<![endif]-->

2. DOM ready CSS event

global.domready.ie.css — this is jQuery light DOM ready event written by expression.

Connect it to our document for all of IE:

1
2
3
4

<!--[if IE]>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
	<link href="global.domready.ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

3. My CSS library

g-png.ie6.css — library written by expression (with english comments).

Connect it to our document, final result:

1
2
3
4
5
6
7
8

<!--[if IE]>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
	<link href="global.domready.ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
 
<!--[if IE 6]>
	<link href="g-png.ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

How to use it?

Simply connect all files and add class name “g-png” in tag where you need this png fix like:

<span class="shadow g-png"></span>

In action:

LOOKATME.RU
Campus.ru

Known issues

1. Background-repeat (use DD_belatedPNG for it).
2. Center positioning.
3. Opacity.

This is a complete solution, it means that you don’t need to use javascript manipulations.

And it’s specially thought for CSS sprites or simple png public.

Warning: Safari doesn’t like these files and ignores them.

Summary

Download all by one file.

This is a very light solution and has been tested and used in a big production web, but it may has bugs in different situations.

Feel free to mail me anytime if you have any problem or question.