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?
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. =)
Related
Though I hate it, I chugged down most of the theory of modern web design.
Let's pretend I am doing a full stack website with no heavy machinery in the background (node, server side stuff etc) just old plain html/css/js.
Now I did a npm init in the folder where I'm developing the website.
I put in bootstrap along with jquery, popper and all its dependencies.
Now I want to include bootstrap in the page.
How?
Though I never saw browserify and webpack before, I've read they are useful for js only so you can "require('module')" in your javascript code but no use for css in the frontend (html files).
For those, I saw people suggesting to point to a folder and prepare grunt (javascript task runner) scripts to copy css in folders where you point at.
There is any way?
My conclusion is:
NPM/browserify/webpack = Useless rube goldberg machine until you start developing javascript/node in the background
Solution: Old CDN/Download local copy and link it in the code
What am I missing?
Is there a possibly way to install sass singularity in VS Community 2015?
I had the same problems and had to do some digging around to find the solution. So I'll explain my steps (This may not be the correct or best way, but it works, I have been using it and adding to it without problems so far over the last week or so).
As a quick aside, visual studio (at least from 2013 onward and certainty 2015, cause that's what I use) does support bower, grunt and gulp as far as I know. I just don't know how to use these systems. So there may be a faster, more robust, and better way to do this.
To save you time later, you will need to follow the steps below to download the Breakpoint library because it seems the singularity library has a dependency on it. But it's the same steps.
Go to the GitHub repo and download the repository as a zip file and extract it.
In the case of breakpoint go into the stylesheets extracted folder and copy and paste them into a folder you created inside your project.
While doing this create another folder and do the same thing with Singularitygs (it has the same stylesheets folder).
In your visual studio project click show all files and include both these new folders - this will have the effect of including all the files within them.
Goto extension manager and download the free Web Compiler (part of the web essentials toolkit). This gives VS the ability to do all kinds of cool stuff with cool files such as automating the process (without any extra setup) of transforming your SCSS files to CSS. You may need to restart VS after installing it.
Finally - create your own .scss file, and at the top add these includes:
#import '../_breakpoint.scss';
#import '../_singularitygs.scss';
You'll need to use VS intellisense help to ensure you are pointing to the correct folder locations for your setup.
Once they are included you can work away like normal on your .scss using all the new library functionality.
This seems to be the process for installing any .scss / less library in visual studio. But I'm surprised I did not see any info around about how to do it. I had to spend a while digging through the code of all 3, especially web essentials, to figure it out - only to find out that I did not need to even look at the code at all. :)
Hope this helps.
When using Bower Components, I tend to link directly to the files located in the bower_components directory. For example when I work with Foundation, here is how I link my JavaScript file:
<script type='text/javascript' src='../bower_components/foundation/js/foundation.min.js'></script>
However, I've noticed a lot of people copy the Bower components to a library directory (using Gulp or Grunt) and then use the components from there. Is there a benefit to doing things that way?
I believe developers choose to pipe their components through gulp or grunt to control the dependencies through source control and to have a safer way of using their dependencies in case one just stops working. This article might be able to help you understand.
So... In my school the computers are locked (I can't install software) Is there some way to run stylus (compile my stylus stuff) without installing node previously? Or some portable version of node that let me run stylus like it would in a normal machine? Thanks :)
You can use codepen to compile stylus. If you've got an account just click the settings 'cog' on the CSS tab and choose 'stylus' as your preprocessor. After you put in your code you can click the 'eye' icon to view the compiled output. Run totally in the browser so installation shouldn't be an issue.
You can use http://learnboost.github.io/stylus/try.html without registration and any fee. This site is official, that's why you can use the latest Stylus features there.
This is a noob question.
I would like to use grunt.js as a build tool for my web project. Can use grunt.js to validate my HTML/CSS files? Do you have an example of such a grunt.js file?
There is another plugin that seems to be updated more often and does not require java. grunt-html-validation. It has a number of options and has been working great for me. You can install and use it like this:
npm install grunt-html-validation --save-dev
Then put something like this in the initconfig of your Gruntfile.js
and this in appropriate places in your Gruntfile.js
grunt.loadNpmTasks('grunt-html-validation');
grunt.registerTask("default", ["validation"]);
There is also a number of useful options including the ability to relax errors based on a regular expression (could be useful for AngularJS for example) and the ability to save a report.
You can use the grunt plugin grunt-html. Beware, you will need Java on your computer to use it. It works well for me.
As of now there seem to be two popular HTML validation plugins:
grunt-html-validation
grunt-html
grunt-html-validation uses the W3C Markup Validation Service and grunt-html uses a local copy of the java-based The Nu HTML Checker.
They both work well and have very similar options so it comes down to whether you want to wait for an external service call or wait for a local java app.