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

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.

Overlay

Typography

Too Complex. (Are they molecules?)

Lightbox

Navigation

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