wdsObjectOrientedCSSPlugin - 1.1.0

Object Oriented CSS plugin.

You are currently browsing
the website for symfony 1

Visit the Symfony2 website


« Back to the Plugins Home

Signin


Forgot your password?
Create an account

Tools

Stats

advanced search
Information Readme Releases Changelog Contribute
Show source

wdsObjectOrientedCSSPlugin plugin

Easily use Object Oriented CSS in your app.

Installation

You can install using the plugin-install task:

php symfony plugin-install wdsObjectOrientedCSSPlugin

You can also pull the code directly from the Subversion repository using a svn checkout or the svn:externals property on your project's /plugins directory.

After installing the plugin you have to copy or create a symlink to the web directory inside the plugin in your symfony web dir (call it wdsObjectOrientedCSSPlugin).

In symfony 1.2.x it can be done by plugin:publish-assets task:

php symfony plugin:publish-assets

Including bundled Object Oriented CSS stylesheets in your project

The stylesheets are divided into two groups:

  • Base stylesheets - containing base stylesheets to create 1/2/3-column layout, headers, footers and grids

    Paste the code below into your head section in your layout

    ObjectOrientedCSS::includeBaseStylesheets();
    
  • Base module stylesheets - containing base module stylesheets to create some backgrounded blocks (Base stylesheets are required!)

    Paste the code below into your head section in your layout

    ObjectOrientedCSS::includeBaseModule();
    

Using debug mode

By default debug mode is enabled in the dev environment and disabled in prod.

If you want to use debug mode you can either pass a parameter when including stylesheets like in the example below

ObjectOrientedCSS::includeBaseStylesheets(true);

or enable/disable debug mode for an environment in the app.yml.

How to use included helpers

  • Creating a header

    echo oocss_block_header($MenuContent, array( 'header_classes' => 'topper' ));
    
  • Creating a module

    echo oocss_mod_header('', array( 'mod_classes' => 'basic nicole' ));
        echo oocss_mod_body_init();
            echo $Content;
        echo oocss_mod_body_finnish();
    echo oocss_mod_footer();
    

    or

    echo oocss_mod('', $Content, '', array( 'mod_classes' => 'basic nicole' ));
    
  • Creating a footer

    echo oocss_block_footer($Content, array( 'footer_classes' => 'topper' ));
    
  • Creating a grid line and grid

    $gridLine = array( 
                  0 => array( 
                         'element_size'    => 2, 
                         'element_content' => '2/3' 
                       ), 
                  1 => array('1/4', '1/4', '1/4', '1/4')
                );
    
    $gridLine2 = array( 
                   0 => array( 
                          'element_size'    => 2, 
                          'element_content' => '2/3' 
                        ), 
                   1 => array( 
                          0 => '1/3', 
                          1 => array( 
                                 'element_size'    => 2, 
                                 'element_content' => '2/3' 
                               )
                        )
                 );
    
    echo oocss_grid_line_from_array($gridLine2);
    
    $grid = array( 
              0 => $gridLine, 
              1 => $gridLine2 
            );
    
    echo oocss_grid_from_array($grid);
    

Changelog

Version 1.1.0

  • Added ability to enable/disable debug mode for environments
  • Changed grid helper name to be more adeqate to its purpose (grid line creation)
  • Added support for grid elements with size greater than 1
  • Added helper to greate a multi-line grid
  • Added official OOCSS documentation
  • Added use-case examples
  • Fixed a bug in oocss_mod_body helper

Version 1.0.0

  • Added grids support.

Version 0.5.0

  • Initial public release.

Maintainers

Sebastian Owodziń