In this post, we are going to explore open source fonts and CSS pre-processing. I am going to give you an easy way to add web fonts to any website in just a few lines of code. What are Google Fonts? ... Google Fonts makes it quick and easy for everyone to use web fonts. Google Fonts is a collection of open source fonts that are hosted on Google's servers and with their API, it is easy for anyone to integrate their fonts into any web project. Best of all, it's free. (To learn more and explore the hundreds of fonts available,...
One of the things we struggle everyday as programmers is productivity; we want to do things better and at the same time faster, everyday. This is something we can’t control, we now have more to do: more scripts to download, to install, and even more frameworks to work with. In every project we end up downloading at least one jQuery plugin and even jQuery itself; every time this happens we need to go the plugin’s website, download it, or link to it. Even though we’re used to this, and it doesn’t even...
Color pickers are everywhere on the Web today, we see them in a lot in forms and in customization tools. Even though it’s possible to create this with HTML, JavaScript is a better solution because it provides greater support. Today, we’ll use picker.js to create a simple color picker that you can use in your applications. The first step towards creating this simple interface is to have our HTML ready, in this case I simply created a button and a span in which we will present the color to the user: <button...
Google Chrome is the most widely used browser, and for good reason: it’s fast, reliable, has a great set of developer tools and to top it all off, it has literally hundreds of extensions in the Google Store you can take advantage of. The other amazing thing is that you can build your own extensions using just HTML, CSS and JavaScript, so it’s not like you need to even learn any new languages. You already know this, you only need to figure out how to apply it to Chrome. There are times you need something specific...
Right now web applications are stronger than ever and even though some of them are simple to understand others are really complex applications that need some understanding before use.One approach these applications take is to give us a tour of the product, usually with little pop ups that we can skip or leave until the end.That is exactly what Bootstrap Tour does in a simple and clean way.Getting started ... This plugin was at first aimed at being a simple and easy to use Bootstrap tour plugin but now we...
By this time you’ve probably already heard of Yeoman and chances are you have used it once or twice, it’s a great automation tool that pretty much gives your entire workflow a push in the right direction. If you have used it, you know that Yeoman runs on Generators; you pick one and Yeoman does the work of scaffolding your application based on your needs. There are more than 600 generators listed on the website but sometimes you need one that meets your requirements precisely, and if you can’t find...
Web Components have really come a long way since they were first introduced, but one aspect of components that could really change how we code websites is HTML Imports. This way of working allows us to import HTML documents into other HTML documents. It was possible with Ajax, but HTML Imports is a cleaner method. Browser support ... HTML Imports are a very new technology and as of the time of writing, are only supported in Chrome 31 and later. Even then, you’re required to activate the feature. To do so...
This is a golden age for frameworks, with dozens for us to choose from. We have great options like Bootstrap and Foundation, but sometimes these frameworks deliver more than we want. Sometimes, all we need is a clean, and responsive grid. Cue: Cute Grids. Why use Cute Grids? ... The idea behind Cute Grids is to get you away from a full featured framework, and focus on just the grid. Cute Grids take a mobile-first approach, so that all of your websites work on mobile as well as desktop. The framework is completely...