scu-text

released v0.0.8

component

parameters

states

scu-text is a quick way to display text that is in line with the Design System's sizes and colors.

scu-text

Bicycle rights selfies YOLO hashtag. Four loko pork belly lumbersexual tumeric, hell of sustainable pickled tbh hoodie +1 cornhole seitan distillery. Microdosing meggings fanny pack kitsch, chambray iPhone green juice aesthetic literally pickled sustainable.

<scu-text>
Bicycle rights selfies YOLO hashtag. Four loko pork belly 
lumbersexual tumeric, hell of sustainable pickled tbh hoodie +1 
cornhole seitan distillery. Microdosing meggings fanny pack kitsch, 
chambray iPhone green juice aesthetic literally pickled sustainable.
</scu-text>

scu-text

Properties

Property	Attribute	Description	Type	Default
`align`	`align`		`Align.center \| Align.left \| Align.right`	`Align.left`
`bold`	`bold`		`boolean`	`false`
`color`	`color`		`string`	`undefined`
`colorVariation`	`color-variation`		`ColorVariations.inv \| ColorVariations.invDark \| ColorVariations.invDarker \| ColorVariations.invDarkest \| ColorVariations.light \| ColorVariations.lighter \| ColorVariations.lightest`	`undefined`
`gap`	`gap`		`number`	`0`
`height`	`height`		`string`	`undefined`
`margin`	`margin`		`string`	`undefined`
`padding`	`padding`		`string`	`undefined`
`semiBold`	`semi-bold`		`boolean`	`false`
`size`	`size`		`number`	`5`
`valign`	`valign`		`Valign.bottom \| Valign.center \| Valign.top`	`Valign.top`
`width`	`width`		`string`	`undefined`

Built with StencilJS

scu-text - size

Bicycle rights selfies YOLO hashtag.

<scu-text size="3">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - bold

Bicycle rights selfies YOLO hashtag.

<scu-text font-type="bold">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - color

Bicycle rights selfies YOLO hashtag.

<scu-text 
color="accent-student"
color-variation="lightest">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - color

Bicycle rights selfies YOLO hashtag.

<scu-text 
color="primary"
color-variation="inv-darkest">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - color error

Bicycle rights selfies YOLO hashtag.

<scu-text 
color="primary"
color-variation="WRONG">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - left top

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="left"
valign="top">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - left center

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="left"
valign="center">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - left bottom

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="left"
valign="bottom">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - center top

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="center"
valign="top">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - center center

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="center"
valign="center">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - center bottom

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="center"
valign="bottom">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - right top

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="right"
valign="top">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - right center

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="right"
valign="center">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - right bottom

Bicycle rights selfies YOLO hashtag.

<scu-text 
class="valignExample"
align="right"
valign="bottom">
Bicycle rights selfies YOLO hashtag.
</scu-text>

scu-text - Layout

Bicycle rights selfies YOLO hashtag.

<scu-text padding="8 10" margin="2 50px" height="200px"
style="border: 1px solid var( --color-grey-09-color );">
Bicycle rights selfies YOLO hashtag.
</scu-text>

History

v0.0.10 - 2020/10/26
- Adding server install instructions to home page.
- Typography updates. Medium to Semibold and changed text sizes 05 to 15, 06 to 16px, 07 to 18px
- Started to build out forms, so there are a couple beta (as in don't-use-beta) components. They don't work, but don't effect other comps.
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

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