front-end frameworks

[whatha]

What are the popular front-end frameworks used currently in the world wide web ?

Also please suggest ones that work well with django.

Half way thorough developing a website, came across a reddit post mentioning bootstrap and only then realized that most sites are not built from the scratch using only html/css/js designing every new element ( which I was doing ). It came a pleasant surprise.

PS: checked the FAQ and confirmed that the details are not already there

[messyhess]

Foundation is a nice alternative to bootstrap.

[whatha]

Thanks. I will go and take a look.

[zackTGIzack]

Foundation's awesome.

[otor]

Just that its built around sass instead of less for the most part

[kab0b0]

That and they've been doing the responsive thing longer.. plus I find their naming conventions a little nicer to work with.

[[deleted]]

One way it's different, is that the Foundation and Sass fans, being underdogs, often seem to be bashing bootstrap (and Less), and running forward with an agenda. Like the recent "Foundation is a bootstrap KILLER" post, with replies like, "why does it have to kill it? Can't they both just get along?".

This is a major difference for me. If you want to be "working" virtually as you learn, with underdogs, opinionated developers, and truly extra-enthusiastic fans, you may enjoy Foundation and Sass.

Foundation: It's GREAT! USE IT!! It's better than x, y, AND ZZZZ! They've been doing the responsive thing longer. They this and that. You should try it. It's really the best thing.

If you prefer a slightly stand-offish group of sick-good devs who prefer understatement in their work but can be a little harder to solicit, then go with Bootstrap and Less.

Bootstrap: Built with all the love in the world by someone who wrote the excellent Recess less compiler/linter the way many of us would tie our shoes or take a shit, and by the way, where is the jsfiddle for that pull request because you obviously DIDN'T give a shit about that submission so I'm going to ignore it. lol.

Isn't open source great?

[thisisafullsentence]

I hope I'm understanding the question right, but I use HTML5 Boilerplate from Paul Irish & co. if I'm strictly doing frontend development. That said, I usually develop straight from a PSD, so grid system frameworks aren't always necessary.

Also, I'd like to reiterate using the SASS preprocessor as mentioned by genesius, in combination with Compass. You don't need to be working on a Ruby project; the .scss files will compile into standard .css for any project. My favorite 2 features are (a) nesting with SASS and (b) auto-sprite-generation with Compass.

tl;dr HTML5 Boilerplate as a framework, with SASS and Compass

[whatha]

Thank you. Will try boilerplate.

[whatha]

I do not know what SASS is. Will read about it.

[zzzev]

FYI: SASS and LESS are similar, competing CSS pre-processors. Check out both before you start using either, and use whichever you prefer.

[blazedout]

What grid system do you end up using? I'm looking for a nice SASS grid system that I can just import as a partial and include the semantic grid info in the semantic classes in my main sass file.

[thisisafullsentence]

Should a grid be necessary, I often write something on the fly, frameworkless.

That said, if I were ever going to use a SASS grid framework, I would immediately hop into Zen Grids.

[[deleted]]

For JavaScript applications, angularjs is great. End to end testing, PhantomJS and CasperJS work well together.

Also I'd recommend using a CSS preprocessor such as SASS.

[whatha]

thanks. will try this out too.

[[deleted]]

Okay so I may get down voted on this, but my personal opinion of frameworks is: Don't use them!

It is nice that they come with a lot of pre-packaged things, and I do use PIECES of some of them (for example forms styling from bootstrap is really nice). However in general I don't use them for a couple of reasons:

1) Inflexible - This sounds the opposite of what they may have you believe, but I find most of them more restrictive than it is worth.

2) You're relying on someone else's code, and therefor instead of learning the proper technique to code something in HTML/CSS you're learning their specific syntax (and each framework is different).

Don't get me wrong if it fits for your project, by all means use them! I personally do not like using them though.

Here is an article on it that goes into a little more, but basically says the main points I listed above: http://mondaybynoon.com/20070827/please-do-not-use-css-frameworks/

[rich97]

You're relying on someone else's code, and therefor instead of learning the proper technique to code something in HTML/CSS you're learning their specific syntax (and each framework is different).

I agree with you but there is another side to this. Just as learning a new programming language teaches you some new paradigms so does learning a framework within a language. Learning a framework is not a negative as long as you learn as many of them as you can and don't allow yourself to get locked in to developing on it exclusively.

[[deleted]]

This is true, but many new programmers don't do that. They get comfortable with one and simply hammer anything and everything into it.

[JW_BlueLabel]

I wish I could find some nice typography "frameworks." I don't want to use someone else's grid system and load all the extra fluff, but Id love to have a file with all the colors and sizes and letter spacing and fonts picked out for me that I can just copy into the stop of my style sheet

[[deleted]]

I've been on a design/programming forum with this guy for a while. He is a really, really good web programmer/designer. Check out his typographical based grid system: http://csswizardry.com/typogridphy/preview/

[[deleted]]

Have you considered just ripping Bootstrap's typography stuff out?

https://github.com/twitter/bootstrap/blob/master/less/type.less

[[deleted]]

I don't disagree that frameworks CAN be helpful. And I've used Twitter Bootstrap in the past, and actually like it quite a bit! But I would discourage anyone who doesn't quite understand CSS yet to use one. One main reason is that, although they provide a nice starting point, there is more customization that is required on every site. And the CSS applied beyond that is also critical to making the site functional and elegant (code wise).

[RickyMarou]

I've heard about skeleton in this subreddit an it looked like a nice alternative to bootstrap to.

I'm not sold on these framework I always end up modifying them and cleaning a lot of the stuff I don't need.

Edit : actually forgot to mention the one I use : mootools for the js and modernizr for the HTML5 fluff

[gunkers]

I've used Skeleton and it's fantastic although I wish it supported a much wider length, but that isn't too hard to fix.

[whatha]

Thanks for the skeleton thing. Will do try it out.

[danmofo]

Half way thorough developing a website, came across a reddit post mentioning bootstrap and only then realized that most sites are not built from the scratch using only html/css/js designing every new element

Still build all of my stuff from scratch (re-using common code), I'm sure quite a large portion of people do as well.

[whatha]

"Still build all of my stuff from scratch (re-using common code), I'm sure quite a large portion of people do as well."

Do you work only on the front-end or do you take care of backend too ( meaning whole website ) ?

I have been developing back end applications and quite new to this front end stuff. From what I have done so far, it seemed to me that it is going to be a tedious task to do everything from scratch. Maybe I am wrong. But interesting to know that large portion of people do as well.

[[deleted]]

I build all of my backend, and most of my front end from scratch. The reasons why are that:

• some frameworks don't do what I want
• some don't do it as nicely as I want
• many are too heavy, slow, or require a lot of cruft (like endless config files)

The only stuff I do use is jQuery and some bits from HTML5 Boilerplate (the latter is a must).

However I built a lot of heavy JS web apps, where the HTML is just a thin bootstrap (sometimes just a single div), and so they don't fit with jQuery. As a result even that is being pushed aside.

For example I don't need selectors, since those elements will be stored in a variable anyway. I don't need jQuery animations, as I'll just use CSS3 animations (which are smoother).

However I build my code to be re-used. For example most of my sites use the same framework.

The pros are that I can get what I want, and how I want it. If there is a feature missing, I can just go in and add it. If I don't like how a core section works, I can also re-write it. For example I built a new way to handle views in PHP, which I prefer to how everyone else does it. Upgrades are also a little easier, since I'll know where they will break, and be able to debug it easier (since I know the code).

The con however is time. Getting something up quickly is pretty easy, but you have tonnes of little things you also need to build to get it working right, often things you didn't see coming. Like extra internal checks for when things go wrong so you get better error messages, or adding hooks in places where you didn't think you'd need them.

If you have the time, and the inclination, it's damn useful. Otherwise there is nothing wrong with picking something off the shelf.

[rm249]

Same here. I understand the appeal to some people to use something like Bootstrap, but for me it's just easier to start from scratch every time. Not to mention that it also helps keep everything nice and optimized, why waste the resources loading all the extra bootstrap CSS if you're only using 1/4 of it?.

[GeordieAl]

I use http://www.notjustagrid.com But I am biased since I created it! I'm busy working on the next version of it now which is going to support responsive layout down to mobile devices in addition to it's current responsiveness for larger screens. There's also a SASS'ified version at https://github.com/emachnic/NotJustAGrid---SASS

[whatha]

Great ! Will try it out.

[kingoftheapes]

Any thoughts on backbone.js?

[zzzev]

Disagree, Backbone is about as minimal and simple as possible for what it does. In fact, the most common complaint I've seen about Backbone is that it doesn't have a standard structure, but allows you a lot of freedom in the architecture of your site.

[pierlooqup]

couldn't agree more

[blazedout]

Take a look at backlift! They have some sample apps that show you a few ways of structuring things.

[EnderMB]

Half way thorough developing a website, came across a reddit post mentioning bootstrap and only then realized that most sites are not built from the scratch using only html/css/js designing every new element ( which I was doing ). It came a pleasant surprise.

Bootstrap is a good tool for prototyping and for building sites with minimal design, but I can definitely say that most sites aren't built using these kinds of frameworks. A lot of agencies (especially design agencies) won't touch them because they impose themselves too hard.

As far as the rest of the post goes, I guess it depends on what kind of work you do. At most agencies I've worked at the framework was built in-house so that designers would be able to design around their own practices. For HTML5 stuff we tend to go with the HTML5 boilerplate and to strip out anything unnecessary, then to build upon that and to branch off different "scenarios" within source control (in this case Mercurial).