B4J Library MashCSS : A CSS Builder Helper Class

Similar threads

B4J Tutorial CSS Example
B4J Library [class] CSS Utils
B4J Tutorial [WebApp] Web Apps Overview
B4J Tutorial [Server] Building web servers with B4J
B4J Question CSS for tableview in code?

Mashiane

Expert
Licensed User
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

B4X:
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...

B4X:
{
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!
 

Attachments

Mashiane

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

B4X:
{
-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";
}
 

Attachments

Top