How to use Bootstrap Tour

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...

How to use Yeoman Generator

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...

How to use HTML Imports

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...
CSS

How to use Cute Grids

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...

How to create text animations with Textillate

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:...
CSS

How to use Myth

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...

Introducing Shadow DOM

The DOM has been a part of our webpages from the beginning, and since the earliest browsers there have always been certain things we wanted, but couldn’t get from the DOM; and other things we wanted to hide. The shadow DOM is designed exactly for that, it hides DOM subtrees under shadow roots, giving you a method of creating a better and more functional encapsulation in the DOM. Browser support ... This functionality is very much new and experimental so it’s only available at the moment in Chrome 25+...

How to use Gumby extensions

In our final article on Gumby, I will talk to you about the extensions Gumby provides. They aren’t included in the main framework to make it more lightweight but you can install them separately to make your coding even easier. Bower ... These extensions should be installed with bower , if you have never heard of Bower it is basically, as their github page says, ‘a package manager for the web’. It allows you to install registered packages with just a simple command and to install it yourself you will...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress