classes #

Moss has three CSS files:

<!-- +layout.svelte -->
<script>
	import '@ryanatkn/moss/style.css';
	import '@ryanatkn/moss/theme.css'; // or bring your own
	import '$routes/moss.css'; // generated by `gro_plugin_moss`
	// ...
</script>

• .relative|absolute|fixed|sticky|static
• .overflow_auto|hidden|scroll|clip|visible
• .overflow_x|y_auto|hidden|scroll|clip|visible
• .overflow_wrap_anywhere|break_word
• .display_none|contents
• .inline|inline_block|inline_flex|inline_grid
• .block
• .flex
• .flex_1
• .flex_wrap|wrap_reverse|nowrap
• .flex_row|column|row_reverse|column_reverse
• .grow|shrink
• .grow|shrink_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
• .grid
• .float_none|left|right|inline_start|inline_end
• .flip_x|y|xy
• .font_sans|mono
• .line_height_xs-xl
• .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
• .white_space_normal|nowrap|pre|pre_wrap|pre_line|break_spaces
• .white_space_collapse_collapse|preserve|preserve_breaks|preserve_spaces|break_spaces
• .text_wrap_wrap|nowrap|balance|pretty|stable
• .ellipsis
• .font_weight_100-900
• .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-i
• .color_a-i_1 -9
• .bg_a-i_1-9
• .border_color_1-5
• .border_color_a-i
• .border_color_transparent
• .border_width_0-6
• .outline_width_0-3
• .border_none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
• .radius_0|50|100
• .radius_xs3-xl
• .fade_0|100
• .fade_1-6
• .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-i
• .shadow_alpha_1-5
• .shadow_inherit|none
• .w|h_0|100|auto|max_content|min_content|fit_content|stretch
• .w|h_xs-xl15
• .t|b|l|r_0|100|auto
• .t|b|l|r_xs-xl15
• .p|pt|pr|pb|pl|px|py_0
• .p|pt|pr|pb|pl|px|py_xs5-xl15
• .m|mt|mr|mb|ml|mx|my_auto
• .m|mt|mr|mb|ml|mx|my_0
• .m|mt|mr|mb|ml|mx|my_xs5-xl15
• .gap_xs5-xl15
• .column|row_gap_xs5-xl15
• .pixelated
• .box
• .column
• .row
• .formatted
• .width_xs-md
• .selected
• .selectable
• .clickable
• .pane
• .panel
• .icon_button
• .plain
• .menu_item
• .chevron
• .chip