Module 3: Extracting a UI Design
Once the structure of a screen is in place, CSS is usually the fastest way to make it look intentional. That is the modern styling path for most Codename One projects. It lets you work at the right level of abstraction: UIIDs, spacing, colors, borders, backgrounds, and state-specific styling, without turning every visual adjustment into Java code.
This lesson is really about taking a mockup and giving each part of the screen a styling identity. A form gets its base background. A title area gets transparency and alignment rules. Cards, buttons, filters, and checkout elements each get their own UIID so they can be styled consistently. Once those UIIDs exist, CSS becomes the place where the visual system lives.
The older video mixes CSS with some manual theme-designer work, especially for a few border assets. That was understandable at the time, but the default recommendation today is simpler: stay in CSS unless you have a strong reason to drop lower. The old designer still works, but it is no longer the center of the workflow for new projects.
Good Codename One CSS starts with a few basic habits. Containers and labels often need their transparency, margin, and padding made explicit so the design behaves consistently across themes. Toolbar-related UIIDs often need cleanup because native themes can contribute defaults you do not want. State-specific styling needs to be defined intentionally so the selected or pressed state feels like part of the same design rather than an afterthought.
Spacing is one of the biggest reasons CSS matters. Padding defines breathing room inside a component. Margin defines its relationship to neighboring components. If a screen feels cramped or oddly balanced, the fix is often there rather than in color or typography. That is also why a visually simple design can still take real work to reproduce well: the small spacing choices are doing a lot of the design work.
Inheritance is another important part of maintainable styling. If one button style is really a variation of another, define the common look once and override only the differences. The same idea applies to cards, list entries, and reusable decorative treatments. A style system should reduce repetition, not create it.
So the practical workflow is straightforward. Build the screen structure in Java, give the important elements stable UIIDs, and then use CSS to express the design. Reserve lower-level theme tooling for the rare cases where CSS is not the right fit. That keeps the application easier to read, easier to evolve, and much closer to the way modern Codename One projects are styled.