Show HN: Furatto, a flat and sleek CSS framework(icalialabs.github.io)

30 pointsby kurenn88vor 13 Jahren48 comments

icalialabs.github.io

Show HN: Furatto, a flat and sleek CSS framework

http://icalialabs.github.io/furatto/

48 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)

kurenn88vor 13 Jahren

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?

hobonumber1vor 13 Jahren

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 { ... }"

icsvor 13 Jahren

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.

celwellvor 13 Jahren

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

crazygringovor 13 Jahren

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

kurenn88vor 13 Jahren

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!

jasonlotitovor 13 Jahren

> but it have some other features bootstrap does not

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

kurenn88vor 13 Jahren

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?

jasonlotitovor 13 Jahren

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

rozapvor 13 Jahren

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.

tlrobinsonvor 13 Jahren

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

kurenn88vor 13 Jahren

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

javiayalavor 13 Jahren

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.

kurenn88vor 13 Jahren

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

sidengo-jorgevor 13 Jahren

Great job, buddy!

dubcanadavor 13 Jahren

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)

jibberiavor 13 Jahren

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!

bushidovor 13 Jahren

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.

kurenn88vor 13 Jahren

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! :)

Taigvor 13 Jahren

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

kurenn88vor 13 Jahren

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!

storm_kidvor 13 Jahren

Furatto=Flat in Japanesse, awesome & clean.

Ra1d3nvor 13 Jahren

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

kurenn88vor 13 Jahren

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

kurenn88vor 13 Jahren

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!

javiayalavor 13 Jahren

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

wmeredithvor 13 Jahren

What is a "flat font"?

abailinvor 13 Jahren

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.

kurenn88vor 13 Jahren

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

LX-350vor 13 Jahren

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.

kurenn88vor 13 Jahren

You should be fine yeah!

LX-350vor 13 Jahren

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

minikomivor 13 Jahren

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

kurenn88vor 13 Jahren

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

tomwilsonvor 13 Jahren

Same problem on my iPad.

kurenn88vor 13 Jahren

Got it! :)

kstakenvor 13 Jahren

What makes this different/better than something like flatstrap?

kurenn88vor 13 Jahren

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

GreyTheoryvor 13 Jahren

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

tmztvor 13 Jahren

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

kurenn88vor 13 Jahren

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

MWilvor 13 Jahren

the font looks way too thin to me

javiayalavor 13 Jahren

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.

brianfryervor 13 Jahren

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.

kurenn88vor 13 Jahren

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

mpynevor 13 Jahren

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

joyeuse6701vor 13 Jahren

lol furatto, how japanese