Basic styleguide setup
This commit is contained in:
Stuart Colville
Родитель
ab06316e31
Коммит
73c7af4f24
|
|
@ -1,3 +1,4 @@
|
|||
node_modules
|
||||
bower_components
|
||||
.grunt
|
||||
styleguide/build
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
|
||||
jshint: {
|
||||
options: {
|
||||
jshintrc: true,
|
||||
},
|
||||
all: ['public/**/*.js', 'test/**/*.js'],
|
||||
},
|
||||
|
||||
devserver: {
|
||||
options: {
|
||||
base: 'styleguide/build',
|
||||
type: 'http',
|
||||
port: grunt.option('port') || 4000,
|
||||
},
|
||||
server: {}
|
||||
},
|
||||
|
||||
'gh-pages': {
|
||||
options: {
|
||||
base: 'styleguide/build',
|
||||
message: 'Updating docs'
|
||||
},
|
||||
src: ['**']
|
||||
},
|
||||
|
||||
// Styleguide builder task.
|
||||
cog: {
|
||||
styleguide: {
|
||||
src: 'styleguide',
|
||||
options: {
|
||||
sourcecodeSelector: 'main',
|
||||
templateGlobals: {
|
||||
'projectName': 'Payments UI Styleguide',
|
||||
},
|
||||
templateConfig: {
|
||||
templatePaths: ['templates'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('cog');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-devserver');
|
||||
grunt.loadNpmTasks('grunt-gh-pages');
|
||||
|
||||
grunt.registerTask('default', ['jshint']);
|
||||
grunt.registerTask('publish-docs', ['cog', 'gh-pages']);
|
||||
};
|
||||
|
|
@ -9,8 +9,10 @@
|
|||
"grunt-sass": "^0.18.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cog": "muffinresearch/cog",
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-contrib-jshint": "^0.11.2",
|
||||
"grunt-devserver": "^0.6.0",
|
||||
"grunt-sass": "^0.18.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
# Forms
|
||||
|
||||
Here's some examples of the form fields used in the payments UI.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Payment UI
|
||||
|
||||
This is the styleguide for the payments UI.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Typography
|
||||
|
||||
This is an example of what the fonts look like using some basic markup.
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>Payments</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
{% block page %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{% extends 'base-styleguide.html' %}
|
||||
|
||||
{% block page %}
|
||||
<form id="checkout" action="/your/server/endpoint" method="post">
|
||||
<input data-braintree-name="number" value="4111111111111111">
|
||||
<input type="number" data-braintree-name="cvv" value="100">
|
||||
<input type="number" data-braintree-name="expiration_month" value="10">
|
||||
<input type="number" data-braintree-name="expiration_year" value="2020">
|
||||
<input data-braintree-name="postal_code" value="94107">
|
||||
<input data-braintree-name="cardholder_name" value="John Smith">
|
||||
<button type="submit" id="submit">Pay</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{% extends 'base-styleguide.html' %}
|
||||
|
||||
{% block page %}
|
||||
<h1>Heading Level 1</h1>
|
||||
<h2>Heading Level 2</h2>
|
||||
<h3>Heading Level 3</h3>
|
||||
<h4>Heading Level 4</h4>
|
||||
|
||||
<p>The quick brown fox jumps over the lazy dog</p>
|
||||
<p><em>The quick brown fox jumps over the lazy dog (emphasis)</em></p>
|
||||
<p><strong>The quick brown fox jumps over the lazy dog (strong)</strong></p>
|
||||
{% endblock %}
|
||||
Загрузка…
Ссылка в новой задаче