classes #

Optional CSS classes
#

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

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

The moss.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_moss_css.ts. I can add a Vite plugin if there's demand.

Utility classes
#

Moss 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 Moss's base frameworky parts, and are well-integrated with the other APIs and tools.

Moss 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
#

Moss'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 Moss-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 Moss 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?