react-spruce v0.1.1
Goose
The base of a Spruce component library. It aims to describe the functions of UI components semantically, and without knowledge of how styles will visually appear.
Components
Badge
An un-interactive presentation of state.
Modifiers
positive
negative
hero
primary
$color
Box
A divided area of content.
The unmodified Box
should not have any margins or padding so it can be used as an invisible element container, like a <div>
.
Modifiers
absolute
-alternative
- An alternative style for a box e.g. an alternative background color. Implies that the content of the box is heirarchically adjacent to surrounding content.bottom
-bounded
- Applies some kind of boundary so that the boxes contents appear distinct from content around the box. e.g. using a border or background color. Implies that the content of the box is heirarchically beneath surrounding content.clearfix
-color<Name>
-fixed
-floatLeft
-floatRight
-flood
-hero
-inline
-left
-margin<Direction><SiPrefix>
negative
-pointer
-positive
-relative
-right
-top
-
Button
The unmodified Button
should appear as having netural importance. The primary
modifier can be used on buttons that need to convey more importance.
Modifiers
primary
- Makes the button more important.positive
- A button that implies a positive outcome.negative
- A button that implies a negative outcome.solo
- A button that is standalone and does not have siblings within the information heirarchy.inline
- A button that has a small amount of spacing so buttons may be placed next to each other.
Checkbox
???
Choice
The result of a user selection.
Dialog
A small area on screen in which the user is prompted to provide information or select commands.
Children
Dialog_title
Dialog_content
Dialog_actions
Dropdown
Grid
A Grid
consists of a series of columns, whose widths are defined by ratios of the Grid
's total width. These ratios are divisions of 12, so a 2 column Grid
would contain 2 columns, each with width 6. By default Grid
s columns stack on top of each other on small page widths.
Grid
s always have Grid_column
child elements.
Modifiers
Grid_column-1
,Grid_column-2
...Grid_column-12
- Sets the width of the column as a division of 12 of theGrid
width.Grid_column-always
- Disables collapsing the Grid on small page widths.Grid_column-shrink
- Causes aColumn
to be the same width as its contents.Grid_column-padding
- The padding between each column. Padding is not applied to the left of the leftmost column, or on the right of the rightmost column.
Header
???
Icon
Image
Input
Textual input.
Link
A link to other content.
List
Core modifiers: divided
ordered
unordered
nested
Lists of items. Lists have child elements List_item
.
Neither the List
or List_item
elements should have margins by default. Margins can be applied using a margin
modifier with an optional SI suffix.
Media
Overlay
ProgressBar
Select
A select box to allow the user to choose one or more items from a list. By default goose assumes react-select
is being used.
Table
ToggleSet
Toggle
A user input that can toggle a boolean value.
Core modifiers: active
active
- The appearance of the toggle while it's true.
Terminal
Text
Any text to display on the website, e.g. copy, headings, titles.
Sizing
size<SiPrefix>
sizeGiga
roughly corresponds with traditionalh1
sizingsizeMega
roughly corresponds with traditionalh2
sizingsizeKilo
roughly corresponds with traditionalh3
sizingsizeHecto
roughly corresponds with traditionalh4
sizingsizeMilli
roughly corresponds with traditionalsmall
sizing
Margins
Text-margin
modifiers should only affect the bottom margin. The spacing that might normally be provided by a top margin should instead be provided by a preceding sibling or an ancestor.
margin<SiPrefix>
marginGiga
margins often go well withsizeGiga
marginMega
margins often go well withsizeMega
marginKilo
margins often go well withsizeKilo
margin
margins often go well to space out normal paragraphs
Weight
weightKilo
- Text that appears more important than normal, often bolded.weightMilli
- Text trhat appears less important than normal, often muted.emphasis
- Styled to demonstrate an emphasis on the text.
Typography
Window
A combination of a fixed-height title bar and a variable-height content area.
Children
Window_title
Window_content
Wrapper
A container that enforces vertical page boundaries, such as a maximum width and page alignment.
Modifiers
size<SiPrefix>
- Sets a maximum width to the element.
Too Complex. (Are they molecules?)
Pagination
Lightbox
Navigation
DayPicker
A way to choose a date and or time. Assumes react-day-picker
.
Message
Messages are used for when the website communicates information about its current status or data to the user, such as "Loading...", "Invalid password" or "404".
Appearance props
appearance=deadEnd
- A large message, often used at the point at which the user can no longer progress and must choose to navigate elsewhere. E.g: 404's, Large form submissions.appearance=block
- A block message that appear in their own vertical space, such as password errors.appearance=inline
- An inline message.
State props
state=fetch
- A message that is styled to appear as though something is loading.state=positive
- A message that is styled to appear as though something has succeeded.state=negative
- A message that is styled to appear as though something has failed.
Modifiers
The appearance
and state
of a Message are applied as modifiers to a Message.
Login
Breadcrumbs
The representation of one branch of a tree hierarchy
Todo: Confused modifiers
These are perhaps too bound to specific visual or design choices and will need to be worked upon before being accepted or rejected from goose.
flood
- Fills the width and height of the parent element.spread
- Fills the width of the parent element.
Goose Box Model
Boundary
+--------------------------------+-------------------------------------+
| ^ | ^
| | | | Size
| | Padding | |
| | | |
| v | |
| +----------------------+-----------------------------+ | |
| | | | |
| | #### #### # # ##### ###### # # ##### | | |
Margin | | # # # # ## # # # ## # # | | |
| | # # # # # # # ##### # # # # | | |
<-----------+ | | # # # # # # # # # # # # | | |
| | # # # # # ## # # # ## # | | |
| | #### #### # # # ###### # # # | | |
| | | | |
| +----------------------------------------------------+ | |
| | |
| | |
| | |
| | |
| | v
+----------------------------------------------------------------------+
Categorical State Modifiers
Importance
primary
tertiary
Interactions
active
focus
disabled
waiting
hover
Connotation (suffixable)
positive
negative
warning
edit