Bootstrap 3 support?

[nyteshade]

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

[Seraf]

👍 should be great !

[jamby]

I was bored a few days ago and am working on the Bootstrap 3 support of it. Literally just going down the list and fixing everything.

Though, be warned, tons of stuff was removed between Bootstrap 2 and Bootstrap 3. And one of the most confusing part is now instead of span# it's col-xs/sm/md/lg-# (example is col-lg-6).

But give me a few days, I'll attempt to put a pull request for this.

[danneu]

I added the scss file: https://github.com/danneu/darkstrap/blob/master/darkstrap.scss -- I think it's slightly out of date with the latest css file. Something minor though, like I think I need to backport a pull request or two.

My development workflow is not pretty and I'd love to simplify it so that people can easily contribute.

In fact, I think the complexity of my workflow is the main cause of the stagnation of this project since I have to relearn how I do it every time I want to make a trivial edit.

Check out this monstrosity.

This is how the darkstrap.scss Sass file works:

1. darkstrap.scss first includes the Compass framework: https://github.com/danneu/darkstrap/blob/master/darkstrap.scss#L1 for some conveniences I should just do by hand
2. Then it sets up a bunch of Bootstrap variables
3. And then it includes bootstrap.scss, the Sass port of Bootstrap: https://github.com/danneu/darkstrap/blob/master/darkstrap.scss#L106 so that the variables in the previous step are in scope

And this is how I turn it into the darkstrap.css CSS release file, if I recall correctly:

1. I compile darkstrap.scss into darkstrap-full.css. This file includes Compass CSS and vanilla Bootstrap CSS.
2. Of course, since darkstrap.css is supposed to be a simple CSS file override that you link after bootstrap.css, I want to consolidate darkstrap-full.css into only the CSS rules that have changed. I use a diff tool (vimdiff) to compare bootstrap.css and darkstrap-full.css
3. I delete everything except the few dozen rules that have changed. This is the comically tedious step that takes at least 45 seconds with some clever vimdiff code folding.
4. Once all the chaff is removed, I have the latest release of darkstrap.css.

[danneu]

That was the comical workflow I came up with two years ago when I first started this project, so going forward I'd like to:

• Remove Compass dev dependency
• Use Bootstrap's Less files instead of depending on a Sass port
• Simplify workflow. Ideally there would just be a Sass/Less -> CSS direct conversion that only specifies overrides instead of generating full Bootstrap.

So those are some things I'll try to figure out.

[jamby]

Hey Dan,

I've actually fixed the demo for this in Bootstrap 3, and I've fixed some of the CSS in the Darkstrap CSS file to allow it.

Not sure if you want it, but I do have it. Though I got rid of some of the things that were on the demo, since Bootstrap 3 seemed to get rid of them.

If you don't need it and you're almost done, then that's fine. I did it while I started my new job since I literally was doing nothing (getting set up and whatnot).

[raf66]

👍 to create darkstrap for bootstrap 3!

[danneu]

@irjamby Badass. Could you share it?

[jamby]

@danneu Yes, but where do you want it? I have the .css file and then the .html.erb file that would go on your personal site. Want me to just commit both to darkstrap and then let you put them where ever?

[MichaelPaulukonis]

@irjamby

• fork
• fetch
• change
• pull request

[jamby]

#22

This is now in a pull request. @danneu has a blog that I also submitted a pull request to with the updated demo.

[danneu]

I'll update this repo to include two darkstraps: darkstrap-2-x.css for Bootstrap 2, and darkstrap-3-x.css (contributed by irjamby) for Bootstrap 3. I also think I will change the versioning to be darkstrap-<bootstrap-major-version>-<darkstrap-version>.css. bootstrap-major-version being 2 or 3, and darkstrap-version just being an integer I increment on each commit.

I think this would be the least confusing way to distribute darkstrap particularly for non-developers (compared to, say, git tags). But I'm also a git noob myself.

[danneu]

I did port irjamby's generous darkstrap3.css pull request to my blog and will add it as a demo.

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

You can see the darkstrap3.css here: http://www.danneu.com/bag/darkstrap/css/darkstrap3.css

There are some small issues that I'll resolve when I add a post about the updated Darkstrap and link to the 3.0 demo.

And I still need to fix some Webkit-specific issues with things like selection boxes.

[aldanor]

@danneu Great stuff! Darkstrap 3 looks good, the only major difference that I noticed though is the height of input controls, they all look much smaller in v3 than their counterparts in the stock theme or v2.

[paulbhartzog]

Very glad to see this. Would be great to a list of URLs/projects that have used it.