Skip to content

Commit

Permalink
Merge pull request #46 from Brightspace/wc
Browse files Browse the repository at this point in the history
Wc
  • Loading branch information
dbatiste committed Mar 29, 2016
2 parents 6ea2375 + 9a6c830 commit 0210e76
Show file tree
Hide file tree
Showing 28 changed files with 449 additions and 402 deletions.
1 change: 0 additions & 1 deletion .csslintrc

This file was deleted.

3 changes: 1 addition & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
bower_components/
node_modules/
test/test.css
typography.css
test/perceptual/typography.html.ignore
9 changes: 0 additions & 9 deletions .npmignore

This file was deleted.

13 changes: 3 additions & 10 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
language: node_js
node_js:
- 5.6
node_js: stable
before_script:
- gem install percy-cli
script:
- polylint
after_success:
- '[ "$TRAVIS_SECURE_ENV_VARS" = "true" ] && npm run perceptual-diff'
sudo: false
deploy:
provider: npm
email: [email protected]
api_key:
secure: lh51pn6JgbDjHlcvWWGJWxO/JwAMurTk/TFFYO6447lvP1QsMogcs5nUNNp7045YpEFcc7v94tlz42UMrFCXRoRVKy0g3AWKtATVl1FQ4oY7X18C3KuQMOVBZt89uQVX5X2+LOkDnlGEzYNerFWcDAV8FoBOUIKwPeUvCNZJO5s=
on:
tags: true
all_branches: true
env:
global:
secure: Z291fOPTg/3XEw/pBgA/9s4y0cyc/CkFdn0YRIbLyk66y9FWVIwacytGsl2hs2+hQZXXizrx6GK+NEUCuOB+CpFzFi9sE0+b+HIQ/hAnPC8L9AdGWKiIS6skekjJC+ZhQRJq+/DnSe8/N8Mr3YA6rO3PiqHlVJ5787y5vId4w2E=
99 changes: 35 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
**Looking for SASS-based `vui-typography`?** It's [over here](https://github.com/Brightspace/valence-ui-typography/tree/sass).

# vui-typography
[![Bower version][bower-image]][bower-url]
[![NPM version][npm-image]][npm-url]
[![Build status][ci-image]][ci-url]
[![Dependency Status][dependencies-image]][dependencies-url]

This component contains [Sass mixins](http://sass-lang.com) and CSS that can be used to produce basic typography styles.
A Valence UI, [Polymer](https://www.polymer-project.org/1.0/)-based web component for typography styles.

For further information on this and other VUI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).

Expand All @@ -15,30 +15,26 @@ For further information on this and other VUI components, see the docs at [ui.va
bower install vui-typography
```

Or alternatively from [NPM][npm-url]:
```shell
npm install vui-typography
```
## Usage

Depending on which installation method you choose, use that path when doing the SASS import:
Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), import `typography.html`, and include the `vui-typography` style:

```scss
@import 'bower_components/vui-typography/typography.scss';
// or...
@import "node_modules/vui-typography/typography.scss";
```html
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../vui-typography/typography.html">
<style is="custom-style" include="vui-typography"></style>
</head>
```

## Usage

### Body

The `vui-typography` mixin can be used to set up the base font properties, typically applied to the `<body>` element.
The `vui-typography` class can be used to set base font properties, typically applied to the `<body>` element.

```scss
@import '<path-to-component>/typography.scss';
body {
@include vui-typography();
}
```html
<body class="vui-typography">
...
</body>
```

The default font family, color and line/character spacing will look like this:
Expand All @@ -47,69 +43,44 @@ The default font family, color and line/character spacing will look like this:

### Headings

There are four separate mixins for the available heading styles. These would typically be applied to the `<h1>`, `<h2>`, `<h3>` and `<h4>` HTML elements, though it's not a requirement.

```scss
@import '<path-to-component>/headings.scss';

h1 {
@include vui-typography-heading1();
}

h2 {
@include vui-typography-heading2();
}
There are four separate classes for the available heading styles. These would typically be applied to the `<h1>`, `<h2>`, `<h3>` and `<h4>` HTML elements, though it's not a requirement.

h3 {
@include vui-typography-heading3();
}

h4 {
@include vui-typography-heading4();
}
```html
<h1 class="vui-heading-1">...</h1>
<h2 class="vui-heading-2">...</h2>
<h3 class="vui-heading-3">...</h3>
<h4 class="vui-heading-4">...</h4>
```

![screenshot of paragraph text](/screenshots/headings.png?raw=true)
![screenshot of headings](/screenshots/headings.png?raw=true)

The margins around each heading style can be customized by passing in an override value to the mixin:
### Help Text

```scss
h2.no-margin {
@include vui-typography-heading2($margin: 0);
}
The custom `vui-help-text` element can be used to apply styling to help text.

```html
<vui-help-text>...</vui-help-text>
```

### Small Text
### Note About Font Size

There are two mixins available to achieve a smaller look. They're both available by importing `small-text.scss`.
Normally within Brightspace, the user-configured base font size will automatically be present, and requires no additional work to opt-in. However, if your application exists outside of Brightspace, you should set your desired font size on the `<html>` element. The default recommended size is `20px`:

The first is `vui-typography-small-text()`:
```scss
.small {
@include vui-typography-small-text();
```css
html {
font-size: 20px;
}
```

![screenshot of small text](/screenshots/small.png?raw=true)

The second, `vui-typography-small-strong-text()` has a heavier font-weight:
```scss
.small-strong {
@include vui-typography-small-strong-text();
}
```
### Usage in Production

![screenshot of small strong text](/screenshots/small-strong.png?raw=true)
In production, it's recommended to use a build tool like [Vulcanize](https://github.com/Polymer/vulcanize) to combine all your web components into a single import file. [More from the Polymer Docs: Optimize for Production](https://www.polymer-project.org/1.0/tools/optimize-for-production.html)...

## Coding styles

See the [VUI Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on VUI naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.

[bower-url]: http://bower.io/search/?q=vui-typography
[bower-image]: https://img.shields.io/bower/v/vui-typography.svg
[npm-url]: https://www.npmjs.org/package/vui-typography
[npm-image]: https://img.shields.io/npm/v/vui-typography.svg
[ci-url]: https://travis-ci.org/Brightspace/valence-ui-typography
[ci-image]: https://img.shields.io/travis-ci/Brightspace/valence-ui-typography.svg
[dependencies-url]: https://david-dm.org/brightspace/valence-ui-typography
[dependencies-image]: https://img.shields.io/david/Brightspace/valence-ui-typography.svg
1 change: 0 additions & 1 deletion base-font-size.scss

This file was deleted.

9 changes: 5 additions & 4 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
{
"name": "vui-typography",
"main": "typography.scss",
"main": "typography.html",
"license": "Apache-2.0",
"ignore": [
"test",
".csslintrc",
".editorconfig",
".gitattributes",
".gitignore",
".npmignore",
".travis.yml",
"package.json"
],
"dependencies": {
"vui-colors": "^0.2.0"
"polymer": "^1.4.0",
"vui-colors": "^1.0.1"
},
"devDependencies": {
}
}
81 changes: 81 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Typography Snapshot</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../typography.html">
<link rel="import" href="../help-text.html">
<style is="custom-style" include="vui-typography">

html {
font-size: 20px;
}
table {
max-width: 1000px;
}
td, th {
padding: 0.5rem;
white-space: nowrap;
}
td {
text-align: center;
}
.small-text {
@apply(--vui-small-text);
}
.small-strong-text {
@apply(--vui-small-strong-text);
}

</style>
</head>
<body class="vui-typography" unresolved>
<h1>Typography</h1>
<table>
<thead>
<tr>
<th>Element</th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<th>Headings</th>
<td>
<h1 class="vui-heading-1">Heading 1</h1>
<h2 class="vui-heading-2">Heading 2</h2>
<h3 class="vui-heading-3">Heading 3</h3>
<h4 class="vui-heading-4">Heading 4</h4>
</td>
</tr>
<tr>
<th>Small Text</th>
<td>
<p class="small-text">Small Text</p>
</td>
</tr>
<tr>
<th>Small Strong Text</th>
<td>
<p class="small-strong-text">Small Strong Text</p>
</td>
</tr>
<tr>
<th>Help Text</th>
<td>
<vui-help-text class="vui-help">Help Text</vui-help-text>
</td>
</tr>
<tr>
<th>Paragraph</th>
<td>
<p style="width: 430px; text-align: left; white-space: normal;">
Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.
</p>
</td>
</tbody>
</table>
</body>
</html>
37 changes: 0 additions & 37 deletions font.scss

This file was deleted.

53 changes: 53 additions & 0 deletions fonts.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../vui-colors/colors.html">

<dom-module id="vui-fonts">
<template>
<style include="vui-colors">

:root {

--vui-font: {
color: var(--vui-color-ferrite);
display: block;
font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
letter-spacing: 0.015rem;
}

--vui-font-dyslexic: {
font-weight: 400;
font-family: 'Open Dyslexic', sans-serif;
}

--vui-font-ar: {
font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif;
}

--vui-font-zh-cn: {
font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
}

--vui-font-zh-tw: {
font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
}

--vui-font-ko: {
font-family: 'Apple SD Gothic Neo', Dotum, sans-serif;
}

--vui-font-ja: {
font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif;
}

--vui-font-paragraph: {
margin: 1.5rem 0;
}

}

</style>
</template>
</dom-module>
Loading

0 comments on commit 0210e76

Please sign in to comment.