Support for CSS class tags

In an earlier post I described how Run BASIC can use the DIV and CSS statements to style a web page. That works well for styling the different parts of a web page, but not for styling individual things on a page.

One new addition to Run BASIC is the ability to add a CSS class tag to an object on a web page, so that it can be manipulated.

For example the following would create a link and set a class to "button".

link #doMyBidding, "GO", [go]
#doMyBidding cssclass("button")

And the following statement would add the CSS needed to style the link (or any object that has the class tag "button"):

cssclass ".button", "{ put some css styling in here }"

Here is a link to a video demonstrating how this all works.

http://www.youtube.com/watch?v=1qomg67VdF0

BASIC and CSS

One of the important aspects of integrating a programming language with web development is page layout. Until recently this would have meant inserting lots of HTML tags into your source code. You can do this with Run BASIC.

However there is a better way. It is called CSS (Cascading Style Sheets). This provides a way to wrap the things on your web page with tags that you give your own names to, and you defined the appearance of the stuff wrapped in those tags somewhere else. This way your program's code has very little extra stuff in it to clutter up your code. If there is too much clutter it can be very hard to understand what code means, and this can slow you down and lead to bugs.

So, Scott McLaughlin and I have begun to integrate CSS with Run BASIC. We added a CSSID statement (originally this blog entry had this as CSS, but we changed the command), a DIV statement, and an END DIV statement. Here's a very short example:

cssid #myTag, "{ background: #FFDDDD; font-family: tahoma }"

div myTag
print "count to ten"
for x = 1 to 10
print x
next x
end div

Okay, so this displays all the text printed between the DIV and the END DIV with a light red background, and using the tahoma font. The #myFont token isn't a handle like the ones used for files and GUI controls. The # is simply part of CSS syntax.

DIV statements can be nested, and the contents of one DIV block will be rendered on the page nested inside of each other.

There is a lot more that can be done with CSS, and we're trying to explore what are the simplest and most useful things to include in Run BASIC.

We will be posting a screencast in the next few days that shows how this works.