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...
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+...
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...
In our last article about Gumby you saw the fundamentals of this robust framework, but we also have a lot of JavaScript components we can use via the JavaScript UI for Gumby. Today, we’ll take a look at these components. Toggles & switches ... A lot of what Gumby focuses on is minimizing the amount of JavaScript we need to write. Toggles and switches look at the gumby-trigger attribute and the element you enter as the value of this attribute will have the .active class toggled. You can use this to toggle...
File uploads are something that, as developers, we have had to do for years and getting an ajax file uploader is always a better choice than redirecting the user to an upload page or even just reloading the page; keeping the user on the same page will improve the usability of your application. Today we will be creating a simple ajax file uploader with drag and drop support. The plugin ... In this example I will be using the jQuery Upload File Plugin because it’s a simple to use and robust plugin that will get...
As web developers, it’s usual to have a favorite framework that we use for virtually every project. There are certainly plenty to choose from. Today I’d like to try and persuade you to switch to one of mine. Gumby is a flexible framework developed with Sass that comes with a whole bunch of extensions and JavaScript helpers. It’s been growing in popularity for some time and for good reasons. The grid ... The first thing to check out when considering a framework is the grid system being used by the framework....
One area we always have some difficulty when it comes to styling is input fields and in particular the file input. This type of input doesn't usually allow for much customization but with some JavaScript tricks we can create our own file input that matches our website's look and feel. The HTML ... Using the default HTML element for file input we can't create much so in this article we will create our file input that will be hidden and we will create another button that with some javascript magic will...