CSS, JavaScript JESS: Easy Box Styling

This is a technology preview of the styledBox module of the JESS framework I develop.

This module uses ideas of the CSS3 Background and Borders specification, and it allows to use sophisticated box backgrounds and borders by just setting a class within the HTML code. This makes the JESS framework the easiest way to create resizable boxes with round corners, shadows, non-linear borders etc.

There is only a single border/background image used and it's automatically stretched/shrunk to fit the box size. The border and background is rendered by CSS, not by Javascript, so it respects any dynamic change of the box: when the box is resized by changing the window size, font size or by a script, the background image is resized as well.

See several examples to see the JESS framework in action. See the interactive Example #6 to see live style switching and the behavior on box/font resizing.

A library of background/border styles will be available to choose a box style from, and the style definition code will be generated automaticaly. Only the proper class name must be applied to a box in HTML code to trigger the JESS.styledBox rendering.

<!-- Example of the style usage -->
<div class="JESS-styledbox-blueround">
   Lorem ipsum dolor sit amet...
</div>

(See the result here.)

However, developers are still able to use their own styles. In this case, the style definition must be provided first so that the class can be triggered. Anyway, the process is easy and to be described later. A fallback also will be available: if the graphic style can't be applied, a standard CSS background and border are applied to the box.

Tested in IE7, IE8, FF 3.5, Opera, Safari, Chrome. IE6 is not supported (yet).

Published on Říjen 26, 2009 by pixy • Category: CSS, JavaScript

5 komentářů to “JESS: Easy Box Styling”

[1] by vmachacek on 2. 8. 2010, 20:10

Hi Pixy,

it looks really neatly. When are you going to release it?

[2] by vmachacek on 2. 8. 2010, 20:35

Why it is doing 9 request? Isn't it too slow?

[3] by Petr Staníček on 2. 8. 2010, 21:15

Although I planned finish the whole framework the technology runs faster than I can. Meanwhile many other solutions appeared around and esp. HTML5 shows up and seems to be very vital and usable. I have to consider this (JESS framework) only a working prototype or a proof-of-concept. Alas, JESS has to be pronounced „dead on arrival“, I'm too slow at this moment when technology becomes too fast again.

If I started today, I would work with HTML5/canvas.

[4] by vmachacek on 7. 8. 2010, 22:09

But if Im not wrong, IE (all of them) doesnt support HTML5 / Canvas. What then?

[5] by Petr Staníček on 8. 8. 2010, 21:54

In IE. HTML5 Canvas can be simulated by using proprietary technology (VML lib afaik), many canvas drawing libraries do it so and it works (kind of, but works).

Something serious to tell?

required
required; won't be displayed

Texy! formatting supported. Please keep the comments to the point, short and decent. Thank you.