classes #

Optional CSS classes
#

Fuz CSS has three CSS files, two of which are required:

<!-- +layout.svelte --> <script> import '@fuzdev/fuz_css/style.css'; // required import '@fuzdev/fuz_css/theme.css'; // required, can bring your own import '$routes/fuz.css'; // optional, generated by `gen_fuz_css` // ... </script>

The fuz.css file is created on demand with the utility classes that your code uses, if any. For now it requires Gro to generate it, but it isn't hard to make your own integration using the helpers 🗎 gen_fuz_css.ts. I can add a Vite plugin if there's demand.

Utility classes
#

Fuz CSS supports utility classes that cost nothing until you opt-in. The main stylesheet and theme are required and build around CSS custom properties - utility classes offer an orthogonal API that some developers prefer some of the time. They leverage Fuz CSS's base frameworky parts, and are well-integrated with the other APIs and tools.

Fuz CSS exports 🗎 helpers to generate styles on demand based on class usage in your source files, so you can ship the minimal code needed. Some values are interpreted to efficiently support large value ranges, e.g. opacity_0 through opacity_100 and font_weight_1 to font_weight_1000.

$globals include inherit|initial|revert|revert_layer|unset.

Position and display

  • .position_static|relative|absolute|fixed|sticky|$globals
  • .display_none|contents|block|flow_root|inline|inline_block|run_in|list_item|inline_list_item|flex|inline_flex|grid|inline_grid|ruby|block_ruby|table|inline_table|$globals
  • .visibility_visible|hidden|collapse|$globals
  • .float_left|right|none|inline_start|inline_end|$globals
  • .opacity_0-100
  • .overflow_auto|hidden|scroll|clip|visible
  • .overflow_x|y_auto|hidden|scroll|clip|visible
  • .overflow_wrap_normal|anywhere|break_word|$globals
  • .scrollbar_width_auto|thin|none|$globals
  • .scrollbar_gutter_auto|stable|stable_both_edges|$globals

Flexbox and grid

  • .flex_1
  • .flex_wrap_wrap|wrap_reverse|nowrap|$globals
  • .flex_direction_row|column|row_reverse|column_reverse|$globals
  • .flex_grow|shrink_1|0
  • .align_items_center|start|end|baseline|stretch
  • .align_content_center|start|end|baseline|space_between|space_around|space_evenly|stretch
  • .align_self_center|start|end|baseline|stretch
  • .justify_content_center|start|end|left|right|space_between|space_around|space_evenly|stretch
  • .justify_items_center|start|end|left|right|baseline|stretch
  • .justify_self_center|start|end|left|right|baseline|stretch

Sizing and spacing

  • .width|height_0|100|1px-3px|auto|max_content|min_content|fit_content|stretch
  • .width|height_xs5-xl15
  • .top|bottom|left|right_0|100|1px-3px|auto
  • .top|bottom|left|right_xs5-xl15
  • .inset_0|1px-3px|xs5-xl15
  • .p|pt|pr|pb|pl|px|py_xs5-xl15
  • .p|pt|pr|pb|pl|px|py_0|1px-3px
  • .pt|pr|pb|pl_100
  • .m|mt|mr|mb|ml|mx|my_xs5-xl15
  • .m|mt|mr|mb|ml|mx|my_0|1px-3px|auto
  • .mt|mr|mb|ml_100
  • .gap_xs5-xl15
  • .column|row_gap_xs5-xl15
  • .width_upto_xs-xl
  • .width_atleast_xs-xl
  • .height_upto_xs-xl
  • .height_atleast_xs-xl

Typography

  • .font_family_sans|serif|mono
  • .line_height_xs-xl|0|1
  • .font_size_xs-xl9
  • .icon_size_xs-xl3
  • .text_align_start|end|left|right|center|justify|justify_all|match_parent
  • .vertical_align_baseline|sub|super|text_top|text_bottom|middle|top|bottom
  • .word_break_normal|break_all|keep_all|$globals
  • .white_space_normal|nowrap|pre|pre_wrap|pre_line|break_spaces
  • .white_space_collapse_collapse|preserve|preserve_breaks|preserve_spaces|break_spaces|$globals
  • .text_wrap_wrap|nowrap|balance|pretty|stable
  • .user_select_none|auto|text|all|$globals
  • .font_weight_100-900
  • .ellipsis

Colors

  • .text_color_0-10
  • .darken|lighten_1-9
  • .bg|fg
  • .bg|fg_1-9
  • .color_darken|lighten_1-9
  • .color_bg|fg
  • .color_bg|fg_1-9
  • .hue_a-j
  • .color_a-j_1-9
  • .bg_a-j_1-9

Borders and outlines

  • .border_color_1-5
  • .border_color_a-j
  • .border_color_transparent
  • .border_width_0-9
  • .outline_width_0|focused|active
  • .border_style_none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|$globals
  • .border_radius_xs3-xl
  • .border_radius_0-100
  • .border_top|bottom_left|right_radius_xs3-xl
  • .border_top|bottom_left|right_radius_0-100

Shadows

  • .shadow_xs-xl
  • .shadow_top|bottom_xs-xl
  • .shadow_inset_xs-xl
  • .shadow_inset_top|bottom_xs-xl
  • .shadow_color_highlight|glow|shroud
  • .shadow_color_a-j
  • .shadow_alpha_1-5
  • .shadow_inherit|none

Transforms and visual effects

  • .flip_x|y|xy
  • .pixelated

Composite classes

  • .box
  • .column
  • .row
  • .formatted
  • .selected
  • .selectable
  • .clickable
  • .pane
  • .panel
  • .icon_button
  • .plain
  • .menu_item
  • .chevron
  • .chip

Builtin classes
#

Fuz CSS's 🗎 main stylesheet provides styles for the base HTML elements using the framework's variables, acting as a modern CSS reset with sensible defaults and integrated theming. It includes Fuz CSS-specific CSS classes - not utility classes in the strict sense - that provide common generic functionality.

.unstyled

<ul> <li>1</li> <li>2</li> </ul>
  • a
  • b
<ul class="unstyled"> <li>a</li> <li>b</li> </ul>
  • 1
  • 2

The .unstyled class lets Fuz CSS provide solid default element styles with a simple and generic opt-out:

:where(:is(ul, ol, menu):not(.unstyled)) { padding-left: var(--space_xl4); }

Respecting .unstyled isn't a straightforward choice in all cases. Help is appreciated to refine the internals. For example, should input respect it? Maybe? All styles or a subset?