B4J Library MashCSS : A CSS Builder Helper Class

Ola

Well, I've always wanted to learn all the fuss there is to learn about CSS. In the process I decided I might as well just create a helper class that I could use to build my css styles for any web framework I might want to use.

The helper class you pass it some properties and it generates the class code, as an example, I played around with some variables. For ease of reference I decided to break the CSS definition to small details as possible. Everything else not in the other types is under .Text type

Dim css As MashCSS
    css.Initialize
    css.BackGround.Color = "red"
    css.BackGround.repeat = "none"
    css.Border.Width.left = "10px"
    css.Border.Width.top = "20px"
    css.Font.fontFamily = "the font"
    css.Font.weight = "200px"
    css.Text.Color = "green"
    css.Text.display = "none"
    css.Transform.origin = "center"
    css.Transition.duration = "2s"
    css.Animation.direction = "bottom"
    css.Lst.style = "circle"
    css.Margin.bottomleft = "10px"
    css.Filter.webkitfilter = "xxx"
    css.Height.size = "100px"
    css.Width.size = "200px"
    css.Padding.bottomright = "5px"
    css.Border.radius.bottomleft = "2px"
    Log(css.Render)

This produces...

{
color:"green";
display:"none";
-webkit-filter:"xxx";
animation-direction:"bottom";
transition-duration:"2s";
transform-origin:"center";
font-family:"the font";
font-weight:"200px";
list-style-type = "circle";
width:"200px";
height:"100px";
background-color:"red";
background-repeat:"none";
border-bottom-left-radius:"2px";
border-left-width:"10px";
border-top-width:"20px";
}

Am cleaning up a few things...

Ta!

 

[Mashiane]

Actually, its easier to read when the generated content is sorted..

{
-webkit-filter:"xxx";
animation-direction:"bottom";
background-color:"red";
background-repeat:"none";
border-bottom-left-radius:"2px";
border-left-width:"10px";
border-top-width:"20px";
color:"green";
display:"none";
font-family:"the font";
font-weight:"200px";
height:"100px";
list-style-type:"circle";
transform-origin:"center";
transition-duration:"2s";
width:"200px";
}