Show HN: Furatto, a flat and sleek CSS framework | Hacker News Reader

Show HN: Furatto, a flat and sleek CSS framework

icalialabs.github.io

30 pointskurenn8848 comments

It's 245kb and over 9000lines of CSS :-/ Is there a reason why it's double the size of other CSS Frameworks?

Edit: Full disclosure - I develop Pure (purecss.io)

I was just about to link to Pure since it looks almost identical on the surface (and I just tried it out this morning for a prototype). For those wondering, Pure comes in at ~4kb.

ooo... pretty; thanks for developing Pure; looks useful.

Hi hobonumber,

First of all I woukd like to say that your framework is one of the ones I like the most when developing mine...

I know it's a big file but it is because it has a lot of comments, I have to work on the sass version to change the comments style...the minified version is close to 133 kb or so...but I definitely have to reduce it and make it lighter...

Any piece of advice?

Hey Kurenn, I would pay close attention to every CSS rule and really think about if it's needed or not. Also, try to follow some CSS principle such as OOCSS or SMACSS so that you reduce selector bloat.

ie: ".tabbar-inner { ... }" is better than ".tabbar .inner { ... }"

Maybe explain why it's a better choice than Bootstrap? It's certainly visually different, but still awfully similar to most end users.

You got that right....it uses the same format for naming the classes but it have some other features bootstrap does not.. I just think to choose a framework you have to see if the class names make sense...how easy is to adapt and change...to fill your needs...just my humble opinion...

I'll continue working to give a better api and built more useful addons

Cheers!

> but it have some other features bootstrap does not

But what's the differences beyond visual changes (which, frankly, aren't important).

I think the visual elements do make a difference but taking that out...it has probably not much differences with bootstrap...I'll be working to make it more semantic, lightweight...and that should give a better development experience...

You have any suggestions?

They don't make a difference. With bootstrap, it's trivial to change the design.

Honestly I think the biggest problem with Bootstrap is that everyone uses Bootstrap (because it's so nicely done) and therefore your site looks like the other million sites on the web that use it.

So why not standardize on the Bootstrap conventions and release it as a Bootstrap compatible theme?

EDIT: apparently it does https://news.ycombinator.com/item?id=6036247

I need some feedback on this framework guys!, hope you find it useful!

I don't know if it's part of your philosophy but I think that adding more javascript tricks and libraries could add some value to your framework. Good job though.

Yeah I'll probably add some, if you have some suggestions, you are more than welcome!

Great job, buddy!

It looks pretty nice, and has some nice JS but... On Chrome (latest) Windows, I have double scrollbars.

And if I may nitpick a few things...

1. The pagination #'s are offcenter. 2. The titles (Navbar, Pagination, etc are almost invisible on my screen)

Ditto on Chrome (29 dev) on OS X 10.6.8 -- double scrollbars.

Yay, yet another fixed-black-top-nav CSS framework! With major bugs!

Did a quick browse through the code. A couple of things jumped out:

1. A number of CSS classes have 'furatto' as a prefix ex. '.furrato-block'. This seems a bit counter-productive as the word itself does not add any value to meaning of the class names.

2. I notice that for the responsive design the class is '.row-fluid', but since responsive is now a norm it may make sense to have '.row' be fluid/default and have a '.row-fixed' class for the few that may want a fixed only.

3. I like the font, it works well, but for the navbar links its a little tough to read. Also the '.motto' class is almost impossible to read, though changing the font color for the class should suffice.

4. I really like the circular images and the inclusion of date picker and toolbars js.

I will definitely try it out and watch it on github.

p.s. you may want to look into the double right scrollbar that is on the github.io pages.

Hey thanks a lot for the feedback!!...it's really great!...I totally agree with on the row-fluid class name I'll updated that. I want to make a more semantic class names to give more meaning to the markup.... I'll consider the font on the navbar...probably just reduce the font weight would do the trick....

Thanks again for the feedback. I'll be working on it! :)

There are a few issues that made me close the web site after a few seconds. I'm usually very excited about frontend frameworks and add them right to my bookmarks; not in this case though.

- The Furatto title on the start page is way too close to the top navigation. - That thin font in the navigation & title renders pretty ugly on my MBA/Chrome. - When I clicked the first navigation button seeing the text move down vertically because of the top border I closed the tab.

I'm sorry I can only give negative feedback but it may be useful in some way..

Yeah it is really helpful!...sorry to hear it does not fill your eye...but I'll be working on it to improve it!

Thanks!

Furatto=Flat in Japanesse, awesome & clean.

The toolbars popup has a fixed position, so if you open a "toolbar" and then scroll with it still open it just hovers in the middle of the screen like this: http://i.imgur.com/vdoHhMr.png

Good observation, I did not notice that. I'll create the issue at github, thanks a lot I really appreciate it!.

Hey guys I just released the rails gem for those ruby devs https://github.com/IcaliaLabs/furatto-rails try it out!...I need to add some more doc! enjoy!

I love the flat font. I think I could use this framework for a couple of my prototypes.

What is a "flat font"?

One thing that will prevent people from switching to this (from Bootstrap, or similar) is the lack of navbar search form. Besides that, very beautiful. The tag edit is a nice addition to most front-end frameworks.

I'll be adding this kind of features in the near future....I'll keep you posted!

I noticed that Furatto uses Normalize, can I use this framework with the legacy version of Normalize? I am stuck working on intranet apps and need to support IE 7/8.

You should be fine yeah!

Awesome!:) I'll definitely play around with furrato and keep an eye on its progress.

I'm seeing some strange scrolling on iPhone 4S. There's no momentum - it just instantly stops

I'll create the issue on github...yeah some else just notice a double scrollbar....it is probably related!.....thanks for the feedback!

Same problem on my iPad.

Got it! :)

What makes this different/better than something like flatstrap?

It is just another option for a framework...it included some cool features that flatstrap does not probably the checkbox and radios buttons are the best example...

Also it was a challenge I put on myself and built better css

If you look at the git commit history, you'll actually see it is a modified version of flatstrap.

The controls on the first form on the Forms tab are not styled.

Yeah I just wanted to point out the native elements when you just want to use the default ones. But it is probably not clear enough...

the font looks way too thin to me

The one from the headers right?....yeah it seems the same to me, but I wanted to some else tell me!...thanks!

Yeah, I could barely see the diagonals on the 'w's in the headers.

I think is good enough. There are a lot of framework with fat fonts. It's kind of refreshing to see something else once in a while.

I'm with you on this -- the headings render pretty thin on my tablet: http://imgur.com/FUtdjmD

Despite this, I'm totally in love with the framework -- it feels like all the good things of Bootstrap and Foundation all in one. Definitely keeping an eye on this.

lol furatto, how japanese

Reply on news.ycombinator.com