Skip to Content
DocsDeveloper GuideCSS & StylingOverview

CSS & Styling

WebF provides comprehensive CSS support that enables you to build beautiful, responsive user interfaces using familiar web styling techniques. This section covers all aspects of styling your WebF applications.

What’s Covered

Layout

Master CSS layout techniques to structure your UI:

  • Flexbox - One-dimensional layouts with powerful alignment controls (recommended)
  • Positioned Layout - Precise element placement with absolute, relative, fixed, and sticky positioning
  • Flow Layout - Standard block, inline, and inline-block layouts
  • Box Model - Understanding dimensions, spacing, and box-sizing
  • RTL Support - Right-to-left layout for internationalization

Styling

Learn to style your components with:

  • Colors - Text, background, and border colors
  • Backgrounds - Solid colors, gradients (linear and radial), and images
  • Borders - Styles, widths, colors, and rounded corners
  • Shadows - Box shadows for depth and elevation
  • Filters - Visual effects like blur, brightness, and contrast
  • Typography - Fonts, text styling, and @font-face

Animations

Add motion and interactivity:

  • Transforms - Translate, scale, rotate, and skew elements
  • Transitions - Smooth property changes on state changes
  • Keyframe Animations - Complex timeline-based animations
  • Clip Path - Custom shapes and clipping effects
  • Performance - Hardware-accelerated animations

Responsive Design

Build adaptive interfaces:

  • Media Queries - Adapt to different screen sizes
  • Viewport Units - Responsive sizing with vw, vh, vmin, vmax
  • CSS Variables - Dynamic theming and responsive values
  • Responsive Patterns - Common mobile-first design patterns

Supported CSS Features

WebF implements essential CSS features that enable modern web frameworks to run seamlessly:

Layout Systems

  • ✅ Flexbox (recommended for most UIs)
  • ✅ Positioned (absolute, relative, fixed, sticky)
  • ✅ Block, inline, and inline-block
  • ✅ RTL (right-to-left) support
  • ⏳ CSS Grid (coming soon)
  • ❌ Float and table layouts (not supported)

Styling Features

  • ✅ Colors (hex, rgb, rgba, hsl, hsla, named)
  • ✅ Backgrounds (color, image, gradients)
  • ✅ Borders (style, width, color, radius)
  • ✅ Shadows (box-shadow, text-shadow, drop-shadow)
  • ✅ Filters (blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, saturate, opacity)
  • ✅ Backdrop filters (backdrop-blur)
  • ✅ Opacity and visibility

Animations & Transforms

  • ✅ 2D and 3D transforms
  • ✅ Transitions (smooth property changes)
  • ✅ Keyframe animations (@keyframes)
  • ✅ Clip-path
  • ✅ Hardware-accelerated transforms

Typography

  • ✅ Font families (web-safe and custom)
  • ✅ @font-face for custom fonts
  • ✅ Text styling (weight, style, decoration)
  • ✅ Text alignment and spacing
  • ✅ Text overflow and wrapping

Values & Units

  • ✅ Absolute units (px)
  • ✅ Relative units (em, rem, %)
  • ✅ Viewport units (vw, vh, vmin, vmax)
  • ✅ calc() for calculations
  • ✅ CSS variables (custom properties)

Selectors

  • ✅ Element, class, and ID selectors
  • ✅ Attribute selectors
  • ✅ Pseudo-classes (:hover, :active, :focus, :nth-child, etc.)
  • ✅ Pseudo-elements (::before, ::after)
  • ✅ Combinators (descendant, child, sibling)

Media Queries

  • ✅ Screen size queries (min-width, max-width)
  • ✅ Orientation queries (portrait, landscape)
  • ✅ Responsive design patterns

Working with CSS in WebF

We recommend using Tailwind CSS v3 for styling your WebF applications. WebF has excellent support for Tailwind CSS v3 utilities (some utilities may not work if they use unsupported CSS features).

<div className="flex items-center justify-center bg-blue-500 text-white p-4 rounded-lg">
  Tailwind Styled
</div>

Note: Tailwind CSS v4 support is planned for 2026.

CSS Stylesheets

External stylesheets work as expected:

import './styles.css';
 
function App() {
  return <div className="container">Content</div>;
}

CSS Modules

Scoped styles with CSS Modules:

import styles from './Button.module.css';
 
function Button() {
  return <button className={styles.primary}>Click me</button>;
}

CSS-in-JS

Popular CSS-in-JS libraries work seamlessly:

import styled from 'styled-components';
 
const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
`;

Inline Styles

Use JavaScript objects for inline styles:

<div style={{
  backgroundColor: '#007bff',
  color: 'white',
  padding: '20px',
  borderRadius: '8px'
}}>
  Styled Component
</div>

Best Practices

Use Flexbox for Layouts

Flexbox provides the best performance and flexibility in WebF:

.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

Use CSS Variables for Theming

Make your app easily themeable:

:root {
  --primary-color: #007bff;
  --text-color: #333;
  --spacing: 20px;
}
 
.button {
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: var(--spacing);
}

Mobile-First Responsive Design

Start with mobile styles and enhance for larger screens:

/* Mobile first */
.container {
  padding: 10px;
}
 
/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}
 
/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    padding: 40px;
  }
}

Framework Integration

WebF’s CSS support works seamlessly with popular frameworks:

  • React - Inline styles, CSS Modules, styled-components, Emotion
  • Vue - Scoped styles, CSS Modules
  • Svelte - Component-scoped styles
  • Tailwind CSS - v3 support (some utilities may not work if they use unsupported CSS features)

Performance Considerations

Batch Style Changes

WebF’s async rendering batches DOM changes automatically, but you can help by grouping style updates:

// Changes are automatically batched
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'blue';

Use CSS for Animations

CSS animations perform better than JavaScript animations:

/* ✅ Good: CSS animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.fade-in {
  animation: fadeIn 0.3s ease;
}

Next Steps

Dive into specific topics:

  • Layout - Master Flexbox, positioning, and flow layouts
  • Styling - Colors, backgrounds, borders, and shadows
  • Animations - Transforms, transitions, and keyframes
  • Responsive Design - Media queries and adaptive patterns

Or explore related topics:

Build ToolsCSS Layout