Advertisement

HTML/CSS

Latest Posts
  • HTML/CSS
    Quick Tip: Fix Your Messy CSS With SMACSSSmacss retina
    201 shares
    Face it, your CSS is a complete mess! Today I'm going to introduce you to SMACSS, a set of guidelines and principles to tidy up your stylesheets, making your projects better organised, flexible and scalable.Read More…
  • HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    143 shares
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    12 shares
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • HTML/CSS
    How to Animate Festive SVG Icons With CSSAnimated icons retina
    146 shares
    'Tis the season, so in this tutorial, I'll walk through creating some CSS animated, holiday-themed, SVG icons. There are some great icons on Iconmelon, a site which hosts many free vector icon sets for you to sink your teeth into. The icons I'm using come courtesy of designer Sam Jones. So grab yourself a cup of eggnog, pull your laptop up to the yule log, and let's gets started!Read More…
  • HTML/CSS
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    155 shares
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    19 shares
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • HTML/CSS
    What You May Not Know About the Z-Index PropertyZineex thumb
    1083 shares
    The z-index property in CSS seems simple enough, but there's a lot to discover beneath the surface if you really want to understand how it works. In this tutorial we'll clarify the inner workings of z-index, by looking at stacking contexts and a few practical examples.Read More…
  • Compass
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    32 shares
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Compass
    Setting up Foundation With Sass and CompassFoundation sass retina
    22 shares
    Sass is a great way to speed up front-end development in general, I use it in every one of my projects. Sass (as with all other preprocessors) allows for nested styles, functions and prewritten code in what are called mixins. Foundation has a few different versions, currently we've covered the most common HTML/CSS variants, but now let's talk about a version built on Sass.Read More…
  • HTML/CSS
    Introducing Gumby: An Alternative CSS FrameworkGumby intro retina
    94 shares
    Let me introduce you to Gumby; a flexible CSS framework, currently at version 2.5. Gumby is packed with useful features, which we'll examine throughout the course of a few screencast tutorials. We'll begin by exploring its straightforward CSS variant, the UI kit, the grid, a host of other tricks, then in later videos we'll take a look at Gumby's Sass version.Read More…
  • HTML/CSS
    How to Customize the Foundation 4 Top BarFoundation preview
    23 shares
    Zurb's Foundation 4 features a brilliant top bar which has become almost symbolic of a Foundation site build. Today we're going to look at how you can implement it in a different way, placing it elsewhere on the page, giving you a custom and responsive horizontal navigation menu.Read More…
  • HTML/CSS
    Build a Freshly Squeezed Responsive Grid SystemLemon retina 2
    198 shares
    I'd like to talk to you about Lemonade. Not the refreshing citrus drink, but a grid system I created. Lemonade is a grid system that was built in order to give designers and developers the confidence to make fully responsive websites, eliminating the frustration of flicking between browsers looking for bugs and errors. Let's look at how it's put together and how you can build your very own responsive grid system.Read More…
Advertisement
Advertisement