Skip to content

Commit 43ee8eb

Browse files
talha131talha131
committed
fix(bootstrap): WIP. add Bootstrapv2.3.2 sources file to the project
This way we can alter them directly, remove what we don't need, and move the relevant code to our CSS files. I downloaded the source from here https://getbootstrap.com/2.3.2/getting-started.html I tried to use gulp-less, but it could not compile the Bootstrap files and generated an error. I used the tool they used in their Makefile. https://github.com/twitter/recess Update #429
1 parent 77bbfb5 commit 43ee8eb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+13892
-6
lines changed

‎gulpfile.babel.js

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ const content_404 = () =>
1919
const cleanOutput = () => exec("cd documentation && rm -rf outout/");
2020

2121
const buildContent = () => exec("cd documentation && invoke build");
22+
const compileBootstrapLess = () =>
23+
exec(
24+
"node_modules/recess/bin/recess --compile static/bootstrap/bootstrap.less > static/css/bootstrap.css"
25+
);
26+
const compileResponsiveLess = () =>
27+
exec(
28+
"node_modules/recess/bin/recess --compile static/bootstrap/responsive.less > static/css/bootstrap_responsive.css"
29+
);
2230

2331
const reload = cb => {
2432
browserSync.init(
@@ -54,7 +62,10 @@ const watchFiles = () => {
5462
"documentation/publishconf.py",
5563
"templates/**/*.html",
5664
"static/**/*.css",
65+
"static/**/*.less",
5766
"!static/**/elegant.prod.css",
67+
"!static/**/bootstrap.css",
68+
"!static/**/bootstrap_responsive.css",
5869
"static/**/*.js"
5970
],
6071
{ ignoreInitial: false },
@@ -88,8 +99,16 @@ const compileCSS = () => {
8899
.pipe(dest("static/css/"));
89100
};
90101

91-
const buildAll = series(rmProdCSS, compileCSS, buildContent);
102+
const buildAll = series(
103+
rmProdCSS,
104+
compileBootstrapLess,
105+
compileResponsiveLess,
106+
compileCSS,
107+
buildContent
108+
);
92109
const elegant = series(
110+
compileBootstrapLess,
111+
compileResponsiveLess,
93112
compileCSS,
94113
cleanOutput,
95114
buildContent,
@@ -98,6 +117,11 @@ const elegant = series(
98117

99118
exports.validate = run("jinja-ninja templates");
100119

101-
exports.css = series(rmProdCSS, compileCSS);
120+
exports.css = series(
121+
rmProdCSS,
122+
compileBootstrapLess,
123+
compileResponsiveLess,
124+
compileCSS
125+
);
102126
exports.elegant = elegant;
103127
exports.default = elegant;

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"gulp-run-command": "^0.0.10",
1616
"postcss-font-magician": "^2.3.1",
1717
"postcss-preset-env": "^6.7.0",
18+
"recess": "^1.1.9",
1819
"semantic-release": "^15.13.31"
1920
},
2021
"config": {

‎static/bootstrap/accordion.less

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
//
2+
// Accordion
3+
// --------------------------------------------------
4+
5+
6+
// Parent container
7+
.accordion {
8+
margin-bottom: @baseLineHeight;
9+
}
10+
11+
// Group == heading + body
12+
.accordion-group {
13+
margin-bottom: 2px;
14+
border: 1px solid #e5e5e5;
15+
.border-radius(@baseBorderRadius);
16+
}
17+
.accordion-heading {
18+
border-bottom: 0;
19+
}
20+
.accordion-heading .accordion-toggle {
21+
display: block;
22+
padding: 8px 15px;
23+
}
24+
25+
// General toggle styles
26+
.accordion-toggle {
27+
cursor: pointer;
28+
}
29+
30+
// Inner needs the styles because you can't animate properly with any styles on the element
31+
.accordion-inner {
32+
padding: 9px 15px;
33+
border-top: 1px solid #e5e5e5;
34+
}

‎static/bootstrap/alerts.less

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
//
2+
// Alerts
3+
// --------------------------------------------------
4+
5+
6+
// Base styles
7+
// -------------------------
8+
9+
.alert {
10+
padding: 8px 35px 8px 14px;
11+
margin-bottom: @baseLineHeight;
12+
text-shadow: 0 1px 0 rgba(255,255,255,.5);
13+
background-color: @warningBackground;
14+
border: 1px solid @warningBorder;
15+
.border-radius(@baseBorderRadius);
16+
}
17+
.alert,
18+
.alert h4 {
19+
// Specified for the h4 to prevent conflicts of changing @headingsColor
20+
color: @warningText;
21+
}
22+
.alert h4 {
23+
margin: 0;
24+
}
25+
26+
// Adjust close link position
27+
.alert .close {
28+
position: relative;
29+
top: -2px;
30+
right: -21px;
31+
line-height: @baseLineHeight;
32+
}
33+
34+
35+
// Alternate styles
36+
// -------------------------
37+
38+
.alert-success {
39+
background-color: @successBackground;
40+
border-color: @successBorder;
41+
color: @successText;
42+
}
43+
.alert-success h4 {
44+
color: @successText;
45+
}
46+
.alert-danger,
47+
.alert-error {
48+
background-color: @errorBackground;
49+
border-color: @errorBorder;
50+
color: @errorText;
51+
}
52+
.alert-danger h4,
53+
.alert-error h4 {
54+
color: @errorText;
55+
}
56+
.alert-info {
57+
background-color: @infoBackground;
58+
border-color: @infoBorder;
59+
color: @infoText;
60+
}
61+
.alert-info h4 {
62+
color: @infoText;
63+
}
64+
65+
66+
// Block alerts
67+
// -------------------------
68+
69+
.alert-block {
70+
padding-top: 14px;
71+
padding-bottom: 14px;
72+
}
73+
.alert-block > p,
74+
.alert-block > ul {
75+
margin-bottom: 0;
76+
}
77+
.alert-block p + p {
78+
margin-top: 5px;
79+
}

‎static/bootstrap/bootstrap.less

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/*!
2+
* Bootstrap v2.3.2
3+
*
4+
* Copyright 2013 Twitter, Inc
5+
* Licensed under the Apache License v2.0
6+
* http://www.apache.org/licenses/LICENSE-2.0
7+
*
8+
* Designed and built with all the love in the world by @mdo and @fat.
9+
*/
10+
11+
// Core variables and mixins
12+
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
13+
@import "mixins.less";
14+
15+
// CSS Reset
16+
@import "reset.less";
17+
18+
// Grid system and page structure
19+
@import "scaffolding.less";
20+
@import "grid.less";
21+
@import "layouts.less";
22+
23+
// Base CSS
24+
@import "type.less";
25+
@import "code.less";
26+
@import "forms.less";
27+
@import "tables.less";
28+
29+
// Components: common
30+
@import "sprites.less";
31+
@import "dropdowns.less";
32+
@import "wells.less";
33+
@import "component-animations.less";
34+
@import "close.less";
35+
36+
// Components: Buttons & Alerts
37+
@import "buttons.less";
38+
@import "button-groups.less";
39+
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
40+
41+
// Components: Nav
42+
@import "navs.less";
43+
@import "navbar.less";
44+
@import "breadcrumbs.less";
45+
@import "pagination.less";
46+
@import "pager.less";
47+
48+
// Components: Popovers
49+
@import "modals.less";
50+
@import "tooltip.less";
51+
@import "popovers.less";
52+
53+
// Components: Misc
54+
@import "thumbnails.less";
55+
@import "media.less";
56+
@import "labels-badges.less";
57+
@import "progress-bars.less";
58+
@import "accordion.less";
59+
@import "carousel.less";
60+
@import "hero-unit.less";
61+
62+
// Utility classes
63+
@import "utilities.less"; // Has to be last to override when necessary

‎static/bootstrap/breadcrumbs.less

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
//
2+
// Breadcrumbs
3+
// --------------------------------------------------
4+
5+
6+
.breadcrumb {
7+
padding: 8px 15px;
8+
margin: 0 0 @baseLineHeight;
9+
list-style: none;
10+
background-color: #f5f5f5;
11+
.border-radius(@baseBorderRadius);
12+
> li {
13+
display: inline-block;
14+
.ie7-inline-block();
15+
text-shadow: 0 1px 0 @white;
16+
> .divider {
17+
padding: 0 5px;
18+
color: #ccc;
19+
}
20+
}
21+
> .active {
22+
color: @grayLight;
23+
}
24+
}

0 commit comments

Comments
 (0)