CSS, JavaScript JESS: Easy Box Styling

This is a technology preview of the `styledBox` module of the **JESS((Javascript-Enhanced Style Sheets)) framework** I develop.

This module uses ideas of the “CSS3 Background and Borders”:[http://www.w3.org/TR/css3-background/] 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”:[/files/jess-styledbox-preview] to see the JESS framework in action. See the interactive “Example #6″:[/files/jess-styledbox-preview/example-live.html] 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.

/—pre
<!– Example of the style usage –>
<div class=”JESS-styledbox-blueround”>
Lorem ipsum dolor sit amet…
</div>
\—

(See the result “here”:[/files/jess-styledbox-preview/example1.html].)

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 October 26, 2009 by Petr Staníček • Category: CSS, JavaScript

6 Comments to “JESS: Easy Box Styling”

[1] by denera on May 19, 2010, 5:44am

Very genuine!!

[2] by vmachacek on August 2, 2010, 8:10pm

Hi Pixy,

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

[3] by vmachacek on August 2, 2010, 8:35pm

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

[4] by Petr Staníček on August 2, 2010, 9:15pm

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.

[5] by vmachacek on August 7, 2010, 10:09pm

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

[6] by Petr Staníček on August 8, 2010, 9:54pm

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.