Create A Base Style.css File
If you’re building more than a couple of Drupal themes it can be very beneficial to create a base style.css file first.
In short, this is a stylesheet which acts as a starting point when creating a new theme, and contains all the things you’ll need to style. Organizing, and even indexing, this base style.css file will allow for maximum efficiency when building, and by creating a comprehensive base style.css file you can also save yourself the worry about whether or not you’ve left anything out!
The following is a list of most things which need styling if, for example, you wanted to cover all of the core modules:
- admin
- aggregator
- blockquote
- book
- breadcrumb
- code
- comments
- footer
- forms
- forms - admin tables
- forms - search
- forms - user-login-form
- forum
- general
- header
- layout
- links
- lists
- messages
- mission
- node
- pager
- poll
- pre
- primary links
- progress bar
- secondary links
- sidebar
- tables
- tabs
How you arrange the style.css is a personal thing. I start with general rules first, then specific areas (header, sidebar etc.) and then everything else afterwards, but I know that other people group all their layout elements in one place and all their other styling (colors etc.) in another, so it’s just a case of what you prefer.
Anyway, I hope the list provides a good starting point for anyone wanting to create their own base style.css file. It might seem like a lot of stuff, but once you get it organized it’ll save you time in the long-run.
Bookmark/Search this post with:
Hi, I'm Laurence and this is my Drupal blog.
Don't Make Me Think!
Pro Drupal Development
PHP Cookbook
Will You Please Be Quiet, Please?
reminds me a bit of http://www.alistapart.com/articles/frameworksfordesigners
Do you have or know of a compilation of all built-in classes and ids that a stock Drupal installation generates?
How about an example base stylesheet you could post?
Thanks!
Hi guys,
in answer to your queries:
- Soxofaan - thanks for the link, I hadn't seen this article. It seems a few of the bigger designers have been discussing this base/framework idea recently - Eric Meyer being a good example with his reset CSS styles, which I briefly discussed with Dan on a previous post.
- Rich - I don't have one, but just having a quick search lead me to this post on drupal.org, and I'm sure you could find a few others along the same lines.
- Dan - A good idea. Maybe the kind of thing that would benefit from actually being released via drupal.org, although I'm not sure if you can do that with single files such as a stylesheet. If anybody knows let me know :)
Does anybody have some experiences with some css framework, like YUI Grids CSS (yahoo)?
Or you prefer your own built css framework?
About releasing single file to drupa.org - you could start a project, and project can consists of just one file. In your case style.css.
I don't know where is the right place for submit this (http://drupal.org/project/Themes ?).
Other way is to commit it just to drupal.org cvs repo as some small project (without releasing it somewhere under http://drupal.org/project/)
It could even evolve to some kind of drupal themes base framework one day :)
Hi, I am tryibg to find where I can download the css stylesheet (on your Create A Base Style.css File) but cannot seem to find out where to do this.
If it is basically a file containing a css stylesheet to be applied to a web page, it is definately what I need and would appreciate it if you could contact me as soon as you get this message to tell m how I can download this file.
Kindest Regards,
Tina
Hi, I am tryibg to find where I can download the css stylesheet (on your Create A Base Style.css File) but cannot seem to find out where to do this.
If it is basically a file containing a css stylesheet to be applied to a web page, it is definately what I need and would appreciate it if you could contact me as soon as you get this message to tell m how I can download this file.
Kindest Regards,
Tina
Hi Tina,
there isn't currently any download with this post. The list is just intended as a starting point for people thinking about what needs to be covered when creating their own base style.css file. That said, the idea of releasing such a file is a good one and has previously been suggested. The trouble, as you can see by the recent lack of posts on my part, is that I'm currently swamped with work.
My suggestion would be that you look at the style.css of one of the core themes, as these by default should cover all of the areas listed. Of course, some of the rules included in these stylesheets will be specific to the theme, but you should pretty easily be able to filter those out (perhaps by comparing with my list above), and shape a base style.css of your own.
Anyway, hope that helps you out,
Laurence.
How about an example base stylesheet you could post?
Thanks!
thank you administrator..
Thank you very much for this useful article and the comments. I love this site as it contains good materials.
Regards
Thank you, my friend really super css files
Post new comment