CakePHP CSS Enhancements From 1.2 To 1.3

Published on Feb 23, 2011 by Jamie Munro

This article does seem a bit late since CakePHP 2.0 is on it's way.  However, I felt it prudent to point out a few things that I'm really happy to see in the new default CSS provided by CakePHP.

On CakePHP's website, you will find an excellent migration guide from 1.2 to 1.3 here:
http://book.cakephp.org/view/1561/Migrating-from-CakePHP-1-2-to-1-3

It describes in great detail the various changes throughout the entire application and there are a lot of them.  But I think it left out some of the most important stuff, the default CSS provided for people who use the bakery to create their websites!

One of the things that irked me in 1.2 was I had to manually update the paginator helper to display what field is currently being sorted on.  Many times I had to ensure my peers were also doing the same thing and a lot of time was wasted checking this and ensuring it was done correctly.



I'm really happy to see this addressed in 1.3.  If you look at the migration guide, it's there, but quite subtle under the "PaginatorHelper":
"sort(), prev(), next() now add additional class names to the generated html. prev() adds a class of prev. next() adds a class of next. sort() will add the direction currently being sorted, either asc or desc."

What's not mentioned is the associated CSS that accompanies this inside of the cake.generic.css:

th a.asc:after {
content: ' ?';
}
th a.desc:after {
content: ' ?';
}

Unfortunately, the above character encoding didn't carryforward and I'm not sure what symbol it's using; however, it is an excellent start to get you on the right track to simply add some CSS to call attention to the column currently being sorted on.

Additionally there are several small form CSS changes:

- Removing the requirements for "div" tags on the "required" class CSS as well as the "input" class CSS.
- Making checkboxes inline.  This is another simple, but great improvement, always felt I had to do a lot of extra CSS work to get checkboxes working correctly.
- Some stylistic changes to the submit buttons.

If you are interested in changes from 1.3 to 2.0, it currently doesn't look like any just yet (that I could find).  It's still early though.

Tags: CSS | CakePHP | paginator

Related Posts

blog comments powered by Disqus