home
about
archivesA New Design ! (and some thoughts about web design and Typo theme creation)
As you can see this blog has a new design. This will also be the future design of the poll and survey website ThinkoSphere.com. In order to make this design, I worked closely with professional designers that I really congratulate for their awesome work (references available upon mail request).
Web Design
About the web design, I have recently learnt two important things that you, as a web developer, have known for long:
- Separate the content and the design.
- Do not use tables for your layout
And actually the second one is implied by the first one. The main idea behind a good design is that you should be able to change your design without having to change your html code, that is you only need to change the CSS code.
Even when it is done properly I still hate CSS. Indeed, I hate the fact I cannot declare variables in CSS. I think it is a language for computers not humans, just like xml.
For example, you have this CSS :
.gray_box .content h3{
font-weight:bold;
}Corresponding to this (x)html:
<div class="gray_box">
<div class="content">
<h3>December 2008</h3>
</div>
</div>What I would like to write in order to define the style is something like:
style.gray_box.content.h3.font-weight = 'bold';And for the color something like:
style.gray_box.content.h3.color = my_beloved_blue;where ‘mybelovedblue’ is a variable.
I am pretty sure there exists some converters from serialization language such as xml, json, yaml to CSS. I just need to find them ! Do not hesitate to comment if you can help me !
Typo Theme
To export the design into a Typo theme I followed mainly 2 articles from 2 great Rails community contributors:
- one from Geoffrey Grosenbach
- one from Frederic De Villamil (in French)
The most important thing is definitely to understand how the routes to the theme are defined. See for that Geoffrey’s article. Then when you have in your regular (not Typo) Rails application CSS file something like “url(../images/layout/headerbg.png)” you just need to replace it with url(../../images/theme/layout/headerbg.png). Notice the added ‘../’ and ‘theme’.
Any comment about this blog design, web design and typo theme appreciated !
Posted in Ruby on Rails | 5 comments | atom
Trackbacks
Use the following link to trackback from your own site:
http://harryseldon.thinkosphere.com/trackbacks?article_id=28
The closest I have ever heard to what you’re looking for is http://rcss.rubyforge.org/.
>I have never used it though, so I have no idea how good it is, but sometimes I really miss using something similar myself, particularly for image paths in CSS (it sucks that they have to be hardcoded, what do you do when you move your application to a different path?).
Thanks for the link.
RCSS looks interesting but it seems too simple. You can only specify some constants inside your CSS file. What I have in mind is to use CSS as a serialization language, meaning I want to define my styles using a structure (or class) in ruby for instance and then I want to serialize the class in CSS.
Basically I made a quick search on Google with “xml to css” and it looks like there exist a bunch of answers. So I could simply convert my structure to xml and then to CSS.
actually is very fun to use
Interesting application. Very nice site design. The site was very slow when I visited (Sun, 11:15PM CST) but I might have caught it at a bad time. Congratulations on launching your first Rails site!
Best regards, Bill
Thanks Bill, I ‘d like to tell you it is because billion people connected to the site. But as it is not (yet) the case, I will check that with my host ;-)