Skip to content

Commit 88b4f25

Browse files
chrisvfritzchrisvfritz
authored
Style Guide (#1160)
* initial style guide prototype with examples * clarify component style scoping in 3rd-party libs * flesh out rule for complex computed properties * clarify component style scoping * flesh out self-closing components rule in style guide * flesh out style guide entry for component name casing in JS/JSX * complete draft for priority A rules * complete draft for priority B rules * style guide fixes after @KatieMFritz's review * fix code block styles, especially on style guide * fix wrong formatting for in-dom templates style rule * simplify data function detailed explanation in style guide * in style guide, add detailed explanation with example for keyed v-for * in style guide, improve explanation of order of words in component names * in style guide, link to SFC and JSX explanations * WIP * complete definitions for all style guide rules * minor language tweaks to style guide * update SG recommendation for nested component directories, courtesy of @Akryum * fix SG typo in self-closing components example * update SG component options order, tag @Akryum @posva * add category tags to rule titles * style guide round of edits and simplification * move list rendering above conditionals in SG element attribute order * add SG rule about empty lines in component/instance options * fixed missing and added commas in SG example * move style guide to its own page * make exception to multi-word component names for App in SG * add beta tag to style guide * fix typos pointed out by @phanan * clarify keyed v-for rule in SG * update when component subdirectories are worth considering in SG * add link to HTML spec in multi-word component names SG rule
1 parent 0ee0a2f commit 88b4f25

File tree

9 files changed

+1918
-15
lines changed

9 files changed

+1918
-15
lines changed

‎src/v2/style-guide/index.md

+1,802
Large diffs are not rendered by default.

‎themes/vue/layout/layout.ejs

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<% var isIndex = page.path === 'index.html' %>
2+
23
<!DOCTYPE html>
34
<html lang="en">
45
<head>

‎themes/vue/layout/partials/learn_dropdown.ejs

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<li class="nav-dropdown-container learn">
2-
<a class="nav-link<%- page.path.match(/(guide(?!\/team.html$)|api|examples|cookbook)/) ? ' current' : '' %>">Learn</a><span class="arrow"></span>
2+
<a class="nav-link<%- page.path.match(/\/(guide(?!\/team.html$)|api|style-guide|examples|cookbook)(\/|$)/) ? ' current' : '' %>">Learn</a><span class="arrow"></span>
33
<ul class="nav-dropdown">
44
<li><ul>
5-
<li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
6-
<li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
7-
<li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
5+
<li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/\/guide(\/|$)/) ? ' current' : '' %>">Guide</a></li>
6+
<li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/\/api(\/|$)/) ? ' current' : '' %>">API</a></li>
7+
<li><a href="<%- url_for("/v2/style-guide/") %>" class="nav-link<%- page.path.match(/\/style-guide(\/|$)/) ? ' current' : '' %>">Style Guide</a></li>
8+
<li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/\/examples(\/|$)/) ? ' current' : '' %>">Examples</a></li>
89
</ul></li>
910
</ul>
1011
</li>

‎themes/vue/layout/partials/sidebar.ejs

+8-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,14 @@
1414
Become a Sponsor
1515
</a>
1616
<h2>
17-
<%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %>
18-
<% if (type !== 'cookbook') { %>
17+
<%-
18+
type === 'api'
19+
? 'API'
20+
: type === 'style-guide'
21+
? 'Style Guide<sup class="beta">beta</sup>'
22+
: (type.charAt(0).toUpperCase() + type.slice(1))
23+
%>
24+
<% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %>
1925
<select class="version-select">
2026
<option value="SELF" selected>2.x</option>
2127
<option value="v1">1.0</option>

‎themes/vue/layout/partials/toc.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ul class="menu-root">
2-
<% type !== 'api' && site.pages.find({type: type}).sort('order').each(function (p) { %>
2+
<% ['api', 'style-guide'].indexOf(type) === -1 && site.pages.find({type: type}).sort('order').each(function (p) { %>
33
<% var fileName = p.path.replace(/^.+?\/([\w-]+)\.html/, '$1') %>
44
<% if (type === 'guide') { %>
55
<% if (fileName === 'installation') { %>

‎themes/vue/source/css/_common.styl

+9-3
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,11 @@ a.button
6363

6464
.highlight
6565
overflow-x: auto
66-
padding: 0
6766
background-color: $codebg
68-
padding: .8em .8em .4em
67+
padding: .4em 0 0
6968
line-height: 1.1em
7069
border-radius: $radius
70+
position: relative
7171
table, tr, td
7272
width: 100%
7373
border-collapse: collapse
@@ -86,7 +86,7 @@ a.button
8686
&.html, &.js, &.bash, &.css
8787
.code:before
8888
position: absolute
89-
margin-top: -1em
89+
top: 0
9090
right: 0
9191
color: #ccc
9292
text-align: right
@@ -174,3 +174,9 @@ a.button
174174
border-left: 4px solid transparent
175175
border-right: 4px solid transparent
176176
border-top: 5px solid #ccc
177+
178+
sup.beta.beta
179+
font-size: .6em
180+
margin-left: .7em
181+
text-transform: uppercase
182+
opacity: .6

‎themes/vue/source/css/_style-guide.styl

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
$style-guide-bad-bg = lighten(desaturate($red, 80%), 80%)
2+
$style-guide-bad-text = darken(desaturate($red, 80%), 20%)
3+
$style-guide-good-bg = lighten(desaturate($green, 80%), 85%)
4+
$style-guide-good-text = darken(desaturate($green, 80%), 10%)
5+
6+
$style-guide-priority-a-bg = $style-guide-bad-text
7+
$style-guide-priority-a-color = white
8+
$style-guide-priority-b-bg = $style-guide-bad-text
9+
$style-guide-priority-b-color = white
10+
$style-guide-priority-c-bg = steelblue
11+
$style-guide-priority-c-color = white
12+
$style-guide-priority-d-bg = $style-guide-bad-text
13+
$style-guide-priority-d-color = white
14+
15+
.style-guide
16+
.style-example, details, .style-enforcement
17+
border-radius $radius
18+
margin: 1.6em 0
19+
padding 1.6em
20+
h4
21+
margin-top: 0
22+
figure, p
23+
&:last-child
24+
margin-bottom 0
25+
padding-bottom 0
26+
.style-example
27+
&.example-bad
28+
background $style-guide-bad-bg
29+
h4
30+
color $style-guide-bad-text
31+
&.example-good
32+
background $style-guide-good-bg
33+
h4
34+
color $style-guide-good-text
35+
details, .style-enforcement
36+
background-color #eee
37+
details
38+
position relative
39+
summary
40+
cursor pointer
41+
padding 1.6em
42+
margin -1.6em
43+
outline none
44+
> h4
45+
display inline-block
46+
margin 0
47+
.style-enforcement
48+
table
49+
width 100%
50+
background-color $codebg
51+
border-radius $radius
52+
th, td
53+
padding .4em
54+
text-align center
55+
th
56+
padding-bottom .2em
57+
td
58+
padding-top .2em
59+
.style-rule-tag
60+
background-color $codebg
61+
border-radius $radius
62+
font-size .9em
63+
color $style-guide-good-text
64+
font-weight 600
65+
text-transform uppercase
66+
padding: .1em .4em
67+
a > .style-rule-tag
68+
color $green
69+
sup
70+
text-transform: uppercase
71+
font-size: .7em
72+
margin-left: 1em
73+
pointer-events: all
74+
position: absolute
75+
[data-p="a"]
76+
color: #6b2a2a
77+
[data-p="b"]
78+
color: #8c480a
79+
[data-p="c"]
80+
color: #2b5a99
81+
[data-p="d"]
82+
content: #3f536d

‎themes/vue/source/css/page.styl

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
@import "_common"
2+
@import "_animations"
23
@import "_header"
34
@import "_demo"
45
@import "_sponsor"
56
@import "_migration"
67
@import "_sidebar"
78
@import "_offline-menu"
89
@import "_team"
9-
@import "_animations"
10+
@import "_style-guide"
1011

1112
#header
1213
box-shadow: 0 0 1px rgba(0,0,0,.25)

‎themes/vue/source/js/common.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -165,11 +165,15 @@
165165

166166
// build sidebar
167167
var currentPageAnchor = sidebar.querySelector('.sidebar-link.current')
168-
var isAPI = document.querySelector('.content').classList.contains('api')
169-
if (currentPageAnchor || isAPI) {
168+
var contentClasses = document.querySelector('.content').classList
169+
var isAPIOrStyleGuide = (
170+
contentClasses.contains('api') ||
171+
contentClasses.contains('style-guide')
172+
)
173+
if (currentPageAnchor || isAPIOrStyleGuide) {
170174
var allHeaders = []
171175
var sectionContainer
172-
if (isAPI) {
176+
if (isAPIOrStyleGuide) {
173177
sectionContainer = document.querySelector('.menu-root')
174178
} else {
175179
sectionContainer = document.createElement('ul')
@@ -184,7 +188,7 @@
184188
allHeaders.push(h)
185189
allHeaders.push.apply(allHeaders, h3s)
186190
if (h3s.length) {
187-
sectionContainer.appendChild(makeSubLinks(h3s, isAPI))
191+
sectionContainer.appendChild(makeSubLinks(h3s, isAPIOrStyleGuide))
188192
}
189193
})
190194
} else {

0 commit comments

Comments
 (0)