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...
Using CSS we can create all kinds of animations. Whether we’re working with text or with elements, animations and transitions are a much simpler task with CSS. It’s all possible with vanilla CSS, but there are a number of plugins that make our life simpler, one of which we’re going to look at today: Textillate.js. Getting started ... In order to start using this plugin we need firstly to head over to its website and download the latest version. One thing to keep in mind is that this plugin has 3 dependencies:...
Most of us use some form of a CSS pre processor now, they give us the freedom and advantages that CSS still doesn’t have implemented, like variables. The problem with these pre processors is that they use a completely different syntax than CSS itself making us learn two syntaxes. What if we could have a pre processor that had all the advantages we are used to and still keep the CSS syntax ? Myth allows you write CSS syntax so that you don’t have to remember two syntaxes and so that when features like variables...