Upgrade or Remove Bootstrap

[grayghostvisuals]

Obviously this is a bit of a challenge, but if we don't need bootstrap at all I'm for removing it completely.

[joe-watkins]

I will dig into this and see about upgrading to 3.0 :)

[grayghostvisuals]

@joe-watkins Definitely, but I really don't think we need it…do you? I really think we can all design and develop something custom for our needs based on all the brains we have here. That's my $1.99

[heitzke]

It's not too complex of a site, it shouldn't be too bad to completely gut bootstrap. Is there already an updated design completed somewhere?

[svinkle]

I'm all for dropping bootstrap, keep jekyll. The site is pure content, words and some links. There's no reason it couldn't be super minimal and performant.

[joe-watkins]

Allow for me to make a case for Bootstrap.

Because it's a widely known framework, I feel like it lends itself well to rapid development and a built-in understanding among developers. Contributors hit the ground running with an understanding of the CSS framework which in great for the health of the project.

I fear a total custom solution could paint us into a corner of having to understand one of our custom grid/naming systems. New comers would not have to reverse engineer to quickly contribute.

If we do go custom, I'd push for a style guide being a requirement :)

With this being said I'm about 95% done porting to Bootstrap 3.0 and will push the branch for review. I am using Sass Bootstrap which allows us to prune the framework down to only what modules we need. Thus getting the CSS file down to next to nothing in terms of KB. I've also refactored the Sass folder structure to support a more modular approach with partials.

So perhaps while we work on a new design and implementation of that design getting us to 3.0 (4.0 BS they say should just plug in) is a good step. This means more developers in the end can contribute.

The footer load issue mentioned in #320 will solve a bunch of performance issues that I will conquer this week.

Thoughts?

[grayghostvisuals]

@joe-watkins I appreciate your enthusiasm, points and excitement here, but I can say that having bootstrap (as we've had for quite awhile) has not lended itself to encourage more contributors by any stretch. @davatron5000 supposedly has a few ideas up his sleeve on CodePen as far as design goes?

Parting thought here: I think the initiative you took with BS3 is great, but before doing that type of time consuming task (and potential push back from contributors) you should always consult in order to avoid lost work. Make sense? Trying to help here I guess in case nobody wants BS3 as is the case for the side I'm leaning towards.

[joe-watkins]

Tnx @grayghostvisuals :) BS played a role in encouraging my contributions to the project which is why I mentioned that... probably less to do with the framework and more to do with the existence of a style guide.

I totally hear ya on the consultation prior to performing time consuming tasks... and thanks! :)

Can't wait to see some new design ideas.

[grayghostvisuals]

@joe-watkins I definitely think the footer still needs your magic though ;) :wizardemoji:

[jenstrickland]

Hi guys, new to these parts, but I'm happy to help with a (responsive) redesign without Bootstrap. I encourage moving away from it for the usual reasons (accessibility, flexibility, maintenance, performance), and I'm a whizbang with html and css. My JavaScript foo needs practice, but my ux and viz design skills are also strong. Happy to help!

[davatron5000]

@jenstrickland, @heitzke Welcome to project! Thanks for helping out. We really appreciate it.

re: Bootstrap - I honestly could go either way. I think the biggest problem is that we're only using like 1% of Bootstrap: the navbar, the jumbotron, and the grid.

What I like about Bootstrap (and why I originally chose it) is that if we collectively agree to use it, it makes a lot of design decisions for us. I think we'll always be a project with an otherwise minimal design needs and putting our energy toward a11y education.

What I don't like about "out-of-the-box" Bootstrap is the reading experience, it's the biggest improvement I think we could make for a content site. I started playing with the Article component in hopes of making it more readable + a little personality with a webfont.

http://codepen.io/davatron5000/pen/PwQgwM

I was sort of envisioning a single column of text; more focused reading experience, bigger type, more open line-height. I think this could be accomplished inside the Bootstrap framework.

"Bootstrap vs. No Bootstrap" may be Holy War territory, so we should probably act quickly :wink: In the interest of being Iterative as opposed to Scorched Earth: Mow Down and Rebuild, I'd like to propose that we go with a Custom Leaner Build of Bootstrap 3.0. With less of a Bootstrap dependency, it could maybe gateway us to No Bootstrap or BS4.0 later.

So I'm :+1: on @joe-watkins making a PR with his BS3.0 branch.

Maybe from there we open up a few separate component-specific redesign issues and if those designs break us away from Bootstrap, great.

• Article
• Related Articles
• Header/Navigation
• Patterns/Resources Lists
• Footer (already opened)

[grayghostvisuals]

I'm rly clueless as to what we absolutely need from bootstrap going forward? All due respect on this issue we should really try to decide why we need it over lets use some of it. Lets remove it entirely is my final say here and it seems if we're being democratic to avoid a holy war then it's 4 people vs. 2 that don't want Bootstrap. Personally it's easier to add bootstrap as needed than it is to start with it and rip things out later? I don't know I guess I drink too much. As you all were :runner: :dash:

[davatron5000]

we should really try to decide why we need it over lets use some of it

That's a good point. I think the biggest piece of infrastructure that we have that relies on Bootstrap is the navbar. If we had a replacement design/codepen idea in place for that I'd probably be :100: on ditching Bootstrap.

[joe-watkins]

Cooked up PR for BS 3.0 upgrade here: #321 (Total CSS = 81k,.. not too bad.. that's down from 124k which is what we currently have)

BS is currently providing support for:

• normalize
• typography system
• form styles
• responsive grid
• main nav (small/large screen) css/js
• button styles

[jenstrickland]

Dave, if you'd like to chat about a redesign of the navbar, I'm happy to help. I'm a ux designer/developer, with visual design skills, etc.

From my experience with Bootstrap it simply has a lot of non-semantic tags that are unnecessary. The typography, styling, grid, etc are specific to BS, and if one wants to brand their own site it takes a lot to over-ride. it depends on the current mission of the site.

[grayghostvisuals]

@jenstrickland I have a few ideas revolving around a hidden nav, instead of always showing it.

[jenstrickland]

Do you have a reason for hiding the nav? In the design work we've done, we found it is generally better usability to not hide the nav. Adjusting a design to make contents of the nav clear, accessible, and touch-friendly, tends to perform better in usability testing.

[grayghostvisuals]

Do you have a reason for hiding the nav? In the design work we've done, we found it is generally better usability to not hide the nav

Can I see your examples?

[jenstrickland]

Fidelity has me on an NDA — so, unless you see it on Fidelity.com, or if you log in, no.

Generally, just style it to be usable.

Again, do you have a reason to want to hide the contents of the nav?

[heitzke]

Given the target audience of this effort, I don't see a problem with a hidden style nav. With appropriate markup & css it can be perfectly accessible. Granted, there is a bit of a dance since we should portray some best usability and accessibility practices, but we have some wiggle room here.

[grayghostvisuals]

@heitzke http://codepen.io/grayghostvisuals/pen/IkmGF minus the push though so it just overlays and has a subtle bounce once it opens. No reason A11Y stuff needs to look so plain and bare.

[jenstrickland]

Is there a good reason to hide the nav?

[grayghostvisuals]

FYI everyone in this issue: We are not using bootstrap so lets stop the chatter on that topic and move on.

[grayghostvisuals]

@jenstrickland Eventually the nav will hide on smaller screens. I really don't see this as a big deal here.

[jenstrickland]

Why would you want to hide the nav — on smaller screens or elsewhere? Is there a good reason to?

[grayghostvisuals]

@jenstrickland Yes, as the screen gets smaller the room becomes tight. This is noting new when it comes to RWD. If you take a look here http://cl.ly/image/3w3n2M2f1K09 you'll see we lack room eventually for the nav items (4) and there may be more in the future who knows. I think I'm kind of spent on this topic so we can progress forward.

[jenstrickland]

@grayghostvisuals I disagree that there is insufficient room to display the four items in the nav. I have extensive experience in rwd, and the myriad issues, including the rush to use things like the hamburger menu which studies have shown to be less than intuitive to users. It is a designer's responsibility to advocate for the people who use the things we build, and I don't see a good reason to hide the items, yet.

[grayghostvisuals]

@jenstrickland Can I see some examples of the work you've done with menus?

[jenstrickland]

@grayghostvisuals As stated above, NDA. Helpful, right? ;) If you look on my website, you'll find my resume. You can also find me on LinkedIn.

The way to tackle this is to evaluate the content, and design for the content. In your off-canvas example there were items that wouldn't be included in a navigation.

[grayghostvisuals]

Issue closed. Bootstrap is gone. Any issues that don't relate should not post here. Mgt says thanks :)