2 users Sign-in to change your status

Object Oriented CSS plugin. Template

• Homepage
• Repository
• Report a bug
• Download package
• Browse source

Use Object Oriented CSS in your projects.

Developers

Name	Status	Email
Sebastian Owodziń	lead	lp.2o <<ta>> xirtnus

License

Copyright (c) 2009 Sebastian Owodziń

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Releases for sf 1.2

Releases for sf 1.1

Releases for sf 1.0

Join this plugin team

Other releases

Release 1.1.0 - 13/05/2009

Release 0.5.0 - 03/05/2009

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ń