Giter Site home page Giter Site logo

bootstrap-dark's Introduction

Bootstrap 4 Dark theme

This is a Bootstrap 4 dark theme.

VSTS build badge

Alpha - preview

This is a work in progress...

Alpha - preview

How to use

Official builds are available in the public npm repository.

npm install @forevolve/bootstrap-dark --save

The CI builds are deployed to the following custom npm registry: https://www.myget.org/F/forevolve/npm/.

TODO: write a better guide...

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 for more info.
  2. You need .NET Core 2; see .NET Core Downloads for more info.

Getting started

  1. Clone this repo
  2. Go to the app directory (cd app)
  3. Run npm install
  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.

Contribute

To contribute, feel free to contact me.

If you feel confident enough (or if the issue tracker is more populated and I forgot to update this section), feel free to submit a PR.

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!

    • 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.

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 by Alexander Rechsteiner at Hacker Themes. This allows me to publish a lighter version of the theme; making it easier to be used (compared to the full Bootstrap Jekyll docs).

bootstrap-dark's People

Contributors

carl-hugo avatar

Watchers

James Cloos avatar Igor Babic avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.