corz.org text viewer..
[currently viewing: /public/machine/source/php/corz function library/css-init/snippets/about this folder.txt - raw]
     #####    ###     ##  ### ########              ###     ##  ###    ###TM
   #######  #######   ####### ########            #######   #######  #######
  ###      ###   ###  ###         ###            ###   ###  ###     ###   ##
  ###      ###   ###  ##       ###               ###   ###  ##      ###   ##
   #######  #######   ##      ########    ###     #######   ##       #######
     #####    ###     ##      ########    ###       ###     ##           ###
                                                                      #####

    CSS Snippets..

    /inc/css/snippets/

    These are just like @@modules@@, except they are generally used for small
    chunks of CSS that go *inside* CSS declarations{}. This is most useful for
    vendor-specific CSS and other code you don't want to have to repeat over and
    over.

    In the future, when vendors agree on what is and isn't such-and-such and so
    on, we only need to change a single file, and all @@semi-opaque@@,
    @@rotate-right@@, et al sections get the new code dynamically. It also makes
    writing these long declarations trivial, so you are more likely to use
    groovy effects like semi-opacity, which not only look cool, but improve
    usability and accessability.

    Unlike regular @@modules@@ these chunks of CSS can be imported again and
    again, as many times as you like in a single sheet. The CSS Init treats
    anything in the "snippets" folder this way.

    It also makes sense to split this sort of code into a separate location, for
    ease of finding, editing, etc. Simply add the location into your module
    paths preference.

    Mine looks something like this..

        $css_modules_paths = array();
        $css_modules_paths[] = $root.'/css/modules';
        $css_modules_paths[] = $root.'/css/snippets';
        $css_modules_paths[] = $root.'/blog/inc/themes/modules';

    For example, we might have a snippet called "semi-opaque.css" that contains..

        filter: alpha(opacity=50);
        -khtml-opacity: 0.5;
        -moz-opacity: 0.5;
        opacity: 0.5;

    In our style sheet we can do..

        .up-arrow {
        @@semi-opaque@@
        }

        .up-arrow:hover {
        @@opaque@@
        }

    You can guess the contents of "opaque.css"!

    Note: Snippets are usually placed hard left, to prevent irregular tabs in
    un-minified CSS, though in reality, almost no one would see that.

    Note: Snippets *cannot* contain modules or other snippets. They are the end
    of the modularization line. However, snippets can contain %%tokens%%.*

    En-Joy!!

    ;o) Cor


    * Ideally, we would code our semi-opaque snippet as a generic declaration
    with %%tokens%% for values, and send those values directly from inside the
    style sheet, something like @@semi-opaque(o=67)@@. Guess what? YOU CAN! 

    See the readme in the modules directory for the easy-dozy details.

    (c) 2003->tomorrow!  cor + corz.org ;o)

Welcome to corz.org!

Since switching hosts (I hope you are alright, Ed! Wherever you are …) quite a few things seems to be wonky.

Juggling two energetic boys (of very different ages) on Coronavirus lockdown, I'm unlikely to have them all fixed any time soon. Mail me! to prioritise!