GitHub - ForEvolve/bootstrap-dark: Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark!
Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark!
Alpha - preview
This is a work in progress, if you like it and have some spare time, contributions are welcome.
Versioning
SemVer is used to keep things easy for everyone.
Prerelease
Until the project reaches an official version 1.0.0, the pre-release -alpha.[build number] suffix is added to the version number.
Since this is only a dark version of Bootstrap, there should not be many breaking changes worth investing in versioning. So don't worry too much about compatibility, updating to the latest alpha release should be safe enough.
If this is a major concerns to you, feel free to say so, and I'll see what I can do about it.
How to use
Official builds are available in the public npm registry.
npm install @forevolve/bootstrap-dark --save
The package contains the content of the dist directory which includes the Bootstrap JavaScript files, for convenience, and the Bootstrap Dark CSS files.
To load the dark theme, <link> the bootstrap-dark.css or the bootstrap-dark.min.css instead of the bootstrap[.min].css file. You can load the bundled JavaScript files, the original ones or the file from the CDN of your choosing.
Example:
<link rel="stylesheet" href="/css/bootstrap-dark.min.css" />Dark/Light toggle
You can now <link> both the toggle-bootstrap.css and the toggle-bootstrap-dark.css files to allow toggling the normal/dark theme based on your page body.
- To display the original Bootstrap color, apply the
bootstrapclass on your body, like<body class="bootstrap">. - To display the Bootstrap Dark theme, apply the
bootstrap-darkclass on your body, like<body class="bootstrap-dark">.
If you want to support print, load the toggle-bootstrap-print.css or toggle-bootstrap-print.min.css file after the others.
Example:
<link rel="stylesheet" href="/css/toggle-bootstrap.min.css" />
<link rel="stylesheet" href="/css/toggle-bootstrap-dark.min.css" />
<link rel="stylesheet" href="/css/toggle-bootstrap-print.min.css" />Themeable .navbar
When using the toggle-* stylesheets, you can create .navbar that uses the current theme. Light when <body class="bootstrap"> and dark when <body class="bootstrap-dark">.
Example, instead of navbar-light bg-light or navbar-dark bg-dark, use .navbar-themed, like this:
<nav class="navbar navbar-expand-lg navbar-themed">
...
</nav>CI builds
The CI builds are deployed to the following custom npm registry: https://www.myget.org/F/forevolve/npm/[1].
How to build
If you want to build the theme manually, modify it or even contribute, this section explains how.
Prerequisites
- You need
npmto build this project; see Node JS[2] for more info. - You need .NET Core 2; see .NET Core Downloads[3] for more info.
Getting started
- Clone this repo
- Run
npm install - Go to the app directory (
cd app) - Run
dotnet restore
Starting the project
- Run
dotnet run(from the app directory) or if you are using VS Code,Start Debuggingwill work. - Run
npm run watch
Once you started both server and the watch command, the browser-sync proxy should open in a browser at the following URI: http://localhost:3002.
Other build info
There is a few npm and gulp scripts.
npm scripts
gulp-watchsimply runsgulp watchbrowser-sync-proxystarts browsersync watching for anywwwroot/css/*.csschangeswatchrun both previous scripts in parallel
gulp scripts
build-themecompile the theme to css.copy-dist-to-wwwrootcopy thedistfolder content towwwroot(used by web pages).copy-bootstrap-jscopy the bootstrap js files to thedist/jsdirectory.watchexecutecopy-bootstrap-jsthen watch to rebuild the theme.defaultsimply runs bothbuild-themeandcopy-bootstrap-js.
The project structure
appis the Asp.Net Core application that is used to test the theme. This directory is not packaged.Pagesare the Asp.Net Core Razor Pages. That's the preview.Why .NET Core? Well, I wanted to script some loops, and I know .Net; so I picked Razor Pages to do just that: dynamic pages! Moreover, it is open source and cross-platform.
If you think that something else would be better, feel free to open an issue about it; I would not mind switching to another technology (see the Contribute section below).
Servicesare the web pages services; so far it's pretty thin.wwwrootare the web assets; thedistfiles are copied there.
assetsare the project assets (like the screenshot in the readme file).distare the redistributable files; if you want to copy/paste the files into your projects, that's the ones. They also include bootstrap JavaScript files, unaltered.scssare the source theme files.- Other files (root): npm, license, readme, etc.
Contribute
To contribute, start by opening an issue or reply on an existing issue so we can discuss your feature or bug to find the best way to approach it.
Once we settled on a strategy, you can then Fork/Code/Open a PR.
- Please add yourself in the
package.jsoncontributorsarray. - Please keep PR focused on a single feature, it is easier for everyone this way and it helps keep the conversation focused. I way prefer multiple smaller PR than a single huge one.
Thanks in advance for your contribution.
See Contributing to ForEvolve open source projects[4] and Contributor Covenant Code of Conduct[5] for more information.
Release notes
Since CI build numbers are automated, it is hard to know in advance what the next deployed build number will be, so the (latest) version represent that version.
1.0.0-alpha.(latest)
- Fix form validation feedback to address issue #40
- Add another form sample
1.0.0-alpha.1089
- Add table examples
- Fix form validation without
.was-validated#40
1.0.0-alpha.1087
- Update Bootstrap to 4.5.0
- Update dependencies to fix vulnerabilities
- Fix form validation #40
1.0.0-alpha.1075
- Remove
p atext-decoration: underline;- This was conflicting with
.btninp. - Moreover, Bootstrap does not implement such a thing so bootstrap-dark should not either.
- This was conflicting with
1.0.0-alpha.978
Darken the following elements:
- Dropdown
- Select
- Breadcrumb
- Pagination
1.0.0-alpha.974
- Update Bootstrap to 4.4.1
- Update other dependencies
1.0.0-alpha.937
1.0.0-alpha.902
1.0.0-alpha.899
- Utilities (borders)
- Update the default
$border-colorto$dark
- Update the default
- Tables
- Enforce that
$table-border-coloris based on the new$border-color - Enforce that
$table-coloris based on$body-color - Enforce that
$table-hover-coloris based on$table-color
- Enforce that
- Jumbotron
- The
$jumbotron-bgcolor is now used
- The
1.0.0-alpha.888
- Add a themeable
.navbarcomponent, using the css class.navbar-themed, that:- When
body.bootstrap, the navbar becomes.bg-lightand.navbar-light. - When
body.bootstrap-dark, the navbar becomes.bg-darkand.navbar-dark.
- When
1.0.0-alpha.863
-
Move the print import out of the dark/light body class. This should fix bugs like
.navbarbeingdisplay: noneby default when loading the.min.cssstylesheet. -
A new file is introduced:
toggle-bootstrap-print[.min].css. This stylesheet applies the print styles from bootstrap and has been extracted so it is included only once (not once with thetoggle-bootstrap.cssand once with thetoggle-bootstrap-dark.css). If you don't support print, you can omit this file; if you do, include it last. For example:<link rel="stylesheet" href="/css/toggle-bootstrap.min.css" /> <link rel="stylesheet" href="/css/toggle-bootstrap-dark.min.css" /> <link rel="stylesheet" href="/css/toggle-bootstrap-print.min.css" />
1.0.0-alpha.845
- Update the project description, the "How to use" section, and add the "Release notes" section
1.0.0-alpha.842
- Add support for dark/light toggling
1.0.0-alpha.774 & 1.0.0-alpha.723
References
More darkness!
The following project applies bootstrap-dark to the bootstrap documentation site allowing deeper testing of the theme:
Special thanks
I started this project based on the Bootstrap Theme Kit[6] by Alexander Rechsteiner[7] at Hacker Themes[8]. This allows me to publish a lighter version of the theme; making it easier to be used (compared to the full Bootstrap Jekyll docs).
References
- ^ https://www.myget.org/F/forevolve/npm/ (www.myget.org)
- ^ Node JS (nodejs.org)
- ^ .NET Core Downloads (www.microsoft.com)
- ^ Contributing to ForEvolve open source projects (github.com)
- ^ Contributor Covenant Code of Conduct (github.com)
- ^ Bootstrap Theme Kit (hackerthemes.com)
- ^ Alexander Rechsteiner (github.com)
- ^ Hacker Themes (hackerthemes.com)
Add Comment
Other Items in webdev
Other Categories in Linx
