scu-stack released 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
1
2
3
 
<scu-stack>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>
scu-stack Padding / Gaps
1
2
3
 
<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
1
2
3
 
<scu-stack width="10">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-stack>

Properties

Property Attribute Description 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
1
2
3
 
<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
1
2
3
 
<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
1
2
3
 
<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
1
2
3
 
<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
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 When you run a local file in a browser, most won't let you load in any external files. Even simple scripts like the CSS and JS files from the Design System won't load. An easy (and really useful) solution is to install http-server which allows you to run an ad hoc server from any folder on your computer with one command line. Open your terminal (assuming you are using a Mac) and do the following: http-server installs via npm which runs node.js, so we need to install these two dependancies:
( full instructions ) brew install node Install http-server globally npm install --global http-server Go to the folder you want to serve, type the below, then copy/paste the url it prints back. Usually this looks like http://localhost:8080 This will start a process within that terminal that runs the server, so don't close the terminal window unless you are done. Otherwise hit CTRL-C to end. http-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