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!

Open Link

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!

VSTS build badge npm peerDependencies Status devDependency Status

Alpha - preview

Many controls Typography Forms Jumbotron ListGroup Tables Toasts Cards

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 bootstrap class on your body, like <body class="bootstrap">.
  • To display the Bootstrap Dark theme, apply the bootstrap-dark class 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

  1. You need npm to build this project; see Node JS[2] for more info.
  2. You need .NET Core 2; see .NET Core Downloads[3] for more info.

Getting started

  1. Clone this repo
  2. Run npm install
  3. Go to the app directory (cd app)
  4. Run dotnet restore

Starting the project

  1. Run dotnet run (from the app directory) or if you are using VS Code, Start Debugging will work.
  2. 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

  1. gulp-watch simply runs gulp watch
  2. browser-sync-proxy starts browsersync watching for any wwwroot/css/*.css changes
  3. watch run both previous scripts in parallel

gulp scripts

  1. build-theme compile the theme to css.
  2. copy-dist-to-wwwroot copy the dist folder content to wwwroot (used by web pages).
  3. copy-bootstrap-js copy the bootstrap js files to the dist/js directory.
  4. watch execute copy-bootstrap-js then watch to rebuild the theme.
  5. default simply runs both build-theme and copy-bootstrap-js.

The project structure

  • app is the Asp.Net Core application that is used to test the theme. This directory is not packaged.
    • Pages are 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).

    • Services are the web pages services; so far it's pretty thin.
    • wwwroot are the web assets; the dist files are copied there.
  • assets are the project assets (like the screenshot in the readme file).
  • dist are 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.
  • scss are 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.json contributors array.
  • 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 a text-decoration: underline;
    • This was conflicting with .btn in p.
    • Moreover, Bootstrap does not implement such a thing so bootstrap-dark should not either.

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-color to $dark
  • Tables
    • Enforce that $table-border-color is based on the new $border-color
    • Enforce that $table-color is based on $body-color
    • Enforce that $table-hover-color is based on $table-color
  • Jumbotron
    • The $jumbotron-bg color is now used

1.0.0-alpha.888

  • Add a themeable .navbar component, using the css class .navbar-themed, that:
    • When body.bootstrap, the navbar becomes .bg-light and .navbar-light.
    • When body.bootstrap-dark, the navbar becomes .bg-dark and .navbar-dark.

1.0.0-alpha.863

  • Move the print import out of the dark/light body class. This should fix bugs like .navbar being display: none by default when loading the .min.css stylesheet.

  • 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 the toggle-bootstrap.css and once with the toggle-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

  1. ^ https://www.myget.org/F/forevolve/npm/ (www.myget.org)
  2. ^ Node JS (nodejs.org)
  3. ^ .NET Core Downloads (www.microsoft.com)
  4. ^ Contributing to ForEvolve open source projects (github.com)
  5. ^ Contributor Covenant Code of Conduct (github.com)
  6. ^ Bootstrap Theme Kit (hackerthemes.com)
  7. ^ Alexander Rechsteiner (github.com)
  8. ^ Hacker Themes (hackerthemes.com)
keywords

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in webdev
Hugo Font Awesome Icons [ Icons ] - CSS Bundle Daily Dev Tips CSS Background Patterns by MagicPattern GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. GitHub - jonasstrehle/supercookie: ⚠️ Browser fingerprinting via favicon! URL-encoder for SVG Bootstrap Icons · Official open source SVG icon library for Bootstrap GitHub - kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer Toggle light and dark themes in Bootstrap - DEV Deploy your Publish website for free on GitHub Pages - DEV Bootstrap · The most popular HTML, CSS, and JS library in the world. GitHub - diegocard/awesome-html5: A curated list of awesome HTML5 resources Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked [ php ] - KruXoR openstreetmap.org 50 Developer tools to make your life a little easier https://www.mrlacey.com/2020/07/youve-only-added-two-lines-why-did-that.html?m=1 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! Responsive Web Design Online Testing - isResponsive Trianglify.io · Low Poly Pattern Generator Grid.js - Advanced table plugin HEAD - A free guide to <head> elements Roots | Modern WordPress Development Tools A Local Dev Tool For Every Project | Lando new.css Synchronized responsive testing, development, inspection | Vanamco Gold Price Charts Widgets | GoldBroker.com Trianglify.io · Low Poly Pattern Generator Special tags that Google understands - Search Console Help 404 Error Page Codepen ScrollMagic ♥ Demo AOS - Animate on scroll library Font Awesome v4.7.0 - Icon Search Tool Carbon Offers — LowEndTalk Featherlight – The ultra slim jQuery lightbox. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs HEAD - A free guide to <head> elements API Blueprint | API Blueprint Filtering Data Client-Side: Comparing CSS, jQuery, and React | CSS-Tricks CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻 Responsive Slider Timeline Colormind - the AI powered color palette generator Get Waves – Create SVG waves for your next design Nuxt.js - The Vue.js Framework CodeSandbox: Online Code Editor Tailored for Web Application Development Hover.css - A collection of CSS3 powered hover effects Live.js - One script closer to Designing in the Browser Color this sofa! – SVG + Blend Mode trick You Might Not Need jQuery
Other Categories in Linx
ai apps articles cloud apps code coffee factorio games hardware health iphone lists minecraft music pi security stock images stock images tech vpn web dev web developer websites windows ai android api apps articles asp audio australia bio bitcoin blog books bootstrap career charts code editors codepens cooking css css animations daily linx data day trips design design elements drawing education emulators entrepreneur factorio fitness flowcharts fonts foobar2000 themes games hardware headphones health home automation html templates icons itunes javascript jquery js linux mac maps media mhx minecraft misc money motivation music network news nginx os osrs pantheon parenting phone phones php pi products programming radio random reading reddit rs3 runescape seo shopping sqlite stock images storage tax tech technology text formatting tools trains video video editor videos wallpapers weather web web design web development web sites webdev windows wine wordpress workout youtube
Search Linx
Search Linx by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Random CSS Property

cursor

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
cursor css reference