A 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
home
about
archives
