Git Product home page Git Product logo

darkstrap's Introduction

Demo: Darkstrap vs. Bootstrap

Darkstrap (v0.9.3)

Made by danneu.

A dark theme for Twitter Bootstrap 3.

Usage

  • Download darkstrap.css

  • Place it in your stylesheet directory

  • Include it after you load bootstrap.css

Ideas behind the design

  1. Invert the colors of Twitter Bootstrap.

    screenshot of navbars

  2. Make .well look awesome.

    screenshot of a .well

  3. Integrate the darkstrap .well into other components.

    screenshot of a darkstrap form

Requests/Issues/Suggestions/Feedback

I'm always open to feedback and ideas.

I'm not a designer and I didn't do much testing on anything other than my screen with my eyes.

Since I don't actually use Darkstrap in a project of my own anymore, I'm open to suggestions from the people that do.

Feel free to create a Github Issue or just email me.

darkstrap's People

Contributors

chri5b avatar danneu avatar fbjerggaard avatar jamby avatar lbatson avatar simonrupf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

darkstrap's Issues

Bootstrap 2.3.2 Support?

I see via the read me this works with 2.2.2, is 2.3.2 supported with the current release? If so just close this issue.

Bootstrap 3 support?

Wondering if you were going to make further updates to be compliant with Bootstrap 3

<Select> background color on Chrome

Not an urgent bug, but the background color of the <select> tag is totally black on Chrome, which is different and more darker from the <input> background color.

Blitzkrieg Mod API Manager Patches Create

Glyphs within tabs and headings should be white?

Shouldn't Line 146 be this?

[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings-white.png");
}

Without it, glyphs within tabs (and headings look like this:
darkstrap_icon_issue

Refactor Darkstrap to use Bootstrap's variables.

Darkstrap is a result of me judo'ing through Bootstrap CSS and copying my changes from Chrome's inspector into a text file.

A LOT of the work is redundant and can be solved with Bootstrap's robust variables.

Update darkstrap to work with latest bootstrap

Hi danneu,

Are there any plans to update darkstrap to work with the newest bootstrap?

I love darkstrap but I keep itching to update to to a newer verison of bootstrap. The current version doesn't work so well with it, though!

Cheers,
Ryan

hero-unit still bright

the css class .hero-unit for the frontpages is still bright, i could fix this with adding the .well class but would be cooler if darkstrap can handle is automaticly

Demo is not responsive

Per #18,

[T]he demo is not responsive? Is this version of twitter bootstrap responsive?

http://danneu.com/bag/darkstrap/darkstrap.html

While the demo is not responsive, themes themselves are generally not responsive all on their own -- you need to include the bootstrap-responsive.css file prior to the theme's css.

I'm doing this on a project, and Darkstrap generally responds well. I am having an issue with dropdowns, but that may be the fault of my own implementation.

It would be nice to have the demo responsive, for... demo purposes.

Bootstrap 3.0.0

Any plans of converting this to the new Bootstrap v3.0.0 ?

Support CDN Glyphicons?

I'm not too familiar with bootstrap, so please correct me if i am wrong anywhere, but it seems that Darkstrap should remove the following two CSS rules.

[class^="icon-"],
[class*=" icon-"] {
  background-image: url("../img/glyphicons-halflings.png");
}

.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("../img/glyphicons-halflings-white.png");
}

Why? Well, it assumes that your Bootstrap is a local instalation, rather than a CDN installation from http://www.bootstrapcdn.com/.

Now, unless i am mistaken, there is no need for this correct? By removing it, the glyph location will default back to the original bootstrap location, which will be identified based on the location on the bootstrap css file. Supporting both CDN and local installations.

Thoughts?

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.