DOCSEARCHbyAlgolia
Submit Docs

Fower Documentation

website·Indexed 30 days ago

https://fower.vercel.app/

A utility-first CSS framework using Atomic Props to accelerate development. Fower provides a core engine (@fower/core) for vanilla JavaScript and a dedicated component library (@fower/react) for React and React Native, featuring support for TypeScript, responsive design, and SSR with Next.js.

Tokens
36.9K
Snippets
293
Records
338
Agent score
74%

What's inside Fower

  1. Overview of Fower CSS-in-JS

    Fower is a CSS-in-JS library that replaces native CSS by allowing developers to write styles declaratively within JSX. Because styles are written in JavaScript, they can leverage programming constructs such as variables, conditions, and functions to manage UI structure and styling in a single, cohesive place.

  2. Overview of Fower Layout toolkit

    Fower is a utility-first CSS framework that includes a specialized Layout toolkit. Unlike standard Flexbox, which uses abstract concepts like 'main axis' and 'cross axis' (e.g., justify-content, align-items), Fower Layout uses intuitive spatial directives that remain consistent regardless of whether the container is a row or a column. It is designed to mirror the experience of modern design tools like Figma and Sketch, focusing on four core elements: container, element, direction, and spatial relationship.

  3. Overview of Fower Layout toolkit

    Fower is a utility-first CSS framework that includes a specialized layout toolkit. Unlike standard Flexbox, which uses axis-based properties (main axis, cross axis) that can be counter-intuitive when directions change, Fower Layout uses directives based on spatial relationships (e.g., toRight, toBottom). This approach is designed to align with the intuitive behavior of design tools like Figma and Sketch, as well as modern UI frameworks like SwiftUI and Flutter.

  4. Overview of Fower style library

    Fower is a framework-agnostic style library that enables UI development using 'Atomic Props' written directly in markup. It provides a subset of CSS focused on the most essential properties to cover the majority of UI development needs. Fower supports Web, React Native, and Mini Programs, allowing for a consistent styling approach across different platforms. It is built with TypeScript for full type safety and IntelliSense support in JSX.

  5. Overview of Fower styling library

    Fower is a styling tool library designed for efficient UI development across multiple platforms, including React, Vue, and React Native. It employs a utility-first approach using "Atomic style props" (CSS-in-HTML), ensuring type safety for better IDE intellisense and eliminating the need for separate CSS files. This allows developers to maintain a consistent styling workflow regardless of the target framework.
    import { Box } from '@fower/react'

<Box toCenterY p-10 w-260 rounded-10 shadow>
  <Box as="img" circle-48 src="/img/jobs.jpg" />
  <Box ml-10>
    <Box textXL fontBold> Steve Jobs </Box>
    <Box as="span" gray800> Co-founder of Apple Inc. </Box>
  </Box>
</Box>

  6. Overview of Fower Layout toolkit

    Fower is a utility-first CSS framework that includes a specialized Layout toolkit. Unlike standard Flexbox, which uses abstract concepts like 'main axis' and 'cross axis' (e.g., justify-content, align-items), Fower Layout uses intuitive, direction-based directives that mirror design software like Figma and Sketch. This approach reduces the cognitive load on developers by focusing on four essential elements: container, element, direction, and spatial relationship.

  7. Overview of Fower Atomic Props and CSS-in-JS

    Fower is a framework-agnostic CSS-in-JS solution that allows developers to build complex UIs by composing Atomic Props. It uses a "Key as Value" pattern to reduce the amount of code required for styling. Key features include:

    • Scoped Styles: Styles are scoped by default to prevent global namespace conflicts.
    • Type Safety: Full TypeScript support providing type definitions, IntelliSense, and self-documentation.
    • Framework Agnostic: Compatible with various frameworks and environments, including React, Vue, and React Native.

  8. Overview of Fower Layout toolkit

    Fower is a utility-first CSS framework that includes a specialized layout toolkit designed to simplify the spatial relationship between containers and items. Unlike standard Flexbox, which uses axis-based terminology (main axis, cross axis), Fower uses intuitive, direction-based directives that remain consistent regardless of whether the container is a row or a column.

  9. Overview of Fower Layout toolkit

    Fower Layout is a utility-first layout tool provided by the Fower framework. It aims to improve the developer experience over standard Flexbox by using intuitive directives that describe spatial relationships (e.g., toRight, toCenter) regardless of whether the container is a row or a column, reducing the cognitive load associated with Flexbox's main and cross-axis logic.

  10. Understand the benefits of Atomic Props in Fower

    Fower utilizes Atomic Props (utility-first styling) to decouple visual styling from content. This approach provides several advantages over traditional CSS development:

    • Increased Development Speed: Styles are written directly on the template, eliminating the need to switch back and forth between HTML and CSS files.
    • No Naming Overhead: Developers no longer need to invent semantic class names for every single element, which reduces cognitive load and time waste.
    • Automatic Dead Code Elimination: Because styles are inline as props, deleting a component automatically removes its associated styles, preventing the accumulation of unused CSS.
    • Scoped Styles: Styles are naturally scoped to the element they are applied to.
    • Team Consistency: Fower acts as a curated subset of CSS, providing a standardized set of essential styling tools for team collaboration.

  11. Use Atomic props for styling in Fower

    Fower uses Atomic props to apply styles directly within markup instead of using className. These props act as style units that are applied to HTML elements or custom components. Unlike static CSS atomic classes, Atomic props are dynamic and generate unique atomic class names to ensure styles are scoped and do not conflict globally.
    <div bgRed300 text3XL>
  Fower
</div>
    <Box bgRed300 text3XL> Fower </Box>

  12. Use Fower for cross-platform UI development

    Fower is designed to unify the UI development experience across different environments. In addition to standard web browsers, it supports non-browser platforms such as React Native and applets.