Difference between revisions of "S2 Cookbook: Converting a CSS design to a layout"

From Dreamwidth Notes
Jump to: navigation, search
Line 1: Line 1:
−
The basic steps to converting a CSS design to a layout are:
 
−
 
−
# Identify what parts of the CSS can be turned into properties i.e. all the things that users can customize in the Customize interface.  For instance, colors should always be properties, instead of being "hardcoded" into the CSS.
 
−
## The <code>core2</code> layer has a lot of [http://www.foxfirefey.hack.dreamwidth.net/customize/advanced/layerbrowse?id=core2#table_layerbrowse_properties built in properties] that can be used.
 
−
## Or, new properties can be defined.
 
−
# Write a <code>Page::print_default_stylesheet</code> function that prints out CSS using the defined properties.
 
−
## If your style is built upon Tabula Rasa, copy/paste the [http://www.dreamwidth.org/customize/advanced/layersource?id=551 TB source code] first then add your CSS in a <code>print_stylesheet</code> function.
 
−
# Expose the used properties to the customization wizard.
 
−
# Expand your design to include popular preferences, if possible, such as:  icons on the left or right side; different column layouts; metadata on the top or bottom of the entry; icon or text action links.
 
−
# Set other necessary housekeeping properties, such as modules.
 
−
 
 
So, you have a CSS design for a Dreamwidth layout, and you want to turn it into its own layout!  This will let people alter properties of your layout in the customization wizard, or be a step towards making the layout into an official one.  Even those this guide has steps in a given order, that may not be the order that's easiest.  You may go through the steps several times.
 
So, you have a CSS design for a Dreamwidth layout, and you want to turn it into its own layout!  This will let people alter properties of your layout in the customization wizard, or be a step towards making the layout into an official one.  Even those this guide has steps in a given order, that may not be the order that's easiest.  You may go through the steps several times.
  

Revision as of 17:51, 23 October 2010

So, you have a CSS design for a Dreamwidth layout, and you want to turn it into its own layout! This will let people alter properties of your layout in the customization wizard, or be a step towards making the layout into an official one. Even those this guide has steps in a given order, that may not be the order that's easiest. You may go through the steps several times.

Identify what parts of the CSS to turn into properties

Good candidates are:

  • Color properties -- you shouldn't have any hardcoded colors into the CSS. They should all be connected to properties.
  • Font properties and sizes -- official styles will need to have a base font size of 1em, customizable by the user, and fonts should be customizable too.
  • Text labels

When you can, use properties that already exist in core2. That will make it much easier for everyone involved!

Otherwise, you'll have to define new properties.

Turn your CSS into a Page::print_default_stylesheet function

Stylesheets are made using the Page::print_default_stylesheet function. You'll need to define it. Inside that function, you will be printing out all the CSS needed for your style, using your property variables.

If your style is built upon Tabula Rasa, copy/paste the TB source code first then add your CSS in the print_stylesheet function.

Utility CSS functions

EXPAND

See if you can expand your design to accomodate other popular preferences

  • Icons on the right or left side of the entry.
  • Metadata before or after the entry.
  • One, two, or three column arrangements
  • Icon or text action links

Set the module properties

The modules system lets the user reorder and define what modules they want to use in the sidebar.

Expose the properties to the customization wizard

Just because you're using a property doesn't mean it'll show up in the wizard. You'll want to list all the properties that you want to show up in the wizard in "propgroups".

  • presentation
  • colors
  • fonts
  • images
  • modules
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_Cookbook:_Converting_a_CSS_design_to_a_layout&oldid=9193"