B4J Library [Web] [B4X] MiniCSS

Version 0.30
GitHub: https://github.com/pyhoon/MiniCSS-B4X

A lightweight CSS generator library for B4X (B4A, B4i, B4J) that allows you to programmatically generate CSS stylesheets from B4X code.

Features​

• Fluent Builder API - Chainable, fluent syntax for creating CSS rules
• CSS Variables - Define and use CSS custom properties
• Media Queries - Responsive design with media query support
• Keyframes Animations - Create CSS animations with keyframes
• CSS Presets - Ready-to-use styles (Flexbox center, Cards, Buttons, Grid, Responsive text)
• Raw CSS Parsing - Parse raw CSS strings into rules
• Minification - Export minified CSS for production
• File Export - Save generated CSS to files
• Cross-platform - Works with B4A, B4i, and B4J

---

Installation​

1. Download the MiniCSS.b4xlib library from prerelease folder to your Additional Libraries folder
2. In B4X IDE Libraries Manager tab, check the MiniCSS library

Quick Start​

Sub Process_Globals
    Private css As MiniCss
    Private cbd As MiniCssBuilder
    Private cps As MiniCssPresets
End Sub

Sub AppStart (Args() As String)
    css.Initialize(Me)
    cbd.Initialize(css)
    cps.Initialize(css)
 
    ' Define CSS variables
    css.AddVariable("--primary-color", "#007bff")
    css.AddVariable("--font-family", "'Arial', sans-serif")
 
    ' Use fluent builder for clean syntax
    cbd.Rule(".container") _
    .Width("100%") _
    .MaxWidth("1200px") _
    .Margin("0 auto") _
    .Padding("20px")
 
    cbd.Rule(".header") _
    .BackgroundColor("var(--primary-color)") _
    .Color("white") _
    .Padding("20px") _
    .FontSize("24px")
 
    ' Use presets for common patterns
    cps.AddButtonStyle(".btn-primary", True)   ' Primary button
    cps.AddButtonStyle(".btn-secondary", False) ' Secondary button
    cps.AddCardStyle(".card")
    cps.AddFlexCenter(".center-content")
    cps.AddGridLayout(".grid", 3, "20px")
 
    ' Generate CSS
    Dim cssOutput As String = css.GenerateCSS
    Log(cssOutput)
 
    ' Save to file (minified for production)
    css.ExportToFile("styles.min.css", True)
End Sub

API Reference​

MiniCss (Core)​

Method	Description
Initialize(Module)	Initialize the CSS generator
AddRule(selector)	Start a new CSS rule
AddProperty(name, value)	Add property to current rule
AddProperties(map)	Add multiple properties at once
AddVariable(name, value)	Define a CSS variable
AddMediaQuery(condition)	Start a media query
AddRuleToMedia(selector, properties)	Add rule to last media query
AddKeyframe(name)	Start keyframe animation
AddKeyframeSelector(selector)	Add keyframe selector (0%, 50%, 100%)
AddKeyframeProperty(name, value)	Add property to current keyframe
GenerateCSS	Generate CSS string
ExportToFile(filename, minify)	Export CSS to file

MiniCssBuilder (Fluent API)​

Method	Description
Rule(selector)	Start a new rule
Property(name, value)	Add property
Properties(map)	Add multiple properties
Width/Height/Color/BackgroundColor/etc.	Shorthand property methods
ParseRaw(cssString)	Parse raw CSS string
ParseRawWithRules(selector, cssString)	Parse CSS with nested rules
Keyframe(name)	Start keyframe
At(selector)	Add keyframe selector
Set(prop, value)	Set keyframe property
SetAll(map)	Set multiple keyframe properties

Shorthand Properties​

Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Margin, Padding, Border, BorderRadius, Color, BackgroundColor, FontSize, FontWeight, FontFamily, Display, Position, Top, Right, Bottom, Left, ZIndex, Opacity, Overflow, TextAlign, LineHeight, LetterSpacing, TextTransform, Cursor, Transition, Transform, BoxShadow, FlexDirection, JustifyContent, AlignItems, Gap, GridTemplateColumns, GridTemplateRows, GridGap, Float, Clear, Visibility, WhiteSpace, WordWrap, WordBreak, OverflowWrap, Resize, UserSelect, PointerEvents

MiniCssPresets (Ready-made Styles)​

Method	Description
AddFlexCenter(selector)	Flexbox center alignment
AddCardStyle(selector)	Card component style
AddButtonStyle(selector, primary)	Button style (primary/secondary)
AddGridLayout(selector, columns, gap)	CSS Grid layout
AddResponsiveText(selector)	Responsive typography with clamp()

Media Queries Example​

' Mobile-first responsive design
css.AddMediaQuery("(max-width: 768px)")
Dim mobileProps As Map
mobileProps.Initialize
mobileProps.Put("flex-direction", "column")
mobileProps.Put("padding", "10px")
css.AddRuleToMedia(".container", mobileProps)

css.AddMediaQuery("(min-width: 769px) and (max-width: 1024px)")
Dim tabletProps As Map
tabletProps.Initialize
tabletProps.Put("padding", "20px")
css.AddRuleToMedia(".container", tabletProps)

Keyframes Animation Example​

' Using fluent builder
cbd.Keyframe("fadeIn") _
    .At("0%") _
    .Set("opacity", "0") _
    .Set("transform", "translateY(-20px)") _
    .At("100%") _
    .Set("opacity", "1") _
    .Set("transform", "translateY(0)")

' Or using core API
css.AddKeyframe("slideIn")
css.AddKeyframeSelector("from")
css.AddKeyframeProperty("transform", "translateX(-100%)")
css.AddKeyframeSelector("to")
css.AddKeyframeProperty("transform", "translateX(0)")

Raw CSS Parsing​

' Parse raw CSS string
cbd.Rule(".custom-class").ParseRaw("color: red; font-size: 14px; margin: 10px;")

' Parse with nested pseudo-classes
cbd.ParseRawWithRules(".button", "background: blue; &:hover { background: darkblue; }")

Export Options​

' Generate CSS string
Dim cssString As String = css.GenerateCSS

' Export formatted CSS (development)
css.ExportToFile("styles.css", False)

' Export minified CSS (production)
css.ExportToFile("styles.min.css", True)

Output Example​

:root {
  --primary-color: #007bff;
  --font-family: 'Arial', sans-serif;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  font-size: 24px;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    padding: 10px;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

Test project: https://www.b4x.com/android/forum/threads/b4x-minicss.170288/

 

[aeric]

Version 0.20

What's New​

1. Add ParseRaw
2. Add ParseRawWithRules
3. Add ParseNestedRules
4. Add RemoveCSSComments
5. Add ParseCSSBlock
6. Add ParseInnerRules
7. Add ParseRawToMap
8. Add indent supports (setIndent, getIndent, setIndentSize, getUseTab, setTabSize)
9. Update GenerateCSS, GenerateMinifiedCSS
10. more...

 

[aeric]

Version 0.30

What's New​

1. MiniCss
   1. Add AddKeyframe
   2. Add AddKeyframeSelector
   3. Add AddKeyframeProperty
   4. Add AddKeyframeProperties
   5. Add ResetKeyframeContext
   6. Updated GenerateCSS
   7. Updated Clear
2. MiniCssBuilder
   1. Added At
   2. Added Set
   3. Added SetAll

 

[aeric]

Updated library description in post #1.

README.md generated by Nemotron 3 Ultra Free