Question

I just came across Gumby Framework and I've downloaded the zip file from their website. When I looked up some 'tutorials' online, I've found that they were talking about tools like Bower, etc. I couldn't really understand all that so I kept it aside for the time being.

I went thru the zip folder. I've found various css, img, js, etc folders. I found a few webpages which listed the UI components, etc. Now what I did is, I made a webpage of my own and I used its navigation bar, div elements, etc. I edit the CSS file in between to suit my paragraphs, etc.

But when I look for some help on Gumby Framwork, I almost always find a mention of this Bower tool.

Is there something I'm doing wrong? Should I continue using Gumby the like how I'm doing now or should I actually look into this tool?

Was it helpful?

Solution

I did a bunch of these tutorials: http://webdesign.tutsplus.com/series/getting-to-know-gumby--webdesign-16738

You don't have to use Bower if you don't want to. Whatever Works™

But it might help if you understood a bit more what Bower is and what it's doing exactly.

From the first sentence on their website, Bower is just a package manager for the web. If you've used npm install for Node, sudo apt-get install, Ruby Gems, etc. then you should be familiar with the general premise of package managers.

Bower links to repos that have a bower.json file in them and that have been published to Bower. Here's a search tool for them: http://bower.io/search/

Basically, when you do bower install foo it will find the foo package and clone the repo to a folder in your project called bower_components.

Why would we want to do this? Free updates! Easy versioning!

Say you want jQuery. You could go to jquery.com, click on the download link, right click the file, save as, go to your index.html file, add the script tag for it; or just link to a CDN (this is actually kinda preferable but let's pretend it's a bad idea this time, let's pretend we have a boss that really wants a local copy).

Okay... we can do it that way... or we cd ~/path/to/project then bower install jquery

Test it out with this code. Notice the bower_components/package_name/exact_file path that you should be using.

<html>
    <head>
        <title>foo</title>
    </head>
    <body>

        <button>Click me</button>

        <script src="bower_components/jquery/jquery.min.js"></script>
        <script>
            $(function() {
                $('button').click(function() {
                    alert('It works!');
                });
            });
        </script>
    </body>
</html>

Now check it out. Your boss just came in and wants you to switch to an old version of jQuery instead so you can support IE or something. Type bower info jquery to see what versions are available. Cool. 1.10.0 is what we want. Now type bower install jquery#1.10.0. Bam, you're using the right version.

The downside to using Bower is that it pulls in a lottttt of stuff you might not need/want. For instance, we're just using one file for the jQuery import, but now we have something like 10 extra files just sitting around.

The upsides are great though. It only takes a minute to learn how to use and then you'll be versioning/updating like a pro.

So, to answer your question, you can either keep using a web gui to download .zips and all that crap. Or you can up your game drastically in 10 minutes. I suggest the latter. =)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top