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

From Dreamwidth Notes
Jump to: navigation, search
m (switched from the foxfirefey hack to the dreamwidth site)
m (→‎Identify what parts of the CSS to turn into properties)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
The basic steps to converting a CSS design to a layout are:
+
So, you have a CSS design for a Dreamwidth style, and you want to turn it into its own style!  This will let people alter properties of your style in the customization wizard, or be a step towards making the style into an official one.  Even though 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 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.
+
== Identify what parts of the CSS to turn into properties ==
−
## 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.
+
Good candidates are:
−
# 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.
+
* Color properties -- you shouldn't have any hardcoded colors into the CSS.  They should all be connected to properties.
−
# Expose the used properties to the customization wizard.
+
* 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.
−
# 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.
+
* Text labels
−
# Set other necessary housekeeping properties, such as modules.
+
 
 +
When you can, use [http://www.dreamwidth.org/customize/advanced/layerbrowse?id=core2#table_layerbrowse_properties 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 [http://www.dreamwidth.org/customize/advanced/layersource?id=551 TB source code] first then add your CSS in the <code>print_stylesheet</code> 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
  
 
[[Category: S2 Cookbook]]
 
[[Category: S2 Cookbook]]

Latest revision as of 01:55, 8 January 2012

So, you have a CSS design for a Dreamwidth style, and you want to turn it into its own style! This will let people alter properties of your style in the customization wizard, or be a step towards making the style into an official one. Even though 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=10426"