Framework Options

So Iv been researching currently available frameworks and I have to say Im pretty impressed. What Im here to ask is which one I should dive into and learn/use. I was first looking at Bootstrap but I have a lot of concerns with its popularity and how peoples sites, or mine more importantly, will look the same as a lot of others, although they show plenty of examples of very unique sites. Skeleton also seems enticing as its just a fluid grid and not much else. Then theres Pure, Ink, and Foundation.

Heres what Im looking to do: Im making a website for my graphic design and art portfolio to help me look more impressive to attain a graphic design job. So I dont need a CMS or anything backend related. What these frameworks seem to offer that is most important to me is a grid that I dont have to build myself where images and content scale nicely on various desktop, tablet, and mobile device sizes. As far as javascript, I just want a few things like smooth scrolling to different parts of the page. I like the idea of having everything on only a couple of pages with links that then scroll the page to the appropriate sections. I dont need extensive forms, other than maybe a contact form, dont need logins or any of that.

What would your suggestions be for something that will give me a fluid design but will give me the best bet on making something unique? And can someone give me, in some words, what the major drawbacks or advantages to these various frameworks are?

Personally I can attest that Foundation is great and seems to fufill all of your requirements.

If your job doesn’t involve any coding, then sure use a framework like Foundation. If your job requires some HTML/CSS, I strongly would advise against using it on your portfolio site. Doesn’t sound like this is the case but something I want to bring up.

Frameworks…are…inflexible. You can certainly create great designs in frameworks though. There’s a lot more benefits and bad things about frameworks than I’m going to go into here.

If you give me your ideal design for the portfolio site, I can tell you if frmaeworks would easily be able to get it done (e.g. you don’t have anything super unique.)

You shouldn’t use default styles when using a framework, it needs to be customized with your own properties and settings. Most of them come in LESS or SASS versions, which allow you to do this relatively easily.

This will allow you to make your site look unique and the way you want it. Use the pieces you want, forget about the rest. Doing it this way, gives you quite a bit of freedom and makes them very flexible.

Semantic UI

It’s basically a bunch of pieces you put together to make something, rather than a whole bunch of prebuilt things you can use (like in Bootstrap and Foundation). Each one is very configurable and customizable. Pick and choose what you want to use. I just started using this one recently and pretty much instantly fell in love.

If you want to just use a Grid system, then check out Susy.

But the other ones work just as well, any of them are going to take a little time to make it your’s.

Thanks for the advice so far. I don’t really know what you mean by “if your site needs coding”, I mean how would you build a site without writing html/css? isn’t that the only way to use frameworks? You’re still coding but using compiled lines of css ready to go in classes right?

Yup. Well, premade, not compiled. Not to be too focused on the minor details…

Who are you talking to? Noone has said that. I said “job” which is completely different (and should be easy to understand what I meant.)

As far as a grid is concerned I recommend Susy as well. Couple it with Breakpoint and have one lean. mean responsive grid machine that isn’t dependent on a bunch of classes everywhere.

Sorry, I just figured you meant job as in what my site is looking to do. I’m just trying to be specific only because I don’t want to ask a million questions, I appreciate the advice. So far doing the research, while Foundation seems feature rich, it might be a bit too much of what I don’t need. Susy seems interesting but unfortunately Sass is something I am not at all familiar with at the moment, still learning js

If you give us your mockup we can suggest the best framework that you might be interested in.

SASS and LESS are CSS preprocessors. You’re probably not going to find a good Framework that doesn’t use one. PureCSS is about as good as you’re going to get in that area. Bootstrap for instance was built in LESS but also has a SASS version.

If you know CSS, it’s not that hard to learn SASS/LESS.

You can download most frameworks in CSS only, but you’re removing just about every bit of customization and configuration if you do it that way.

SASS isn’t a requirement for frameworks. I’d have to look at others, but SASS is purely optional in Foundation at least. I’d imagine it’s similar with others.

I find it hard to believe that bootstrap doesn’t have a vanilla CSS version. Unless I misunderstood you, in which case I apologize.

That’s not what I said.

Ah ok, I missed that part.

1 Like

Well my situation is as follows: I have a BS in Environmental Science but the market is really bad for recent grafuates, so I currently work as a waiter and my time is limited. For that reason I have to really organize my learning time. So right now I don’t have anything written or marked up, I’m spending more time working out my logos and graphics for the portfolio. I’m here because I want to organize and have a plan for executing my website so that once my graphics are finished I don’t waste time learning a framework or languages that would end up being unuseful or cause problems later. I also don’t know js, so that’s also in my way and I’d really like some simple behaviors that I have in mind like smooth animated scrolling as I mentioned and maybe other things that I havnt cone accross yet. I also had in mind that the home page would be one large graphic underneath an understated group of maybe 5 or so nav buttons that would scroll you to various portions of the single page content. I would just need everything to scale down nicely as you made the viewport smaller and smaller

You need to do the CSS and stuff yourself then.

jQuery-UI should be all you need.

Ok cool, so what does jquery ui do that jquery doesnt?

It’s like a lightweight and easy to use framework that’s adds stuff with JS. You can check out some of the demos on the left. Stuff like Dialogs/Modals, Autocomplete, etc. There are a few preset styles you can use or you can roll your own. (that’s also a good link to see the things it adds)

Where as jQuery is just a comprehensive library for working with JS. You need jQuery to use jQuery-UI.

Even with the other frameworks, you can usually find use for something in jQuery-UI.

There are two ways of choosing frameworks.

A) Show me the money
This is simple… you browse the most popular IT skill jobs in monster.com or indeed.com or etc… Then choose the top 20 frameworks and you choose which one to learn.

B) Fast development
Basically, you browse the popular frameworks that meets your need the most. Some framework may not be as popular as others but it may fit better for your project.

Of course there are other ways but I find those through conference tech videos.

A more detailed discussion - http://www.sitepoint.com/front-end-frameworks-custom-vs-ready-use-solutions/

Okay, thanks everyone here for all your help. Iv chosen skeleton for now for my personal site, it seems to be exactly what I need: Skeleton

My problem is its loading REALLY slow, and I tried it on 2 machines. The only thing they give you is a normalize.css, skeleton.css, an images folder only holding the favicon, and a very basic index.html. Can someone help me figure out why?

Its a super light download and the css files and html file are supposed to be, and seem to be, super light. But as I mess with styling a page and refreshing the browser it takes FOREVER

Also RyanReese, just noticed the billy cundiff css pun, huge Ravens fan, I laughed quite hard haha

1 Like

Continued