Skip to content
Permalink
Browse files
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
  • Loading branch information
talha131 committed Jan 31, 2020
1 parent 77bbfb5 commit 43ee8eb2ad6ba22bac6660bdb514857dadf9bcab
Show file tree
Hide file tree
Showing 47 changed files with 13,892 additions and 6 deletions.
@@ -19,6 +19,14 @@ const content_404 = () =>
const cleanOutput = () => exec("cd documentation && rm -rf outout/");

const buildContent = () => exec("cd documentation && invoke build");
const compileBootstrapLess = () =>
exec(
"node_modules/recess/bin/recess --compile static/bootstrap/bootstrap.less > static/css/bootstrap.css"
);
const compileResponsiveLess = () =>
exec(
"node_modules/recess/bin/recess --compile static/bootstrap/responsive.less > static/css/bootstrap_responsive.css"
);

const reload = cb => {
browserSync.init(
@@ -54,7 +62,10 @@ const watchFiles = () => {
"documentation/publishconf.py",
"templates/**/*.html",
"static/**/*.css",
"static/**/*.less",
"!static/**/elegant.prod.css",
"!static/**/bootstrap.css",
"!static/**/bootstrap_responsive.css",
"static/**/*.js"
],
{ ignoreInitial: false },
@@ -88,8 +99,16 @@ const compileCSS = () => {
.pipe(dest("static/css/"));
};

const buildAll = series(rmProdCSS, compileCSS, buildContent);
const buildAll = series(
rmProdCSS,
compileBootstrapLess,
compileResponsiveLess,
compileCSS,
buildContent
);
const elegant = series(
compileBootstrapLess,
compileResponsiveLess,
compileCSS,
cleanOutput,
buildContent,
@@ -98,6 +117,11 @@ const elegant = series(

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

exports.css = series(rmProdCSS, compileCSS);
exports.css = series(
rmProdCSS,
compileBootstrapLess,
compileResponsiveLess,
compileCSS
);
exports.elegant = elegant;
exports.default = elegant;
@@ -15,6 +15,7 @@
"gulp-run-command": "^0.0.10",
"postcss-font-magician": "^2.3.1",
"postcss-preset-env": "^6.7.0",
"recess": "^1.1.9",
"semantic-release": "^15.13.31"
},
"config": {
@@ -0,0 +1,34 @@
//
// Accordion
// --------------------------------------------------


// Parent container
.accordion {
margin-bottom: @baseLineHeight;
}

// Group == heading + body
.accordion-group {
margin-bottom: 2px;
border: 1px solid #e5e5e5;
.border-radius(@baseBorderRadius);
}
.accordion-heading {
border-bottom: 0;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 8px 15px;
}

// General toggle styles
.accordion-toggle {
cursor: pointer;
}

// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
padding: 9px 15px;
border-top: 1px solid #e5e5e5;
}
@@ -0,0 +1,79 @@
//
// Alerts
// --------------------------------------------------


// Base styles
// -------------------------

.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @baseLineHeight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground;
border: 1px solid @warningBorder;
.border-radius(@baseBorderRadius);
}
.alert,
.alert h4 {
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: @warningText;
}
.alert h4 {
margin: 0;
}

// Adjust close link position
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: @baseLineHeight;
}


// Alternate styles
// -------------------------

.alert-success {
background-color: @successBackground;
border-color: @successBorder;
color: @successText;
}
.alert-success h4 {
color: @successText;
}
.alert-danger,
.alert-error {
background-color: @errorBackground;
border-color: @errorBorder;
color: @errorText;
}
.alert-danger h4,
.alert-error h4 {
color: @errorText;
}
.alert-info {
background-color: @infoBackground;
border-color: @infoBorder;
color: @infoText;
}
.alert-info h4 {
color: @infoText;
}


// Block alerts
// -------------------------

.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}
@@ -0,0 +1,63 @@
/*!
* Bootstrap v2.3.2
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// CSS Reset
@import "reset.less";

// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";

// Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less";

// Components: common
@import "sprites.less";
@import "dropdowns.less";
@import "wells.less";
@import "component-animations.less";
@import "close.less";

// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less

// Components: Nav
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";

// Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";

// Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels-badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@import "hero-unit.less";

// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
@@ -0,0 +1,24 @@
//
// Breadcrumbs
// --------------------------------------------------


.breadcrumb {
padding: 8px 15px;
margin: 0 0 @baseLineHeight;
list-style: none;
background-color: #f5f5f5;
.border-radius(@baseBorderRadius);
> li {
display: inline-block;
.ie7-inline-block();
text-shadow: 0 1px 0 @white;
> .divider {
padding: 0 5px;
color: #ccc;
}
}
> .active {
color: @grayLight;
}
}

0 comments on commit 43ee8eb

Please sign in to comment.