TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Flatstrap - Bootstrap with no rounded corners, gradients or drop shadows

149 pointsby binarydreamsover 12 years ago

34 comments

blauwbilgorgelover 12 years ago
Metro UI does have gradients and drop shadows, though they are very subtle.<p>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.<p>If you use Flatstrap, your &#60;code&#62; 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]<p>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]<p>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.<p>[1] <a href="http://www.useit.com/alertbox/windows-8.html" rel="nofollow">http://www.useit.com/alertbox/windows-8.html</a> Flat styles reduce discoverability<p>[2] <a href="http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/" rel="nofollow">http://uxmovement.com/thinking/why-rounded-corners-are-easie...</a>
评论 #4876983 未加载
评论 #4876501 未加载
评论 #4876751 未加载
pxlpshrover 12 years ago
With 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...<p>1) Slow news day<p>2) What quantifies a hacker is being grossly influenced by what has quantified a startup the last few funding cycles.<p>3) Get off my lawn.
评论 #4876129 未加载
评论 #4876296 未加载
davidwover 12 years ago
The striped progress bar... isn't.<p>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.
评论 #4876236 未加载
评论 #4876064 未加载
评论 #4877282 未加载
busterover 12 years ago
Funny thing is when you click on examples the navigation menu indeed has rounded corners which immediately stands out :P
评论 #4876174 未加载
评论 #4876069 未加载
laaczover 12 years ago
I, 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.
评论 #4875960 未加载
synorover 12 years ago
The devs should include a global-corner-radius setting in variables.less
评论 #4876259 未加载
评论 #4876357 未加载
评论 #4876334 未加载
armandososaover 12 years ago
I 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.
评论 #4876694 未加载
评论 #4877065 未加载
pudover 12 years ago
Very nice! I kept the gradients but got rid of rounded corners here <a href="http://fandalism.com/" rel="nofollow">http://fandalism.com/</a>
评论 #4876452 未加载
评论 #4876786 未加载
ChrisNorstromover 12 years ago
I 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.
评论 #4877867 未加载
quartertoover 12 years ago
The Affix still has a drop shadow and rounded corners. Apart from that, looks great!
neoviveover 12 years ago
A 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.
评论 #4876368 未加载
axxover 12 years ago
I've done this myself, but nice to have a dedicated project for this! :)
PaintWithCodeover 12 years ago
Heh, I think its funny that your "Examples" in the "Get Started" page have rounded corners in the thumbnail preview :)<p>You guys forgot the "edit" in copy -&#62; paste -&#62; edit
lukeholderover 12 years ago
Awesome. 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?
taglialaover 12 years ago
Nice. I did it by myself some months ago!<p><a href="https://github.com/tagliala/bootstrap/commit/0b9d96517870009760063a5af1350d0e199c2020" rel="nofollow">https://github.com/tagliala/bootstrap/commit/0b9d96517870009...</a><p>I removed gradients, shadows, round corners...<p>You did a step forward: button gradients!<p>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
ryanmarshover 12 years ago
"We &#60;3 Bootstrap"<p>I didn't go to college so please help me out here. If Flatstrap &#60; 3 Bootstrap is true then is Flatstrap &#62; 2 Bootstrap also true?
评论 #4877558 未加载
vital101over 12 years ago
I find it odd that they used rounded corners in their documentation, even though not having rounded corners is one of the key features.
jeffehobbsover 12 years ago
Kudos for keeping .img-rounded in there. That would be a very confusing class name if you straightened that out.
kgosserover 12 years ago
I think a worthy discussion question is:<p>Are rounded corners a bad thing, and not a part of the "flat design" movement?<p>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.
culshawover 12 years ago
I wrote about this and the general defacto styling of Bootstrap being used everywhere here: <a href="http://xn--d28h.tumblr.com/post/36805803730/apps-and-bootstrap" rel="nofollow">http://xn--d28h.tumblr.com/post/36805803730/apps-and-bootstr...</a>
WestNover 12 years ago
Awesome, easier to trick around and make metro UI like web design.<p>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?
jdorfmanover 12 years ago
Added: <a href="https://github.com/netdna/bootstrap-cdn/issues/70" rel="nofollow">https://github.com/netdna/bootstrap-cdn/issues/70</a>
recroadover 12 years ago
The question I would ask is: why?<p>And the answer has to be more than "we got rid of the fancy stuff devs don't care about".
elomarnsover 12 years ago
Nice!<p>Although I like rounded corners and gradients, it's good to provide options for those who don't think the same.
beaker52over 12 years ago
Very much in keeping with recent Google and Microsoft design direction. I quite like it.
drcoopsterover 12 years ago
You missed a spot. <a href="http://grab.by/i2DM" rel="nofollow">http://grab.by/i2DM</a>
评论 #4876933 未加载
ZeroGravitasover 12 years ago
Is the LESS source not available or am I just not looking in the right place?
jermainkover 12 years ago
May it be remarked, that the text on the starting page still has shadow ;) ?
ErikAugustover 12 years ago
All praise to the LittleSparkVT! Though I could just view stuf f in IE8 ;)
ryanmcdonoughover 12 years ago
Does seem to be a rounded corner on nav nav-list bs-docs-sidenav affix-top
grenover 12 years ago
"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."<p>Antoine de Saint-Exupery
评论 #4876071 未加载
webmechover 12 years ago
this sucks!...that is all
mambyover 12 years ago
that's great
indiecoreover 12 years ago
I was going to do this tonight, now I don't have to. Thanks.