Frameworks for dumbs
May 5, 2015 2:39 PM
I need a quick and dirty run down on working with frameworks in web site design (e.g., Bootstrap, Boilerplate, Bones, etc). Online text &/or video tutorials would be most welcome. I am competent in both HTML and CSS.
Even more so: I would love advice/counseling on using such frameworks. I get it that they are all about not reinventing the wheel. That said, my overall design aesthetic is simple and spare and I do not relish the thought of a lot of extraneous &/or unnecessary code.
Even more so: I would love advice/counseling on using such frameworks. I get it that they are all about not reinventing the wheel. That said, my overall design aesthetic is simple and spare and I do not relish the thought of a lot of extraneous &/or unnecessary code.
Is there a specific aspect you're hung up on? Bootstrap and Boilerplate both have documentation on their respective sites that explain what they do and how to use them, and Bones apparently has documentation via inline comments. If you don't want to use all the components, both Bootstrap and Boilerplate allow downloading of custom builds.
posted by ludwig_van at 3:15 PM on May 5, 2015
posted by ludwig_van at 3:15 PM on May 5, 2015
Also, if you are in NYC (your profile doesn't say), you can access Lynda through the library for free.
posted by dame at 3:44 PM on May 5, 2015
posted by dame at 3:44 PM on May 5, 2015
This is a pretty broad question. Are you asking about the purpose, benefits/tradeoffs, and philosophy of frameworks in general? Or are you looking for tutorials on these specific frameworks? Or what?
There are a billion front-end frameworks out there, each answering different needs, each with its own style and philosophy. There isn't much you can say that's true for all of them, except that (as you've already noted) they spare you from reinventing the wheel for every project.
posted by escape from the potato planet at 4:10 PM on May 5, 2015
There are a billion front-end frameworks out there, each answering different needs, each with its own style and philosophy. There isn't much you can say that's true for all of them, except that (as you've already noted) they spare you from reinventing the wheel for every project.
posted by escape from the potato planet at 4:10 PM on May 5, 2015
Code School has a Bootstrap course. I haven't taken this course specifically, but I've taken a number of other Code School courses, and they've been well worth the $29/month subscription fee.
posted by escape from the potato planet at 4:12 PM on May 5, 2015
posted by escape from the potato planet at 4:12 PM on May 5, 2015
My suggestion would be to pick Bootstrap; it's the most popular, it's well documented, it's well supported by other pieces of the puzzle. You'll very quickly become pretty competent in using it and I honestly don't think you'll need to pay for a course. Just use the compiled version, don't worry about SASS vs LESS etc. You can google "Bootstrap tutorial" if you want (but make sure they're talking about Bootstrap 3), but before you do that:
Look at Getting Started. (skipping all the stuff about compiling it). Pick one of the templates, copy the code, get it running.
Look at their CSS section to see how the grid system works for layout and how to do buttons and forms and tables etc.
Check out Components to see how to handle things like navigation, icons, pagination etc.
Then check out sites like expo.getbootstrap.com and builtwithbootstrap.com/ to see what other people have built using it.
Look at sites like bootsnipp.com to get examples of design patterns.
Bootstrap isn't perfect. Some people find it too crufty. Some dislike it because there's a commonality of aesthetic in sites built using it. But it's popular for a reason, not least of which is the documentation. Once you're happy with it you can pick Pure or InuitCSS or Foundation if you want to (lots won't) and get into BEM etc.
posted by Hartster at 4:17 PM on May 5, 2015
Look at Getting Started. (skipping all the stuff about compiling it). Pick one of the templates, copy the code, get it running.
Look at their CSS section to see how the grid system works for layout and how to do buttons and forms and tables etc.
Check out Components to see how to handle things like navigation, icons, pagination etc.
Then check out sites like expo.getbootstrap.com and builtwithbootstrap.com/ to see what other people have built using it.
Look at sites like bootsnipp.com to get examples of design patterns.
Bootstrap isn't perfect. Some people find it too crufty. Some dislike it because there's a commonality of aesthetic in sites built using it. But it's popular for a reason, not least of which is the documentation. Once you're happy with it you can pick Pure or InuitCSS or Foundation if you want to (lots won't) and get into BEM etc.
posted by Hartster at 4:17 PM on May 5, 2015
I resisted learning third-party frameworks for a long time, especially in web design, for similar reasons. It seems like a LOT of learning just to figure out a framework enough to get back to where you feel you are in bare HTML/CSS, and it feels like you're then adding a ton of framework code that you aren't using. But then I started to learn and use them, because I had to, and hey, some of these frameworks aren't so bad!
The biggest advantage of a front-end framework like Bootstrap, as far as I've seen, is in the Javascript. It cuts way down on the code you have to write to implement things that are now pretty standard, like tabs and fancy buttons and other state-driven elements. It also makes it easier to lay out pages without writing any custom CSS, though I'm not sure how I feel about that yet (in terms of separation of semantics and presentation).
Your best bet to learn a specific framework is to spend a weekend going through tutorials.
posted by WasabiFlux at 4:36 PM on May 5, 2015
The biggest advantage of a front-end framework like Bootstrap, as far as I've seen, is in the Javascript. It cuts way down on the code you have to write to implement things that are now pretty standard, like tabs and fancy buttons and other state-driven elements. It also makes it easier to lay out pages without writing any custom CSS, though I'm not sure how I feel about that yet (in terms of separation of semantics and presentation).
Your best bet to learn a specific framework is to spend a weekend going through tutorials.
posted by WasabiFlux at 4:36 PM on May 5, 2015
I'd suggest you learn and use SASS. It's wonderful to work with once you get the hang of it! Bootstrap can save you time, but unless you heavily customize it your site will look just like thousands of other sites out there. I also like SUSY for a SASS grid framework, it is much more flexible than Bootstrap's grid system.
I feel especially strong about this when you say you do not relish the thought of a lot of extraneous &/or unnecessary code.
posted by meta87 at 6:52 PM on May 5, 2015
I feel especially strong about this when you say you do not relish the thought of a lot of extraneous &/or unnecessary code.
posted by meta87 at 6:52 PM on May 5, 2015
Codecademy is free to sign up for and use; it looks like it's Unit 5 of the first "Make a Website" course that has Bootstrap in it. (The course is text and click-through presentation style instruction with lots of "now you do x to this piece of code in the window here"; it's a slick and easy-to-use website along the stylistic lines of Duolingo.) I remember the Bootstrap section being pretty well-laid out and practical; unfortunately, it's the last section of the course and I don't think there's any way to skip the earlier parts. I'd recommend it if you want something free and don't mind a refresher course in CSS layouts.
posted by C. K. Dexter Haven at 7:05 PM on May 5, 2015
posted by C. K. Dexter Haven at 7:05 PM on May 5, 2015
This thread is closed to new comments.
posted by AppleTurnover at 2:59 PM on May 5, 2015