38 ms·
Flatstrap - Bootstrap with no rounded corners, gradients or drop shadows
- haydenchambers 14y agoa clear example of the lack of affordability of metro ui
- mamby 14y agothat's great
- lukeholder 14y agoAwesome. Although you would think since they are using a css preprocessor in the bootstrap project they could allow a flag on compile for things like these?
- WestN 14y agoAwesome, easier to trick around and make metro UI like web design. Though I think this could be easible compiled directly from bootstrap, just by stripping rounded corners and gradients. Or is there some other new ingredient?
- laacz 14y agoI, actually, like this, since android, windows 8 and even google are now using this simplified flat almost-not-rounded components. Feels much cleaner to me.
- d0ugal 14y agodo, you, really?
- laacz 14y agoYes. I do like Windows 8 UI elements, though I'll like them more after some more iterations from Microsoft. Metro is not very suitable for PC usage, but the direction is nice.
- adlpz 14y agoHe was mocking your commage. Unrelated noted: I agree, Metro is the best thing to happen to UX in a long time.
- laacz 14y agoI understand sacrasm (or irony - never could tell the difference without overthinking), but I believe that Metro will become more usable over time.
- mdpye 14y agoI, think, you're, still, missing, his, point; Hint: It had nothing to do with Metro and everything to do with this character ',' And if you can't tell the difference between sarcasm and irony without thinking, never mind over-thinking, then you likely understand neither. Edit: The initial reply to you was neither ironic, nor sarcastic.
- d0ugal 14y agobut Metro is quite nice.
- laacz 14y agoOK. This is about commas. I'm not native english speaker.
- d0ugal 14y agoSorry, I couldn't resist :)
- quarterto 14y agoThe Affix still has a drop shadow and rounded corners. Apart from that, looks great!
- jeffehobbs 14y agoKudos for keeping .img-rounded in there. That would be a very confusing class name if you straightened that out.
- axx 14y agoI've done this myself, but nice to have a dedicated project for this! :)
- jermaink 14y agoMay it be remarked, that the text on the starting page still has shadow ;) ?
- pud 14y agoVery nice! I kept the gradients but got rid of rounded corners here http://fandalism.com/ http://fandalism.com/
- wallawe 14y agoHey man, it would be a cool to see a follow up post for fandalism on what came out of your "I have 404,772 users. Now what?" story. http://news.ycombinator.com/item?id=3850739 http://news.ycombinator.com/item?id=3850739
- littlespark 14y agoLooks great! Good job.
- bertzzie 14y agoIs it just me or the stackable for the page still have rounded corner? (see image) http://i.imgur.com/pDa9S.png http://i.imgur.com/pDa9S.png
- indiecore 14y agoI was going to do this tonight, now I don't have to. Thanks.
- elomarns 14y agoNice! Although I like rounded corners and gradients, it's good to provide options for those who don't think the same.
- buster 14y agoFunny thing is when you click on examples the navigation menu indeed has rounded corners which immediately stands out :P
- saevarom 14y agoThe first thing I noticed as well!
- huytoan_pc 14y agoThe text on the homepage has drop shadow too...
- davidw 14y agoThe striped progress bar... isn't. I don't know... I guess 'flat' is the hip thing and everyone should run out and change to it, but I'm not sure it's an improvement. I kind of like buttons to stick out a bit.
- lewispollard 14y agoI like the flat style, but it's annoying having buttons and alerts/labels look exactly the same. You can't immediately tell what's clickable and what isn't.
- brebory 14y agoIn this situation, it's probably best to differentiate between the two with color—but you're right, it's silly to lose the already-established visual cues.
- weego 14y agoColour is a terrible visual cue because colour perception is heavily relative to the viewer. Strong visual signposting is more apt (hence why playing with underlining should not be abused).
- SkyMarshal 14y agoI like the flatness too, but still prefer roundrects. They'll never go out of style.
- wladimir 14y agoAnd the funny thing is that the people that are now loudly proclaiming everything should be flat are likely the same that were calling all old 'flat' interfaces boring in the days that gradients and shadows became hip. UI design seems more sensitive to fashion whims these days than woman's clothing.
- johnward 14y agoUX hipsters I tell ya!
- gren 14y ago"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away." Antoine de Saint-Exupery
- synor 14y agoThe devs should include a global-corner-radius setting in variables.less
- t4nkd 14y agoThat's actually a much better sounding idea than just fragmenting the source into a whole new project, that will probably eventually suffer from disregard as Bootstrap continues to flourish. In fact... https://github.com/twitter/bootstrap/wiki/Contributing-to-Bootstrap https://github.com/twitter/bootstrap/wiki/Contributing-to-Bo...
- troebr 14y agoboottheme.com does a good job. It's a 'wysiwyg' editor of the bootstrap less variables, and that includes border-radius.
- thomaspark 14y agoThere are variables for @baseBorderRadius, etc. They don't hit all of the spots yet, but it's getting there with each new version of Bootstrap.
- pxlpshr 14y agoWith all due respect, changing a few settings in 1 or 2 LESS files is now a top #2 story on HN? One of three things are happening as approach the end of the world... 1) Slow news day 2) What quantifies a hacker is being grossly influenced by what has quantified a startup the last few funding cycles. 3) Get off my lawn.
- calinet6 14y agoBut they rewrote the documentation too! And added their names. Seriously, this is a simple theme, nothing special, people have been theming bootstrap since it came out. Moving on then...
- debacle 14y agoThey clearly didn't. There's a ton of references to "Bootstrap" still in the docs. Clearly it was a half-assed copy/paste job.
- TylerE 14y agoComments like this annoy me. Open source zealots are always rambling on about how you can just "fork it and do what you want!" - and then when someone actually does, watch the pitchforks come out.
- debacle 14y agoI'm not an open source zealot. I like open source, and I promote open source, but I also prefer when people try not to ride on other people's shoulders.
- TylerE 14y agoThat's exactly my point. How is it intellectually honest to push for openness, but then to belittle people who use the rights the license gives them?
- 14y ago
- drcoopster 14y agoYou missed a spot. http://grab.by/i2DM http://grab.by/i2DM
- gprasanth 14y agoAlso, the github buttons on index page.
- beaker52 14y agoVery much in keeping with recent Google and Microsoft design direction. I quite like it.
- vital101 14y agoI find it odd that they used rounded corners in their documentation, even though not having rounded corners is one of the key features.
- neovive 14y agoA good next step for Bootstrap would be to create a centralized theme repository with the ability to select and change themes from a centrally-managed repository of approved themes. Almost like an npm for Bootstrap themes.
- tagliala 14y agoNice. I did it by myself some months ago! https://github.com/tagliala/bootstrap/commit/0b9d96517870009760063a5af1350d0e199c2020 https://github.com/tagliala/bootstrap/commit/0b9d96517870009... I removed gradients, shadows, round corners... You did a step forward: button gradients! As many of you pointed out, the problem are bootstrap's updates. Maybe a script that removes .border-radius and converts #gradient in plain color is better
- culshaw 14y agoI wrote about this and the general defacto styling of Bootstrap being used everywhere here: http://xn--d28h.tumblr.com/post/36805803730/apps-and-bootstrap http://xn--d28h.tumblr.com/post/36805803730/apps-and-bootstr...
- blauwbilgorgel 14y agoMetro UI does have gradients and drop shadows, though they are very subtle. If you are good at design, you wouldn't need to start from Bootstrap. If you are not so good at design, Bootstrap is a great framework, but using flat, all-square UI elements can cause some problems, you may be unaware of. If you use Flatstrap, your <code> tags, labels and buttons will all look the same. If, in the spirit of flatness, you'd also removed the inset shadow on form inputs, then all visual cues for either clicking (element is higher than the page) or form input (element is lower than the page) are gone. This reduces usability and discoverability. [1] Rounded boxes serve another function, where they draw the attention of the eye to the contents of the box -- It flows more pleasantly too [2] Designers going for the flat design trend, should carefully strike a balance between a completely flat design, and using subtle gradients, underlines, rounded corners, color, shadows and pseudo-3D to convey information that matches our expectations and wiring of our brains. [1] http://www.useit.com/alertbox/windows-8.html http://www.useit.com/alertbox/windows-8.html Flat styles reduce discoverability [2] http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/ http://uxmovement.com/thinking/why-rounded-corners-are-easie...
- zachinglis 14y agoThe "flat design trend" is just minimalism to be fair. Something we've had for ages. But the latest series of flat designs do often rely on rounded corners too. Glad you wrote this though as I was about to do the same :)
- chimeracoder 14y ago> If you are good at design, you wouldn't need to start from Bootstrap. If you are not so good at design, Bootstrap is a great framework, Just to nitpick, even if you're 'good' at design, Bootstrap is nice if you just don't want to spend the time for a prototype or small project, and also want to be able to drop-in different themes easily to test them out (ie, Bootswatch). > using flat, all-square UI elements can cause some problems, you may be unaware of. Remember that, in "true" Metro, all titles and elements are clickable, so the concept of affordance and discoverability is almost moot - its mere existence signals that it can be clicked on. This is a a paradigm shift from what we've been using all our lives, so naturally people will need to adjust to it a bit, but I don't think it's fundamentally different from adjusting to clicking on rounded rectangles with dark edges instead of pressing a physical button.
- armandososa 14y agoI really, really, really hate this flatshit design trend. Not so much by the way it looks –or works– but because of the sense of superiority of their proponents. I hate that it is being touted as some kind of movement that is liberating us from the evilness of skeumorphism. It's bullshit. A good designer should put the user experience above his own snobbish idealisms. Function over form.
- cloverich 14y agoI don't think its intended as outright superiority, I think its a reaction to it. CSS3 came out and suddenly everywhere everything is rounded corners, gradient colors and shadowed text. It was cool and useful in places, but with the popularization of Bootstrap the internet feels flooded with the concepts. And it did feel like it was pushed into a lot of designs where it wasn't a good fit. I suspect many people dislike those design choices and are happy to see a counter-push for 'simple' design - flat colors, no gradients, etc.
- mnicole 14y agoDon't understand the downvotes, that's exactly what's going on. I alluded to this upthread; this aesthetic is more about Microsoft attempting minimalism to look trendy than than it is about usability, which is why qualified UX folk have been blasting it.
- ryanmcdonough 14y agoDoes seem to be a rounded corner on nav nav-list bs-docs-sidenav affix-top
- ErikAugust 14y agoAll praise to the LittleSparkVT! Though I could just view stuf f in IE8 ;)
- recroad 14y agoThe question I would ask is: why? And the answer has to be more than "we got rid of the fancy stuff devs don't care about".
- webmech 14y agothis sucks!...that is all
- ChrisNorstrom 14y agoI am very very very pro rounded corners for clickable buttons. Rounded Corners is one of the main things that lets a user know a button is clickable. In fact roundedness was so important in UX that in the past before we had the border-radius: property in CSS we used an actual image made in photoshop as the button. Don't throw out the baby with the bathwater.
- mixmastamyk 14y agoI don't remember seeing a rounded button until the 2000's I think.
- ChrisNorstrom 14y agoWebsites used the native <button> and <input type="button"> so they got that native windows and mac button look. Square, beveled, 3d look, gray. Then to style them they would just use <a> links with images inside, now we're back to code with css.
- PaintWithCode 14y agoHeh, I think its funny that your "Examples" in the "Get Started" page have rounded corners in the thumbnail preview :) You guys forgot the "edit" in copy -> paste -> edit
- ryanmarsh 14y ago"We <3 Bootstrap" I didn't go to college so please help me out here. If Flatstrap < 3 Bootstrap is true then is Flatstrap > 2 Bootstrap also true?
- iamdave 14y agoGiving the benefit of the doubt that this isn't a math joke (because it did make me chuckle), <3 in this context is supposed to be a heart, thus "We <3 n" translates to "We love n"
- ZeroGravitas 14y agoIs the LESS source not available or am I just not looking in the right place?
- jdorfman 14y agoAdded: https://github.com/netdna/bootstrap-cdn/issues/70 https://github.com/netdna/bootstrap-cdn/issues/70
- kgosser 14y agoI think a worthy discussion question is: Are rounded corners a bad thing, and not a part of the "flat design" movement? My 2¢: I'm not sure they are a bad thing. I think you can still have a flat design and use rounded corners. Frankly, I dislike when buttons are flat _and_ right-angled because too much affordance is lost.