CSS architecture for core

[Ingo Schommer]

Hello everybody,

Will, Felipe, Sam, Hamish and me had a discussion about 

how we want to manage the CSS architecture within the

CMS interface, as well as core components like form fields.

# Goals

We've learned a lot since the original markup and CSS

has been created for SilverStripe, and agreed on a couple of high level goals:

 * Design freedom for template and theme developers

 * Provide a consistent and extensible CSS framework for CMS: Abstract into components rather than one-off pixel positioning

 * Lightweight default styles for frontend (mostly in themes/css and sapphire/css)

 * Maintainable CSS architecture: minimize side-effects, no global scope selectors like .red {}

 * Easy customization (overwriting of css file paths, templates)

 * Allow for usage of other CSS frameworks in frontend

 * Well-documented and painless upgrade path for customizations to markup and CSS

# Tools

In order to achieve this, we want to rely on established tools 

and best practices used around the web, specifically:

 * jQuery UI as baseline component styles (already in SilverStripe trunk)

 * Compass/SCSS for maintaining stylesheets (see http://silverstripe.org/compass-module)

To be clear: We're not forcing these tools onto anybody for their own projects,

themes or modules, but want to use them for core development.

They are no new dependencies to running SilverStripe, unless you want

to contribute CSS to the core (in which case you need to generate files

through SASS/SCSS).

You can read more about SCSS no their website: http://sass-lang.com/

Essentially its normal CSS3 syntax, but on steroids.

Will is planning to update the current compass module for SilverStripe

to support SCSS (it currently only does the old SASS syntax).

# Form Changes

Using jQuery UI for form components like text fields or buttons means

we have to alter the existing markup and add classes like "ui-button".

jQuery UI adds these when applied via JavaScript, but we want our forms

to look nice without JavaScript as well :)

To avoid this becoming a backwards compatibility hassle for

everybody that has written CSS for the specific form markup

in SilverStripe, we are planning to introduce themeable

form fields. You will be able to have a "jQuery UI template"

for form fields, as well as a "basic template" and  "legacy template".

We'll also keep a legacy Form.css file around so you can

rely on your own forms looking the same in 2.4 and 3.0.

More on this later in a different post :)

# Documentation

SilverStripe 3.0 will provide more official docs on how to customize

the CMS UI (at the moment its a bit of black magic), both through 

a more consistent JavaScript architecture, CSS and HTML coding conventions,

and guidelines similiar to http://jqueryui.com/docs/Theming/API.

# What now?

This is an effort to both satisfy the needs of core developers

who need to maintain more than 4000 LOC CSS at the moment,

balanced with the requirement to keep contributions simple,

without complicating the SilverStripe installation process.

So, lots of new stuff coming - we'd like to hear your feedback :)

Ingo

---

Ingo Schommer | Senior Developer

SilverStripe

http://silverstripe.com

in...@silverstripe.com

Phone: +64 4 978 7330 x 42

Skype: chillu23

[Tim Klein]

Very exciting!

there is a sass interpreter written in php - means it wouldnt require
ruby installed:
http://code.google.com/p/phamlp/

Might be worth to put into consideration...
How about combining and minifying all css files in live mode?

Cheers

> --
> You received this message because you are subscribed to the Google Groups
> "SilverStripe Core Development" group.
> To post to this group, send email to silverst...@googlegroups.com.
> To unsubscribe from this group, send email to
> silverstripe-d...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/silverstripe-dev?hl=en.
>

--
Tim Klein

address: Level 1, 1 Searle Lane, Queenstown
skype: kelptim
email: t...@kelpdesign.com
website: http://www.kelpdesign.com
phone: +64 3 409 2031
mobile: +64 21 234 35 78

---

Check out http://www.page-elements.com/