Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 9934e35

Browse files
AlmeroSteynAlmeroSteyn
committed
docs-styles(build): Operationalize doc styles build
1 parent f056a2d commit 9934e35

File tree

10 files changed

+290
-4
lines changed

10 files changed

+290
-4
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,4 @@ plnkr.html
2929
public/docs/*/latest/guide/cheatsheet.json
3030
protractor-results.txt
3131
link-checker-results.txt
32+
*a2docs.css

‎gulpfile.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ var globby = require("globby");
2222
// - because childProcess.kill does not work properly on windows
2323
var treeKill = require("tree-kill");
2424
var blc = require("broken-link-checker");
25-
25+
var less = require('gulp-less');
2626
var tslint = require('gulp-tslint');
2727

2828
// TODO:
@@ -41,6 +41,7 @@ var EXAMPLES_PROTRACTOR_PATH = path.join(EXAMPLES_PATH, '_protractor');
4141
var NOT_API_DOCS_GLOB = path.join(PUBLIC_PATH, './{docs/*/latest/!(api),!(docs)}/**/*.*');
4242
var RESOURCES_PATH = path.join(PUBLIC_PATH, 'resources');
4343
var LIVE_EXAMPLES_PATH = path.join(RESOURCES_PATH, 'live-examples');
44+
var STYLES_SOURCE_PATH = path.join(TOOLS_PATH, 'styles-builder/less');
4445

4546
var docShredder = require(path.resolve(TOOLS_PATH, 'doc-shredder/doc-shredder'));
4647
var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZipper'));
@@ -86,6 +87,7 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
8687
});
8788

8889
var _exampleBoilerplateFiles = [
90+
'a2docs.css',
8991
'.editorconfig',
9092
'karma.conf.js',
9193
'karma-test-shim.js',
@@ -106,6 +108,8 @@ var _exampleProtractorBoilerplateFiles = [
106108

107109
var _exampleConfigFilename = 'example-config.json';
108110

111+
var _styleLessName = 'a2docs.less';
112+
109113
// Gulp flags:
110114
//
111115
// --lang=[all | ts | js | dart | (ts|js) | (ts|js|dart) | ...]
@@ -430,16 +434,26 @@ gulp.task('add-example-boilerplate', function() {
430434
fsUtils.addSymlink(realPath, linkPath);
431435
});
432436

433-
return copyExampleBoilerplate();
437+
return buildStyles(copyExampleBoilerplate);
434438
});
435439

436440

437441
// copies boilerplate files to locations
438442
// where an example app is found
439443
gulp.task('_copy-example-boilerplate', function () {
440-
if (!argv.fast) copyExampleBoilerplate();
444+
if (!argv.fast) buildStyles(copyExampleBoilerplate);
441445
});
442446

447+
//Builds Angular 2 Docs CSS file from Bootstrap npm LESS source
448+
//and copies the result to the _examples folder to be included as
449+
//part of the example boilerplate.
450+
function buildStyles(cb){
451+
gulp.src(path.join(STYLES_SOURCE_PATH, _styleLessName))
452+
.pipe(less())
453+
.pipe(gulp.dest(EXAMPLES_PATH)).on('finish', function(){
454+
return cb();
455+
});
456+
}
443457

444458
// copies boilerplate files to locations
445459
// where an example app is found
@@ -1221,7 +1235,7 @@ function buildApiDocsForDart() {
12211235
dab.createApiDataAndJadeFiles(apiEntries);
12221236

12231237
}).catch((err) => {
1224-
console.log(err);
1238+
console.log(err);
12251239
});
12261240

12271241
} catch(err) {

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"devDependencies": {
2828
"archiver": "^1.0.0",
2929
"assert-plus": "^1.0.0",
30+
"bootstrap": "3.3.6",
3031
"broken-link-checker": "0.7.1",
3132
"browser-sync": "^2.9.3",
3233
"canonical-path": "0.0.2",
@@ -41,6 +42,7 @@
4142
"globby": "^4.0.0",
4243
"gulp": "^3.5.6",
4344
"gulp-env": "0.4.0",
45+
"gulp-less": "^3.1.0",
4446
"gulp-task-listing": "^1.0.1",
4547
"gulp-tslint": "^5.0.0",
4648
"gulp-util": "^3.0.6",

‎tools/styles-builder/less/a2docs.less

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
//Import angular 2 docs colors and mixins
2+
@import './colors/docs-material-palette.colors.less';
3+
@import './mixins/docs.mixins.less';
4+
//Import Bootstrap scaffolding and variables
5+
@import '../../../node_modules/bootstrap/less/scaffolding.less';
6+
@import '../../../node_modules/bootstrap/less/variables.less';
7+
//Override Bootstrap variables with custom values for angular 2 docs
8+
@import './overrides/bootstrap.overrides.less';
9+
//Import Bootstrap layout systems
10+
@import '../../../node_modules/bootstrap/less/mixins.less';
11+
@import '../../../node_modules/bootstrap/less/grid.less';
12+
@import '../../../node_modules/bootstrap/less/utilities.less';
13+
@import '../../../node_modules/bootstrap/less/responsive-utilities.less';
14+
//Import only Bootstrap elements to support angular 2 docs styles
15+
@import '../../../node_modules/bootstrap/less/type.less';
16+
@import '../../../node_modules/bootstrap/less/forms.less';
17+
@import '../../../node_modules/bootstrap/less/buttons.less';
18+
@import '../../../node_modules/bootstrap/less/button-groups.less';
19+
@import '../../../node_modules/bootstrap/less/input-groups.less';
20+
@import '../../../node_modules/bootstrap/less/tables.less';
21+
@import '../../../node_modules/bootstrap/less/glyphicons.less';
22+
@import '../../../node_modules/bootstrap/less/alerts.less';
23+
@import '../../../node_modules/bootstrap/less/close.less';
24+
//Import opacity overrides
25+
@import './overrides/docs.opacity.overrides.less';
26+
//Import styles overrides and angular 2 doc styles layouts
27+
@import './overrides/docs.overrides.less';
28+
//Import accessibility tweaks
29+
@import './overrides/docs.a11y.overrides.less';

‎tools/styles-builder/less/colors/docs-material-palette.colors.less

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
//Style guide colors
2+
@material-header: #455A64;
3+
@material-header-darker: #37474F;
4+
@material-header-dark: #263238;
5+
@material-200: #EEEEEE;
6+
@material-700: #616161;
7+
@material-800: #424242;
8+
@material-900: #212121;
9+
@black: #000000;
10+
@white: #FFFFFF;

‎tools/styles-builder/less/mixins/docs.mixins.less

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.opacity(){
2+
opacity: 0.87;
3+
}
4+
5+
.top-header-text(){
6+
font-size: 50px;
7+
font-weight: bold;
8+
}
9+
10+
.header-text(){
11+
font-size: 30px;
12+
font-weight: bold;
13+
}
14+
15+
.sub-header-text(){
16+
font-size: 20px;
17+
font-weight: 400;
18+
line-height: 40px;
19+
}
20+
21+
.paragraph-text(){
22+
font-size: 16px;
23+
font-weight: 400;
24+
line-height: 28px;
25+
}
26+
27+
.label-text(){
28+
font-size: 16px;
29+
font-weight: 400;
30+
line-height: 28px;
31+
}
32+
33+
.button-text(){
34+
font-size: 16px;
35+
font-weight: bold;
36+
line-height: 28px;
37+
}
38+
39+
.input-text(){
40+
font-size: 16px;
41+
font-weight: 400;
42+
line-height: 28px;
43+
margin-top: 15px;
44+
}

‎tools/styles-builder/less/overrides/bootstrap.overrides.less

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
//Main Bootstrap color overrides
2+
@gray-base: @black;
3+
@gray-darker: @black;
4+
@gray-dark: @material-900;
5+
@gray: @material-800;
6+
@gray-light: @material-700;
7+
@gray-lighter: @material-200;
8+
9+
//Font override
10+
@font-family-sans-serif: "Roboto", Helvetica, Sans-Serif;
11+
12+
//Glyphicons font path
13+
@icon-font-path: "./node_modules/bootstrap/fonts/";
14+
15+
//Class overrides
16+
@input-color: @gray-dark;
17+
@text-color: @gray-dark;
18+
@btn-primary-color: @gray-lighter;
19+
@btn-primary-bg: @material-header-dark;
20+
@btn-default-color: @white;
21+
@btn-default-bg: @material-header-darker;

‎tools/styles-builder/less/overrides/docs.a11y.overrides.less

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
//Accessibility tweaks
2+
@danger-text: #632827;
3+
@state-danger-text: @danger-text;
4+
5+
input {
6+
&::-webkit-input-placeholder {
7+
color: @gray-light !important;
8+
}
9+
10+
&::-moz-placeholder {
11+
color: @gray-light !important;
12+
}
13+
}
14+
15+
label {
16+
input, textarea, select {
17+
font-weight: normal;
18+
}
19+
}
20+
21+
button.btn.disabled,
22+
button.btn[disabled] {
23+
color: @white;
24+
background-color: @black;
25+
}
26+
27+
.btn.btn-primary:not(.disabled):not([disabled]) {
28+
&:hover,
29+
&:focus{
30+
color: @black;
31+
background-color: @gray-lighter;
32+
}
33+
}
34+
35+
.btn.btn-default:not(.disabled):not([disabled]) {
36+
&:hover,
37+
&:focus{
38+
color: @black;
39+
background-color: @gray-lighter;
40+
}
41+
}
42+
43+
button.btn.disabled, button.btn[disabled] {
44+
&:hover,
45+
&:focus{
46+
color: @white;
47+
background-color: @black;
48+
}
49+
}
50+
51+
.close,
52+
.close:hover,
53+
.close:focus{
54+
opacity: 1;
55+
}

‎tools/styles-builder/less/overrides/docs.opacity.overrides.less

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
//Opacity tweaks
2+
3+
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
4+
.opacity();
5+
}
6+
7+
label {
8+
9+
input {
10+
opacity: 1;
11+
}
12+
13+
.opacity();
14+
}
15+
16+
17+
input {
18+
.opacity();
19+
}
20+
21+
.label-default {
22+
.opacity();
23+
}
24+
25+
legend {
26+
.opacity();
27+
}
28+
29+
button {
30+
.opacity();
31+
}
32+
33+
span, p, dl {
34+
.opacity();
35+
}

‎tools/styles-builder/less/overrides/docs.overrides.less

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
//Design tweaks
2+
h1 {
3+
color: @material-header;
4+
.top-header-text();
5+
}
6+
7+
h2 {
8+
color: @material-header;
9+
.header-text();
10+
}
11+
12+
h3, legend {
13+
.sub-header-text();
14+
}
15+
16+
label, .label-default {
17+
.label-text();
18+
}
19+
20+
input, textarea, select {
21+
color: @gray-dark;
22+
.input-text();
23+
}
24+
25+
span, p, dl, .doc-text {
26+
.paragraph-text();
27+
}
28+
29+
button.btn {
30+
.button-text();
31+
}
32+
33+
.dl-horizontal dt {
34+
text-align: left;
35+
}
36+
37+
.input-group-btn {
38+
padding-top: 15px;
39+
40+
button.btn {
41+
padding-top: 2px;
42+
padding-bottom: 3px;
43+
}
44+
45+
}
46+
47+
.shadow-1 {
48+
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
49+
}
50+
51+
.showcase {
52+
margin-bottom: 20px;
53+
}
54+
55+
.showcase .showcase-header {
56+
background: #E0E0E0;
57+
padding: 32px;
58+
}
59+
60+
.showcase .showcase-content {
61+
padding: 32px;
62+
}
63+
64+
.main-header {
65+
margin-bottom: 40px;
66+
}
67+
68+
a *{
69+
color:inherit;
70+
71+
&:hover {
72+
color: inherit;
73+
}
74+
75+
}

0 commit comments

Comments
 (0)