
Flatstrap - Bootstrap with no rounded corners, gradients or drop shadows - binarydreams
http://littlesparkvt.com/flatstrap/index.html
======
blauwbilgorgel
Metro 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> Flat styles reduce
discoverability

[2] [http://uxmovement.com/thinking/why-rounded-corners-are-
easie...](http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-
the-eyes/)

~~~
loudin
> If you are good at design, you wouldn't need to start from Bootstrap.

I completely disagree with this statement. Bootstrap has nothing to do with
design - it's all about structure.

The responsive grid layout is great. With some good planning, you can get
desktop and mobile optimized versions of your site with much less effort than
a custom framework. As a bonus, you also get a great deal of Javascript UI
elements for free. And the fact that all of these elements are unified and
tested across browsers is a huge time-saver, too.

If you do know what you are doing design-wise, the LESS stylesheets are well-
structured. You can do something as simple as changing the base color of your
links to diving in to completely customize the look of your app.

As for Flatstrap, it's great to see an alternative base design to the
Bootstrap framework.

~~~
blauwbilgorgel
I agree completely that Bootstrap can be a timesaver. For designers and non-
designers alike.

The point I tried to make was that, if you depend for design on Bootstrap UI,
if you need it to produce nice looking pages, then just flattening everything
may cause problems: You would have removed unified and user-tested elements of
design.

For content: a fun, distantly related, story from 1981:
[http://www.folklore.org/StoryView.py?project=Macintosh&s...](http://www.folklore.org/StoryView.py?project=Macintosh&story=Round_Rects_Are_Everywhere.txt)

------
pxlpshr
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...

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.

~~~
indiecore
Meh, like I said I was going to do this tonight myself, now I don't have to.
HN saved me some work and I think that's worth an upvote.

------
davidw
The 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.

~~~
wladimir
And 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.

~~~
mnicole
> UI design seems more sensitive to fashion whims these days than woman's
> clothing.

I'd say that this is largely in part due to the fact that so many designers
base their entire livelihoods on copying trends, instead of really
understanding why they should or shouldn't. Bad photographers are everywhere
with awkward poses and HDR, but bad designers can mask their lack of
creativity by mimicking the 'next hot thing' and get tons of kudos for it.

------
buster
Funny thing is when you click on examples the navigation menu indeed has
rounded corners which immediately stands out :P

~~~
huytoan_pc
The text on the homepage has drop shadow too...

------
laacz
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.

~~~
d0ugal
do, you, really?

~~~
laacz
Yes. 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
He was mocking your commage.

Unrelated noted: I agree, Metro is the best thing to happen to UX in a long
time.

~~~
laacz
OK. This is about commas. I'm not native english speaker.

~~~
d0ugal
Sorry, I couldn't resist :)

------
synor
The devs should include a global-corner-radius setting in variables.less

~~~
t4nkd
That'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-
Bo...](https://github.com/twitter/bootstrap/wiki/Contributing-to-Bootstrap)

------
armandososa
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.

~~~
cloverich
I 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.

------
pud
Very nice! I kept the gradients but got rid of rounded corners here
<http://fandalism.com/>

~~~
wallawe
Hey 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>

------
ChrisNorstrom
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.

~~~
mixmastamyk
I don't remember seeing a rounded button until the 2000's I think.

~~~
ChrisNorstrom
Websites 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.

------
quarterto
The Affix still has a drop shadow and rounded corners. Apart from that, looks
great!

------
neovive
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.

~~~
TylerE
<http://bootswatch.com/>

~~~
danellis
Like that, but something that actually grows over time.

~~~
iamdave
<http://builtwithbootstrap.com> ?

------
axx
I've done this myself, but nice to have a dedicated project for this! :)

------
PaintWithCode
Heh, 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

------
lukeholder
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?

------
tagliala
Nice. I did it by myself some months ago!

[https://github.com/tagliala/bootstrap/commit/0b9d96517870009...](https://github.com/tagliala/bootstrap/commit/0b9d96517870009760063a5af1350d0e199c2020)

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

------
ryanmarsh
"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
Giving 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"

------
vital101
I find it odd that they used rounded corners in their documentation, even
though not having rounded corners is one of the key features.

------
jeffehobbs
Kudos for keeping .img-rounded in there. That would be a very confusing class
name if you straightened that out.

------
kgosser
I 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.

------
culshaw
I wrote about this and the general defacto styling of Bootstrap being used
everywhere here: [http://xn--d28h.tumblr.com/post/36805803730/apps-and-
bootstr...](http://xn--d28h.tumblr.com/post/36805803730/apps-and-bootstrap)

------
WestN
Awesome, 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?

------
jdorfman
Added: <https://github.com/netdna/bootstrap-cdn/issues/70>

------
recroad
The 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".

------
elomarns
Nice!

Although I like rounded corners and gradients, it's good to provide options
for those who don't think the same.

------
beaker52
Very much in keeping with recent Google and Microsoft design direction. I
quite like it.

------
drcoopster
You missed a spot. <http://grab.by/i2DM>

~~~
gprasanth
Also, the github buttons on index page.

------
ZeroGravitas
Is the LESS source not available or am I just not looking in the right place?

------
jermaink
May it be remarked, that the text on the starting page still has shadow ;) ?

------
ErikAugust
All praise to the LittleSparkVT! Though I could just view stuf f in IE8 ;)

------
ryanmcdonough
Does seem to be a rounded corner on nav nav-list bs-docs-sidenav affix-top

------
gren
"Perfection is achieved, not when there is nothing more to add, but when there
is nothing left to take away."

Antoine de Saint-Exupery

~~~
pestaa
I'm sure we can still take away the colors and the fonts, and why do we even
render the page at all?

~~~
torus
"Everything should be made as simple as possible, but not simpler." Einstien

------
webmech
this sucks!...that is all

------
mamby
that's great

------
indiecore
I was going to do this tonight, now I don't have to. Thanks.

