-
Detecting media queries with Javascript
25 commentsWith CSS pseudo elements and Javascript we can detect when a media query triggers. A more future proof and clean way to detect media query breakpoints.
-
Create your own personal boilerplate
19 commentsWhen starting on a new project it’s important to begin with a good solid foundation that you’re comfortable with. You can start working so much faster when you have a ready to use enviroment with a good file/folder structure and Grunt-tasks to go. This is why I like having my own personal boilerplate that I use for almost all projects I work on.
-
Quick tip: The minimal-ui meta tag
8 commentsWith the release of iOS 7.1, Apple added a new viewport meta tag to Safari. The minimal-ui meta tag lets us minimize the top and bottom bar in the browser interface which gives us more screen real estate and creates a much more cleaner look.
-
Interview with Bryan Jones, creator of CodeKit
3 commentsIf you’ve ever worked with Sass or Less, chances are you’ve used CodeKit. An application that helps you speed up your workflow with automatic file compilation, browser-auto-refresh and built in syntax control among many other features. After having worked as a freelance web developer, Bryan Jones decided to purse a career in business administration in North […]
-
Create a responsive header video with graceful degradation
77 commentsCreate a responsive video header that works even in IE8 and is mobile friendly. Using jQuery, Modernizr and HTML5 data-attributes.
-
8 Sass mixins you must have in your toolbox
79 commentsAt their core, Sass mixins are blocks of code that you define once and can then re-use anywhere, if you are familiar with any programming language you can think of them as functions. In this post I’ll go over the 8 Sass mixins I think every developer should have in their toolbox.
-
Vertical align anything with just 3 lines of CSS
391 commentsWith just three lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY center whatever we want, even if we don’t know its height.
-
Create a CSS grid using calc()
5 commentsCalc() is a native CSS function that allows you to use mathematical expressions with addition, subtraction, multiplication and division. In this post I’ll show you how you can use this to create a basic grid.
-
Dynamically change text color based on its background with Sass
5 commentsRecently I found out a way to with jQuery dynamically change the background of an element with depending on the colors behind it. And I thought it would be neat to do the same but with text color and with SASS. This can be really useful if you are using an OOCSS/modular approach on your project.
-
How to create a one element Pong game in CSS
No commentsThis article is not so much about how to create Pong, but how you can take advantage of browser implementation of HTML and usage of pseudo selectors.
-
6 things I look forward to in CSS level 4
3 commentsThe specifications for Media Queries and Selectors have recently been updated with some new goodie goodness. These specifications are only in the Editor’s Draft stage, which means they haven’t been officially published yet (more on that can be found here). But they give a hint on what may come with CSS level 4.
-
The standardisation of CSS
One commentHow does a new CSS property get standardised? Who makes the decisions? Why should I care about the standardisation process? What’s the deal with airline food? I’ll be covering that, and some more in this post.
-
Getting started with Grunt
11 commentsGrunt is a way to automate many of the tasks you’re doing when you develop. Are you still minifying, compiling, concatenating, compressing, prefixing all your code manually? Nonsense poopy pants! In this tutorial I will show you how Grunt will do all this for you, and then some!
-
4 steps to improve your website’s performance
2 commentsSo you got your fancy responsive site up. It looks great on your iPad, iPhone, Galaxy Note, Xperia Go, refrigerator and Tamagotchi. But have you given a thought on it’s mobile performance? In this post I’ll go over 4 simple steps to make your site more mobile friendly.