Skip to content

Style Guide #1160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 33 commits into from
Sep 30, 2017
Merged

Style Guide #1160

Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
6d67669
initial style guide prototype with examples
chrisvfritz Jun 7, 2017
d6b9552
clarify component style scoping in 3rd-party libs
chrisvfritz Jul 17, 2017
6724067
flesh out rule for complex computed properties
chrisvfritz Jul 17, 2017
8534aa3
clarify component style scoping
chrisvfritz Jul 17, 2017
9b21676
flesh out self-closing components rule in style guide
chrisvfritz Jul 17, 2017
2eabb81
flesh out style guide entry for component name casing in JS/JSX
chrisvfritz Jul 19, 2017
c287ba3
complete draft for priority A rules
chrisvfritz Sep 10, 2017
d876cf5
complete draft for priority B rules
chrisvfritz Sep 11, 2017
64893a2
style guide fixes after @katiemfritz's review
chrisvfritz Sep 11, 2017
d3e1aee
fix code block styles, especially on style guide
chrisvfritz Sep 11, 2017
347239d
fix wrong formatting for in-dom templates style rule
chrisvfritz Sep 13, 2017
9aa668b
simplify data function detailed explanation in style guide
chrisvfritz Sep 21, 2017
92dc6b2
in style guide, add detailed explanation with example for keyed v-for
chrisvfritz Sep 25, 2017
6eec646
in style guide, improve explanation of order of words in component names
chrisvfritz Sep 25, 2017
adc571d
in style guide, link to SFC and JSX explanations
chrisvfritz Sep 26, 2017
f3afd1f
WIP
chrisvfritz Sep 26, 2017
07eec89
complete definitions for all style guide rules
chrisvfritz Sep 27, 2017
bd6e60a
minor language tweaks to style guide
chrisvfritz Sep 27, 2017
be1fb07
update SG recommendation for nested component directories, courtesy o…
chrisvfritz Sep 27, 2017
e3cba64
fix SG typo in self-closing components example
chrisvfritz Sep 27, 2017
28cbf04
update SG component options order, tag @akryum @posva
chrisvfritz Sep 27, 2017
67c04da
add category tags to rule titles
chrisvfritz Sep 28, 2017
d102ae0
style guide round of edits and simplification
chrisvfritz Sep 28, 2017
b996b23
move list rendering above conditionals in SG element attribute order
chrisvfritz Sep 28, 2017
b1cb4eb
add SG rule about empty lines in component/instance options
chrisvfritz Sep 28, 2017
2d057ae
fixed missing and added commas in SG example
chrisvfritz Sep 28, 2017
7c1c53c
move style guide to its own page
chrisvfritz Sep 29, 2017
ed44c39
make exception to multi-word component names for App in SG
chrisvfritz Sep 29, 2017
6559f56
add beta tag to style guide
chrisvfritz Sep 30, 2017
9e89f5e
fix typos pointed out by @phanan
chrisvfritz Sep 30, 2017
2375daa
clarify keyed v-for rule in SG
chrisvfritz Sep 30, 2017
69b4509
update when component subdirectories are worth considering in SG
chrisvfritz Sep 30, 2017
b882a59
add link to HTML spec in multi-word component names SG rule
chrisvfritz Sep 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,802 changes: 1,802 additions & 0 deletions src/v2/style-guide/index.md
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions themes/vue/layout/layout.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<% var isIndex = page.path === 'index.html' %>

<!DOCTYPE html>
<html lang="en">
<head>
Expand Down
9 changes: 5 additions & 4 deletions themes/vue/layout/partials/learn_dropdown.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<li class="nav-dropdown-container learn">
<a class="nav-link<%- page.path.match(/(guide(?!\/team.html$)|api|examples|cookbook)/) ? ' current' : '' %>">Learn</a><span class="arrow"></span>
<a class="nav-link<%- page.path.match(/\/(guide(?!\/team.html$)|api|style-guide|examples|cookbook)(\/|$)/) ? ' current' : '' %>">Learn</a><span class="arrow"></span>
<ul class="nav-dropdown">
<li><ul>
<li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
<li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
<li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
<li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/\/guide(\/|$)/) ? ' current' : '' %>">Guide</a></li>
<li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/\/api(\/|$)/) ? ' current' : '' %>">API</a></li>
<li><a href="<%- url_for("/v2/style-guide/") %>" class="nav-link<%- page.path.match(/\/style-guide(\/|$)/) ? ' current' : '' %>">Style Guide</a></li>
<li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/\/examples(\/|$)/) ? ' current' : '' %>">Examples</a></li>
</ul></li>
</ul>
</li>
10 changes: 8 additions & 2 deletions themes/vue/layout/partials/sidebar.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,14 @@
Become a Sponsor
</a>
<h2>
<%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %>
<% if (type !== 'cookbook') { %>
<%-
type === 'api'
? 'API'
: type === 'style-guide'
? 'Style Guide<sup class="beta">beta</sup>'
: (type.charAt(0).toUpperCase() + type.slice(1))
%>
<% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %>
<select class="version-select">
<option value="SELF" selected>2.x</option>
<option value="v1">1.0</option>
Expand Down
2 changes: 1 addition & 1 deletion themes/vue/layout/partials/toc.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ul class="menu-root">
<% type !== 'api' && site.pages.find({type: type}).sort('order').each(function (p) { %>
<% ['api', 'style-guide'].indexOf(type) === -1 && site.pages.find({type: type}).sort('order').each(function (p) { %>
<% var fileName = p.path.replace(/^.+?\/([\w-]+)\.html/, '$1') %>
<% if (type === 'guide') { %>
<% if (fileName === 'installation') { %>
Expand Down
12 changes: 9 additions & 3 deletions themes/vue/source/css/_common.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@ a.button

.highlight
overflow-x: auto
padding: 0
background-color: $codebg
padding: .8em .8em .4em
padding: .4em 0 0
line-height: 1.1em
border-radius: $radius
position: relative
table, tr, td
width: 100%
border-collapse: collapse
Expand All @@ -86,7 +86,7 @@ a.button
&.html, &.js, &.bash, &.css
.code:before
position: absolute
margin-top: -1em
top: 0
right: 0
color: #ccc
text-align: right
Expand Down Expand Up @@ -174,3 +174,9 @@ a.button
border-left: 4px solid transparent
border-right: 4px solid transparent
border-top: 5px solid #ccc

sup.beta.beta
font-size: .6em
margin-left: .7em
text-transform: uppercase
opacity: .6
82 changes: 82 additions & 0 deletions themes/vue/source/css/_style-guide.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
$style-guide-bad-bg = lighten(desaturate($red, 80%), 80%)
$style-guide-bad-text = darken(desaturate($red, 80%), 20%)
$style-guide-good-bg = lighten(desaturate($green, 80%), 85%)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's kind of subjective, but personally I don't think the current background color is a bit too dark to indicate good. Maybe try something like #dbf1d9?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can tweak the colors after publishing, but I think this is good enough for now. The specific color you suggested looks very bright to me, like it's trying to highlight something rather than blending into the background. And since the rest of the page is using more subtle, desaturated colors, a more complete overhaul might be necessary to make something like that fit in.

$style-guide-good-text = darken(desaturate($green, 80%), 10%)

$style-guide-priority-a-bg = $style-guide-bad-text
$style-guide-priority-a-color = white
$style-guide-priority-b-bg = $style-guide-bad-text
$style-guide-priority-b-color = white
$style-guide-priority-c-bg = steelblue
$style-guide-priority-c-color = white
$style-guide-priority-d-bg = $style-guide-bad-text
$style-guide-priority-d-color = white

.style-guide
.style-example, details, .style-enforcement
border-radius $radius
margin: 1.6em 0
padding 1.6em
h4
margin-top: 0
figure, p
&:last-child
margin-bottom 0
padding-bottom 0
.style-example
&.example-bad
background $style-guide-bad-bg
h4
color $style-guide-bad-text
&.example-good
background $style-guide-good-bg
h4
color $style-guide-good-text
details, .style-enforcement
background-color #eee
details
position relative
summary
cursor pointer
padding 1.6em
margin -1.6em
outline none
> h4
display inline-block
margin 0
.style-enforcement
table
width 100%
background-color $codebg
border-radius $radius
th, td
padding .4em
text-align center
th
padding-bottom .2em
td
padding-top .2em
.style-rule-tag
background-color $codebg
border-radius $radius
font-size .9em
color $style-guide-good-text
font-weight 600
text-transform uppercase
padding: .1em .4em
a > .style-rule-tag
color $green
sup
text-transform: uppercase
font-size: .7em
margin-left: 1em
pointer-events: all
position: absolute
[data-p="a"]
color: #6b2a2a
[data-p="b"]
color: #8c480a
[data-p="c"]
color: #2b5a99
[data-p="d"]
content: #3f536d
3 changes: 2 additions & 1 deletion themes/vue/source/css/page.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
@import "_common"
@import "_animations"
@import "_header"
@import "_demo"
@import "_sponsor"
@import "_migration"
@import "_sidebar"
@import "_offline-menu"
@import "_team"
@import "_animations"
@import "_style-guide"

#header
box-shadow: 0 0 1px rgba(0,0,0,.25)
Expand Down
12 changes: 8 additions & 4 deletions themes/vue/source/js/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,11 +165,15 @@

// build sidebar
var currentPageAnchor = sidebar.querySelector('.sidebar-link.current')
var isAPI = document.querySelector('.content').classList.contains('api')
if (currentPageAnchor || isAPI) {
var contentClasses = document.querySelector('.content').classList
var isAPIOrStyleGuide = (
contentClasses.contains('api') ||
contentClasses.contains('style-guide')
)
if (currentPageAnchor || isAPIOrStyleGuide) {
var allHeaders = []
var sectionContainer
if (isAPI) {
if (isAPIOrStyleGuide) {
sectionContainer = document.querySelector('.menu-root')
} else {
sectionContainer = document.createElement('ul')
Expand All @@ -184,7 +188,7 @@
allHeaders.push(h)
allHeaders.push.apply(allHeaders, h3s)
if (h3s.length) {
sectionContainer.appendChild(makeSubLinks(h3s, isAPI))
sectionContainer.appendChild(makeSubLinks(h3s, isAPIOrStyleGuide))
}
})
} else {
Expand Down