Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

Forums / Craftwork / Client-side / Cotonti UI elements

Developing a set of CSS3 interface elements

#1 2012-01-12 17:40

Hi people,

Recently I've been working on a new base theme for Siena. The goal is to provide a very basic HTML5 template, with enough flexibility to easily change the layout and add new elements. I also want to make it very easy to build good looking user interfaces, by providing a set of CSS3 interface element stylesheets. I've started with buttons and icons, and I intend to extend this to include other common interface elements such as form fields, dialogs and tooltips.

The buttons are more or less done now. Included features:

  • 13 colors
  • 3 sizes
  • 5 styles
  • Horizontal and vertical grouping
  • 15 icons (more to be added)

You can have a look and download the CSS here.

Let me know what you think and any suggestions you may have.

#2 2012-01-12 18:11

Awesome stuff. The icons are a great idea. This is exactly what Cotonti needed! 

#3 2012-01-12 19:23

I'm sorry, I maybe missed the picture for icons (I mean downloads - i think it's a sprite)...

But what I saw on preview is really cool! It will give styles for default and make things easier!

do continue with forms...

#4 2012-01-12 19:42

Good stuff, Gert!

#5 2012-01-12 20:20

Thanks guys. It's a work in progress, I just added tooltips. I'm trying to make it flexible so you can re-use class names between elements, for example the colors are used by both the buttons and the tooltips.

The icons are indeed a sprite (4 images: white, black, 2 sizes)

This post was edited by GHengeveld (2012-01-12 21:02, 6 years ago)
#6 2012-01-12 22:21

very coolyes

ХаЧу ЧПУ для форума!!! ХаЧу ДаКуменцию к ДвИжКу!!! ХаЧу АпиСания TPL ТаГов!??
#7 2012-01-12 23:32

do not quite understand, as used??

#8 2012-01-13 12:23

Yes yes, cool new stuff. xD

#9 2012-02-06 08:59

did you thought about giving it styling for errors in form fields ?
would be nice to see some red error warnings in there... or do i missed them somewhere?

bootstrap offers an error, alert, success and primary class to add to you elements to make it red, orange, green or blue

Added 1 minute later:

also if using theme.css files you could think about embeding the sprites with base64 encode into the css files.

Added 2 minutes later:

also for icons:
well thats a font-face font but there where some of these icons as images out there.

URL shortener: <a href="!7AD5C7">!7AD5C7</a>
#10 2012-02-06 14:51

Yes, I intend to add state styles, as used by cot_error().

Data-URIs for images aren't supported in all browsers. I've opted to implement something that works cross-browser first. The same goes for @font-face. Actually the best solution would be to use inline (base64) SVGs, but that's not supported at all. @font-face is problematic in terms of accessibility because screen readers don't know a character is actually an icon (image).

Update: I did some research into data-uris and found an interesting article on the topic. It seems it's possible to get data-uris working in most browsers, including IE6 and 7.

I recently added some more interface elements:

This post was edited by GHengeveld (2012-02-06 15:05, 6 years ago)
#11 2012-02-06 15:54

as for the icons i just had that link. the same icons are existing as regular images that you could use.

i've had a quite extensive research on the base64 stuff for a couple of weeks for a client.
from my point i can confirm that base64 encoded data uri's are fully supported starting IE7...

well, if you want to know, you even could double encode the contents in all modern versions and browsers.

besides that... do they rounded corners and gradients and all other fancy stuff work in ie6 anyway? no...

Added 3 minutes later:

also the icons in buttons seem a bit missaligned. maybe you can dead center them?

Added 49 seconds later:

also maybe add different cursors to disabled elements

Added 1 minute later:

maybe add flat tooltips. the user maybe gets confused with the button-looking tooltips you have now.

URL shortener: <a href="!7AD5C7">!7AD5C7</a>
#12 2012-02-07 08:11

Ok, all icons use data-uris now. No more sprites.

#13 2012-02-07 16:34

sorry i didnt wanted to only nag. i like these set very much. its a good piece of work...
good job!

URL shortener: <a href="!7AD5C7">!7AD5C7</a>