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

How to use Gumby components

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

How to create a jQuery file uploader

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

Introducing your new favorite framework: Gumby

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

How to style file input fields

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

Introducing Gulp.js

If you use a task runner in your workflow you’ll know why they are so useful in coding; they improve our workflow and allow us to focus on problem solving rather than repetitive data entry. Gulp is one such application and it has a lot of benefits to it. There’s a really simple syntax, no messy JavaScript files, a simple API and a wide variety of plugins. Installing Gulp ... As you’ll suspect if you’ve used a utility like this before, you need to have NodeJS and npm installed on your system, once you...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress