cakebaker » css

Sassy CSS

cakebaker — Sat, 08 May 2010 13:13:11 +0000

Those who follow me on Twitter probably know about my love-hate relationship with CSS. To ease the pain of working with CSS I switched to Compass, a stylesheet authoring framework. With Compass, you write the stylesheets in Sass (Syntactically Awesome Stylesheets) instead of CSS. Sass is basically CSS without brackets and semicolons, as you can see in this example from the Sass website:

h1
  height: 118px
  margin-top: 1em

.tagline
  font-size: 26px
  text-align: right

However, with the upcoming Sass 3 (it is planned to be released on May 10, 2010) a new format gets introduced: SCSS (Sassy CSS). It is a superset of CSS, i.e. each CSS file is automatically a SCSS file (you simply have to change the file extension from “css” to “scss”). So the example from above in SCSS is just plain CSS:

h1 {
  height: 118px;
  margin-top: 1em;
}

.tagline {
  font-size: 26px;
  text-align: right;
}

Not that exciting, isn’t it?

Where SCSS shines is when it comes to the integration of the Sass features (nesting, variables, and mixins) into this format. The devs did a very good job to make it feel like those features are native CSS.

Let’s have a look at some examples.

Nesting:

#header {
  background: gray;
  a {
    background: white;
    color: black;
  }
}

Variables:

$background_color: gray;

#header {
  background: $background_color;
}

Mixins:

@mixin red_border($border_width) {
  border: $border_width solid red;
}

#box_a {
  @include red_border(5px);
}

#box_b {
  @include red_border(10px);
}

Personally I really like the new SCSS format, and I can only recommend to try it out for yourself.

Link-like buttons

cakebaker — Fri, 20 Nov 2009 08:05:37 +0000

Sometimes you want to make a button look like a link. For example, in an admin interface you might want to have “links” to edit and delete articles. The “edit” link will be a normal link. But for the “delete” link you “cannot” use a normal link, because a delete action changes the state on the server and hence it should be performed using POST. Therefore the need for a button.

Thanks to CSS it should be easy to make a button look like a link, that’s what I thought when I started. But as usual when I work with CSS, what seems to be easy is not that easy… Anyway, here is the solution:

First the HTML code. Nothing special here, the only thing to note is that I had to use a “button” instead of an “input” element due to some CSS issues with Konqueror.

And here the CSS (thanks to Natalie Downe for her article Styling buttons to look like links, from where I got some of the settings below):

button.link {
  -moz-user-select: text;
  background: none;
  border: none;
  cursor: pointer;
  color: blue;
  font-size: 1em;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  overflow: visible;
  width: auto;
}

This worked fine in Konqueror, but in Firefox there was always a padding of 2px. And of course I had no clue why. As you can see in the CSS snippet above, the padding was already set to 0… Fortunately, I found the solution in a comment of the aformentioned article:

button::-moz-focus-inner {
  padding: 0;
  border: none;
}

To use such link-like buttons in your own application you have to adapt the CSS to your own needs.

Have fun :)

Faster CSS development with the blueprint framework

cakebaker — Mon, 13 Aug 2007 14:45:33 +0000

If I have to work with CSS, it is often a struggle for me and takes a lot of time. And so I always wondered if there is not a better way to work with CSS…

Fortunately, some days ago a CSS framework called blueprint has been released. It defines sensible default values and provides a grid to make layouting a breeze.

I don’t have used it for a complex layout yet, but creating a simple two-column layout with a header and a footer was pretty simple:


    
        Title
    
    
        sidebar
    
    
        content
    
    
        footer

I didn’t had to write any CSS myself for this example. The only thing I had to do was to include the blueprint CSS file with:

// screen.css is located in app/webroot/css
echo $html->css('screen');

I think with having such a framework, the days of writing all CSS myself are gone ;-)

Referencing CSS files

cakebaker — Wed, 14 Mar 2007 10:42:55 +0000

Some time ago I wrote a post titled “Referencing Javascript files” in which I explained how you can reference Javascript files.

Now I noticed that the same approach also can be used for CSS files. For this purpose an additional parameter was added to the css() function in the HtmlHelper in CakePHP 1.2. So to load a page-specific CSS file you can add the following code to your view (notice the fourth parameter):

$html->css('page_specific', null, null, false);

Or if you want to load multiple CSS files:

$html->css(array('first', 'second'), null, null, false);

To make those snippets work you must have the variable $scripts_for_layout in your layout:

It is the same variable used in the approach to reference Javascript files.

Do we really need HTML and CSS on the web?

cakebaker — Sat, 07 Oct 2006 15:42:37 +0000

A provocative question, I know. But I like to try to get to the bottom of something from time to time, and to give my fancy full scope ;-)

Let’s start with another question: what do we do on the web? We read news, we compare prices, we buy products, we learn, we look at pictures, etc., in short we are interested in content. Content is king. So the design of the sites is not that important. Of course it is more pleasant if a site has a nice design, but that’s not the reason a site is visited. It’s because of its content.

So we can say the web is about content. Ok. But HTML and CSS are primary for design purposes. Hm. Could it be that HTML and CSS are a wrong solution for websites? It is possible. There are some indicators for that:

HTML and CSS are (too) complex, which makes it difficult for non-technical people to create websites
too much time must be invested to make a website look correct in the different browsers
extra work is needed if a website should be accessible for disabled people

What could be an alternative? I think an alternative approach should be similar to plain-text email, with no possibilities to format anything. So it would be really easy to create content, just open an editor and start writing (like writing an email). And you would no longer have to worry about the different browsers, because the content is shown in the way it was entered, with just one font and one font size…

What do you think about this topic?

CSSplay

cakebaker — Thu, 24 Aug 2006 09:26:29 +0000

An interesting site: CSSplay provides a lot of examples of what can be done with CSS. It is impressive what can be done with CSS (especially for someone like me who often struggles with CSS *g*).

Seven free layout templates for CakePHP

cakebaker — Fri, 07 Jul 2006 11:20:48 +0000

Shunro Dozono, a baker from Japan, has ported the designs from Contented Designs to CakePHP. They are a good starting point for creating your own layout if you do not want to create one from scratch.

Tutorial: Creating CSS menus

cakebaker — Sun, 09 Apr 2006 09:47:42 +0000

Andy Dawson (aka AD7six) has written a tutorial about creating a CSS menu. The focus of the tutorial is not on the CSS part, but rather on creating the necessary CakePHP helpers/components.

Some CSS trouble with input and textarea in Firefox

cakebaker — Thu, 02 Feb 2006 10:39:28 +0000

Yesterday, I noticed some weird behaviour in Firefox. I have had an input field and a textarea formatted with CSS like:

input, textarea
{
    color: red;
    font-size: 0.8em;
}

If you look at this CSS, you would assume that a text you enter will look the same whether it is in the input field or the textarea. Well, with Konqueror, that is true. But with Firefox, it is different. It seems to me that by default different fonts are used for the two elements. So you have to specify the font family in the CSS:

input, textarea
{
    color: red;
    font-family: Verdana,Arial,Sans-serif;
    font-size: 0.8em;
}

And so it works with Firefox, too.