Posted by lewisnyman on July 14, 2010 at 12:20pm
Hi everyone,
I was wondering if there was a section available where drupal theme developers could share pluggable, class based css styles for the views module?
I know plugins exist in module form but they seem a bit heavy handed when you want total control over your output and the css.
An example would be:
.view.inline .views-row {
float: left;
margin-right: 20px;
}
.view.inline .views-row-last {
margin-right: 0;
}All you would have to do is paste this css into your stylesheet and add the class 'inline' to the view in the UI.
Another example:
.view.hover-opacity .views-row:hover {
-khtml-opacity:.90;
-moz-opacity:.90;
-ms-filter:”alpha(opacity=90)”;
filter:alpha(opacity=90);
opacity:.90;
}I think a section like this would really help speed up theme development, help newbie themers and keep stylesheets lean.
Comments
Morten's Drupalcon SF talk
Morten gave a great talk about this topic at Drupalcon in SF.
http://sf2010.drupal.org/conference/sessions/all-your-html-are-belong-us...
Unfortunately I'm not remembering what the name of the module is that allows you to overwrite the markup of Views output.
Also, -moz-opacity is no longer necessary. Current versions of Firefox support opacity. Only filter:alpha is necessary. Not sure about Konqueror though.
"Unfortunately I'm not
"Unfortunately I'm not remembering what the name of the module is that allows you to overwrite the markup of Views output."
I think you're talking about Semantic Views.
Thanks
Thanks, I will listen to that when I get a chance, look very useful.
The standard views UI allows you to add class names to the view.
The module Semantic Views allows slightly more control over the markup, without having to resort to tpl files.
Semantic Views
Semantic Views still lacks a D7 port. pity pity pity...
Sounds good
Hi Lewis,
sounds like a helpful suggestion, speaking as someone who has come from print. Is this the sort of thing which could be handled as book pages in the documentation section of DO? Start a new section - Design for Drupal CSS Snippets with a page for each technique. The page can contain the initial code with a brief explanation of what it does. Others can then add comments to put forward alternative methods. If someone has an idea for a common views theme question, they can add a new page.
Not sure
Not sure if that is the right place for it, but then I don't have any experience with the documentation section.
It would be good to hear from someone more experienced?
documentation
Hi Lewis,
I would think that it would be really good to have some css in the theming guide.
The theming guide has its own snippets section here: http://drupal.org/node/45471 but this is all php. I wonder if it should sit under a css banner to make it easy to find.
The process for adding documentation pages is here: http://drupal.org/node/339
Perhaps it might be OK to start by submitting your initial code bits as a rough draft to documentation for review and they can suggest location.
documentation
Hi Lewis,
I would think that it would be really good to have some css in the theming guide.
The theming guide has its own snippets section here: http://drupal.org/node/45471 but this is all php. I wonder if it should sit under a css banner to make it easy to find.
The process for adding documentation pages is here: http://drupal.org/node/339
Perhaps it might be OK to start by submitting your initial code bits as a rough draft to documentation for review and they can suggest location.
Thanks and...
Thanks for the advice guys.
I was wondering, would it be worth pairing these snippets with the skinr module?
It seems to suit quite well.
Also another link to think about http://oocss.org/
Update
Hey everyone,
I've recently introduced myself to the skinr module, which takes the concept I spoke about and makes it global.
It makes more sense to build a catalogue of classes within skinr.
I'll make a start with that let you know how it goes.
catalogue?
Sounds very interesting? Can you describe more what your vision of the catalogue is? Maybe some examples?
oops!
I meant "Sounds very interesting!", with emphasis!
Concept & Examples
Here are a few classes I have in my current theme:
I was originally just thinking of including these and anything else worthwhile in a base theme I'm working on but then if they aren't going to get used it's a waste of file space right?
It would be much more productive to build a 'catalogue' of classes like these people could just copy and paste into their .info and .css files if they are suitable for their current project.
It would be ideal if you could select different classes through a UI and then the catalogue gives you a compiled list of all the skinr classes to paste in.
One of the current issues with skinr is that defining all the classes in the .info file is too complex.
Awesome!
I love where this is going. Have you seen similar efforts to objectify the CSS layer? Like OOCSS?
http://wiki.github.com/stubbornella/oocss/
example: http://wiki.github.com/stubbornella/oocss/module
I used OOCSS markup and styles for elements of the new Drupal Gardens theme. The .mod class maps well to the Drupal block (and box). I also used the talk bubble class with a custom skin on top for comments on the blog: http://www.drupalgardens.com/content/duplicate-your-site
I am a big believer in the object oriented approach to CSS. Especially when objects push into their containers and not out.
Wicked!
I have looked at OOCSS, it was an inspiration for the progress I'm making here.
The problem is I followed the link and I understood the concept but I couldn't figure out how to implement it into my current site.
I think Drupal is a great platform to leverage OOCSS because of modules like Skinr.
At the start of this thread I through an approach similar to OOCSS could be achieved using a views catalogue because we are all pretty familiar with how the markup in views looks, allowing a pure css approach.
Unfortunately semantic views came along, which completely destroys the effectiveness of a selector like:
.view.inline .views-row
Your blog post is fascinating, a really creative solution to a common problem, unfortunately modulating that is impossible when you have no concrete mark up.
Once you start combining Skinr with LESS you end up with some really interesting ideas.
It's a shame I can't make it to Copenhagen, It would be great to speak to others more experienced then myself.