Summit Design System

scu-stack

released in v0.0.8

component

parameters

states

scu-stack is a simple, single vertical layout component that stacks one child component on another. It forces all children to be 100% width and contains built in padding and gaps using spacing increments.

scu-stack

<scu-stack>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>

scu-stack Padding / Gaps

<scu-stack gap="2" padding="4">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>

scu-stack Width

<scu-stack width="10">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>

Properties

Property	Attribute	Type	Default
`gap`	`gap`	`number`	`0`
`height`	`height`	`string`	`undefined`
`margin`	`margin`	`string`	`undefined`
`padding`	`padding`	`string`	`undefined`
`width`	`width`	`string`	`undefined`

Built with StencilJS

scu-stack Padding Top/Bottom

<scu-stack gap="2" padding="8 2">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>

scu-stack Padding 4 Sides

<scu-stack padding="8 4 2 0">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>

scu-stack Padding px

<scu-stack padding="8 4 100px 0">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>

scu-stack Padding col-1

<scu-stack padding="8 4 col-1 0">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>

History

v0.0.9 - 2020/10/20
- Syncing versioning between scu-components-beta and Figma file SCU-DesignSystem.
- Reference portability. Can be viewed via unpkg.com (see reference)
- scu-stack - stubbed out. A simplier way to layout vertical stacks using padding and gaps based on spacing. scu-flex-v is mostly redundant to default behavior and can get in the way for simple stacks of content.
- scu-input-text (Figma) - stubbed out.
- scu-input-textarea (Figma) - stubbed out.
- scu-input-radio (Figma) - stubbed out.
- scu-input-checkbox (Figma) - stubbed out.
v0.0.8 - 2020/10/18
- scu-icon - created. Understands where the icons are and the available sizes. It can also color the icon anything from the available token colors.
- scu-text - created. Has all of the typography and color tokens integrated into API.
- scu-flex-h - created. Easy way to layout horizontal flexbox.
- scu-flex-v - created. Easy way to layout vertical flexbox.
- scu-flex-fill - created. Easy way to add a flexible element within scu-flex-h/v.
...v0.0.7 - 2020/10
- Setting up environment and integrating tokenization
- scu-button - created. Contains a number of variations including outline, icon, icon only.
- scu-member-profile - created
- scu-vertical-navigation-item - created

Summit Design System

The Summit Design System is our design process. It is composed of a shared design library for designers built in Figma, tokens driven from that Figma library, and a reusable JavaScript component library built with web components using StencilJS. This should work within any development framework (Vue, Angular, etc).

Implementation

HTML

To build a simple static HTML page, like a prototype, add these two lines to an HTML page running within a server (see "Server" if you don't have a server running locally)


    <script src="https://unpkg.com/scu-components-beta/dist/scu/scu.esm.js" type="module"></script>

    <link href="https://unpkg.com/scu-components-beta/dist/scu/scu.css" rel="stylesheet">

Within the HTML page you can just start dropping components:


    <scu-button label='Submit' outline></scu-button>

Server

Vue

Stencil Vue Documentation

With Vue you need to first add the SCU Design System to your project then add the custom element definitions and tell Vue to ignore all components with the "scu-" prefix. This is an example of the main.js file of a simple Vue app.


    npm install --save scu-components-beta


    import Vue from 'vue'
    import App from './App.vue'
    import { applyPolyfills, defineCustomElements } from 'scu-components-beta/loader';

    Vue.config.productionTip = false

    // Tell Vue to ignore all components prefixed 'scu-'
    Vue.config.ignoredElements = [/scu-\w*/];

    // Bind the custom elements to the window object
    applyPolyfills().then(() => {
      defineCustomElements();
    });

    new Vue({
      render: h => h(App),
    }).$mount('#app')

Angular

Stencil Angular Documentation

Other

Stencil Documentation