Share My Creation [B4X] MiniCSS

Version 0.20

Library: https://www.b4x.com/android/forum/threads/b4x-web-minicss.170299/

 

[aeric]

Example:

' Example 1: Simple raw CSS parsing
cssBuilder.Rule(".my-button") _
.ParseRaw("background-color: #dedede; color: white; cursor: pointer; padding: 8px; width: 100%; border: none; text-align: left; font-size: 15px; margin-bottom: 3px;") _
.Property("border-radius", "4px")

' Example 2: Parse with pseudo-classes
cssBuilder.Rule(".accordion") _
.ParseRawWithRules(".accordion", $"
    background-color: #f1f1f1;
    cursor: pointer;
    padding: 18px;
    width: 100%;
 
    &:hover {
        background-color: #ddd;
    }
 
    &.active {
        background-color: #ccc;
    }
"$)

' Example 3: Direct parsing in CSSGenerator
cssGen.AddRule(".card")
cssGen.ParseRawCSS($"
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
"$)

' Example 4: Parse full CSS block with media query
cssGen.ParseCSSBlock("", $"
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
 
    .sidebar {
        width: 100%;
        margin-bottom: 20px;
    }
}
"$)

Output:

.my-button {
  background-color: #dedede;
  color: white;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 15px;
  margin-bottom: 3px;
  border-radius: 4px;
}

.accordion {
  background-color: #ddd;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
}