I recently removed bootstrap from a website I have that is composed entirely of static HTML documents [1]. It's a teaser / marketing site for my current project. The sample sites looked nice and I figured that since I and CSS are of basically nodding acquaintance -- why not?
I discovered that Bootstrap was just too featuresome for my requirements and I could not, for the life of me, get it to look correct. Everything was slightly out of place. It drove me nuts.
This led to a quest to find a simple stylesheet with a document-focused layout. Such a thing is not easily found; all and sundry are bloody obsessed with displaying their infinite genius through monstrously bloated code for designs that swoosh and swoop and resize and spin and have this and that and the captain's hat.
In the end I repurposed a stylesheet I'd commissioned as part of a wordpress theme from a good designer I know and trust[2]. A simple columnar layout. Done, dusted.
[2] http://dribbble.com/karlbright . Insofar as the stylesheet you find above is bad, that's because I've been hacking on it for a few weeks since forking the original.
i) In the past I spent a lot of time with designers and now I can design a site from scratch myself (I am not a web developer). Before bootstrap sites designed by me looked very well on Mosaic :-)
ii) If I work with a designer I need to spec a lot of details (bullets, headings, columns, colors) and how the fit together. With bootstrap I know that I can change what I don't like.
iii) I can then talk with a designer to only change what I don't like. So Bootstrap is a foundation base.
An example of this is http://www.nektra.com where I use Python Django and Mezzanine as CMS. I've not implemented yet the last designer version which is better. Another site http://www.securecouponcodes.com is just plain bootstrap and was implemented a little bit after the framework was released. If it not were by bootstrap the second site would be delayed since it was implemented only by me.
Also means you can override a lot of the default mixins fairly simply.
I would rather not waste the time experimenting these days
But that's entirely the point of Bootstrap.
It's not something that's supposed to be used by designers. It's perfectly tailored for someone like me: a back/middleware developer who sucks at design, but has enough sense to know that when I try to design something it looks like poop. It's for projects I can't afford to bring on a dedicated designer for. I can just include a single CSS file, follow a basic HTML structure, and have something that looks good enough on every browser and mobile device. It's not going to win any design awards, but again, that's entirely the point: without a lot of thought on the front end, I have a design that doesn't get in the way of what I'm actually building.
What would people like me be doing without Bootstrap?
I doubt that more than 1% of websites need such unique designs that Bootstrap is too limiting.
Not only does it give both devs and designers a point of reference for communication, it makes it much easier to ramp up new devs since they don't need to learn the idioms of our style sheets.
If so many people are using Bootstrap as a default style, it makes me wonder if maybe the default way browser style HTML element shouldn't be closer to what Bootstrap does?
bootstrap is just a more pleasant baseline than unstyled markup.
At the professional web dev level, there's never been a better time to make your own stuff from scratch in HTML and CSS. Working with designers, with UX, with the product team - you can make interesting things happen on all screens.
Building from scratch, a good responsive HTML page or website template is NOT "reinventing the wheel" as many bootstrappers claim. That is nonsense. The genius of HTML and modern CSS, and their consistent operation across devices, means it isn't much work at all to create the site you want, without using framework training wheels.
The "mobile first" mantra has blown out of proportion and is now another annoying catch-phrase. It's confusing too, does it mean mobile phone first or are we talking about tablets. Or just touch screens? Does that incldue touch screen laptops?
Is there an equivalent cliche in print? "Sticky-note first" is actually a lot clearer and easier to understand.
"Mobile first" sounds like a command issued from above, with which we must obey, or perish. Next, the grid system rhetoric.
The CREDIT for responsive websites belongs to modern browsers and their consistent rendering of CSS3 and HTML. We don't need bootstrap to achieve responsive, mobile-friendly layouts. Grid layouts can be useful, but your whole page doesn't NEED to be divided into columns and rows and spans or else crumble in a pathetic heap.
Finally, the worst thing you can tell a designer is "hey, you can make it look however you like, but it must conform to the 12 column grid because that's [the way of the future; the technical limitation; how 1% of the web is doing it". Bravo, developers telling designers to keep their layout energy in their pants and conform to the grid. "Nope, those thumbs can't be flush with a zero left and right margin, it will break the grid, duh!"
Even if you don't like boostrap, I'd recommend building your own skeleton framework that you can re-purpose without having to spend those first 10-20 hours re-building from scratch every time you start a new project.
Bootstrap and others like it just get in the way if you already have something built.
Progressive enhancement allows a complex responsive design to emerge organically.
How that is implemented is up to the developer.
It means our resources are allocated in the most intelligent way.
- supporting Twitter does not do any damage (unless you'd argue it's subject to the mass surveillance problem and should therefor be avoided)
- you're not being locked in, you can drop it at any time without any consequences
When you treat Bootstrap as a foundation rather than the entire presentational layer for an application, it's really quite good. Unfortunately, many people throw Bootstrap into an application and call it done, resulting in a very homogeneous look-and-feel across a tremendous number of websites.
However, of late, I've been doing it this way (rather WIP) -
* Setup a base starting skeleton code (HTML/CSS).
* Include the most important ones such as - normalize, typography and/or a grid.
Start with that and then depending on the size and complexity of the project, add frameworks under "vendor", where bootstrap or foundation or any other framework goes. One thing to be aware is to extract the "configs" and "globals" from the framework you want to use and take it to your "base" starting point.
So,
- BASE (your starting lean code)
- A Vendor framework (Bootstrap, Foundation or just a grid framework like Mueller Grid or just a typography framework like Typeplate)
- Finally, your UI Codes.
Additionally, you an add the following (never goes to production)
- DEBUG Styles
- Shame or design-time-only styles.
This helps in staying lean with your codes to start a project and at the same time, ready to add in the heavy-weights if need be. The remainder is of course the User Interface that you need to design.
Note:
- A CSS pre-processor such as Sass or Less really help in this workflow.
- Following a methodology like BEM[1] or OOCSS[2] can really make life easy.
- The SMACSS[3] Book is a good one to look at.
UPDATE: Here is my current organization (WIP) - https://www.dropbox.com/s/3airw24jdn3snsh/Screen%20Shot%2020...
1. Use Bootstrap
2. Customize it
Has worked for me on https://kippt.com & https://sendtoinc.com without dragging down the design
For instance, for a simpler website which would be OK with just a grid but not all the other modules of Foundation, I can just pick up the grid. btw, Foundation's new medium grid, "grid-5.scss" is nice one.
However I think 'powered' is taking things a bit far. Maybe 'styling' 1% of the web or 'powering the front-end' of 1% of the web. Wordpress uses the term 'powered' and that's fine because they actually do power a huge number of sites. That doesn't apply to most large sites running Bootstrap. Take Coinbase for example. They're still basically just running stock Bootstrap - but the site is 'powered' by a beefy custom backend.
- It doesn't really fit with my workflow. I find that when I use a framework I end up designing the copy, content, and functionality of my templates to fit within a given confine, which ticks me off. I prefer starting with the content that the page has to display and building the CSS up from there (it helps that I have more front-end experience than the average webdev.)
- I don't like the look of them, for the most part. Yes, you can customize them, but you can still tell who started with a Bootstrap template. No, most customers won't care (or even know what Bootstrap is), but I care, dammit, because I've seen a few dozen too many MVPs that never evolved their design past the "hey, lets change the nav bar to red" stage.
That being said, this is still incredibly inspiring. These frameworks are resulting in more people producing and publishing valuable work, which is awesome. I can't wait to see what the future holds for these projects.
I was amazed how easy it is, and how little 'boilerplate' or scaffolding was needed.
Obviously there are tradeoffs, I'm sure my rounded corners don't work on old versions of IE. Benefits are one less layer of complexity, and that's powerful. I feel the same way about CSS preprocessors.
Now... I'm not going to evangelize against it, and I'm sure I'll need to use bootstrap again. But it's great to know I don't need a framework, a grid, or any of that extra.
I just opened up the app I've been working on for the last 6 weeks, which uses Bootstrap, but really a lot of it is customized. So I wondered whether I could just pull out Bootstrap.
And looking through it, there's really not much of Bootstrap left. But then I'm poking around and there's a dialog box with an attached suffix. And that's not something I really want to fiddle with right now, so having one that Just Works is great.
Of course I could poke around on the web and maybe find some purpose-built HTML that does that task. But with Bootstrap I know that there's a wide range of stuff that works across browsers, and I can just throw it in.
Second of all, not liking bootstrap is like not liking martini shakers 'cos you don't have any martinis to shake.
Just because you don't have a use for a tool doesn't make the tool useless and clearly lots of people have martinis to shake.
This trolling and bickering is very non-hacker/non-productive and ya'll need to settle.
He deserves all of the accolades that Bootstrap receives; what an amazing contribution to the web dev community.
