Warp6 Styles

We introduce a new feature similar to child themes

Apr

We started this week with a closer look at the overall Warp6 framework structure. Today we want to introduce a new feature called "Styles" which relates to the framework structure. So if you missed the latest article you can read it here: Inside the Warp6 Framework.

Styles

Styles are variations of the default theme and are similar to the concept of child themes in Wordpress or sub themes in Drupal. A style defines a layer after the default theme and can inherit or override resources from the parent default theme. We implemented this by using the file cascade we described in the previous blog post. Warp6 looks first in the specific style folder and loads the file if it's found. Otherwise it looks what's next in the cascade. This gives you full flexibility to override any file of the default theme. Each style is placed in its own directory in the themes /styles folder and can provide its own custom HTML layouts, CSS, JavaScript and images. Let's take a look at this feature in the following example.

Example

Let's create a new style we call "fresh". To do so we have to create a new style folder /styles/fresh. That's it! We created a new style which looks the same like our default theme.

We can override the default layout /layouts/template.php file, by putting a new layout file right here /styles/fresh/layouts/template.php. Now you can start customizing it.

Next you can add your own CSS /css/layout.css file, by copying it to /styles/fresh/css/layout.css. The "fresh" style would now load it's own layout style sheet. But what if you only have one small modification? For example you just want to change one color. Do you have to copy the whole layout CSS from the default theme? No, just import the /css/layout.css by using @import url(../../../css/layout.css); and add your small modification. You have full control which CSS assets you want to include from the default theme, from the core framework or neither. This means no bloated code! Isn't this great?

This way you can inherit or override any resource from the default theme like the StyleSheets, JavaScript module or system markup files.

What's so great about it?

The styles feature introduces a new way of customizing a theme and makes it easy to create theme variations. All styles benefit from inheriting layouts and assets from the main theme, which allows to create minor customizations really fast.

This is the new recommended way to customize themes. You can create your own style or just start off by copying an existing one. The style variations are modular and separated from the main theme so it's the perfect place for your theme customizations. This way a theme can be updated without merging all your customization to the updated template.

We even use the style approach to create the Warp6 mobile theme which is optimized for all mobile devices. The mobile style has it's own specific HTML markup, CSS rules and JavaScripts which are necessary to display the mobile theme version.

Next week we will take a closer look at the new HTML5 markup and the new CSS framework.

Comments (15)

magicspon

| Profile | #

yum yum yum... sounds sweet

reply
kyle.faber

| Profile | #

fantastic..!

reply
domeniconi.marco

| Profile | #

Wouahouuououou!
Great for proposing different styles to clients in the webdesign process

reply
- sascha
  
  | Profile | #
  
  Great idea, didn't thought of that :-)
  
  reply
hubumedia

| #

I was wondering if this is different or better than the new Joomla 1.6 "styles" feature? At quick glance it looks similar. I have to admit one of the most problematic things for me is updating templates that have been heavily modified... and all of the templates we use are very heavily modified... to the point of being unrecognizable from the original.

Is this new styles system better suited for doing those complete and total modifications rather than modifying the template files directly? I am concerned about having code bloat, double files for everything when I am overriding so much of the template.

reply
- Jordan
  
  | #
  
  So then just modify the main theme without using styles
  
  reply
- houston
  
  | #
  
  We have the same problem, too. Templates have to be modified to match client corporate design. Updating the templates means modifiying all files again. The style system is a nice feature, but it doesn't help with that problem. We try to reduce all modifications to css (ok, doesn't always work that simple). But even then updating can cause problems.
  
  Easy solution for us would be different types of updates: core, css or combined. Or at least a detailed note which files have been updated and if css is involved at all.
  
  reply
  - sascha
    
    | Profile | #
    
    The new style feature absolutely fixes your problem. You create your new style while the template keeps untouched. Template updates will easily be possible without loosing your modifications. You can override any template file in your style like the main layout file, CSS and JS...
    
    reply
    - houston
      
      | #
      
      Really cool! We've been waiting for onboard template bypass for the longest time ;)
      
      reply
- sascha
  
  | Profile | #
  
  Yes, the new style feature is perfect to customize a template. You just create and modify your new style while the template keeps untouched. So template updates will easily be possible without loosing your modifications.
  
  reply
lovinWarp

| #

Ever considered getting the option to rid of the frontpage article component...most of my projects donr need it and it could be a great addition to warp6. I have hacked it out on some smaller projects but I think it could be very welcome as an option.

reply
- sascha
  
  | Profile | #
  
  Warp6 will have this feature :-)
  
  reply
alxttr

| Profile | #

What about the menu ? Is it going to be improved?
In the actual menu system, if your last menu item is positioned close to the right side and your submenu is split in 2, 3, 4 columns then it depasses the template width... making it look kind of un-natural...

reply
Roman

| #

12 days to go :)))))))

reply
ASa

| #

fantastic

reply