Responsive Web Design in Sass Part 2: Media queries in Sass In part one we talked about how Sass can help with fluid layouts and images. Now we'll turn our attention to the new kid in town. Media queries are the tool that takes a design from fluid to truly responsive. I Resisted Fluid Layouts (too) Fluid or elastic layouts allow your site's content to grow and shrink to fit the screen, so that solves the problem right? OK.
Why I Choose Stylus (And You Should Too) The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus. Today we'll be discussing why Stylus is awesome, why I choose it, and why it might just become your new CSS hero. File: README — Sass Documentation Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes.
Responsive Web Design in Sass: Using media queries in Sass 3.2 In Responsive Web Design in Sass Part 2 I wrote about using media queries in Sass 3.1. At the time, I was mostly limited to the (still very cool) @media bubbling feature. I also pointed out some of the shortcomings. At the end of the post I previewed how you can use @content blocks, one of the emerging features of Sass 3.2, to write a mixin that can really help to simplify using media queries in Sass. With Sass 3.2 nearly upon us, I am happy to report that media queries have become the first-class citizens they deserve to be.
Critical render path and pagespeed: An in-depth look Since most webpages have many different components, it is not always possible to just remove everything to make a page load faster. If you have ever wondered "What else can I do to make my pages fast?" or "How does Google expect pages to load in one second?" then this concept is for you. What is the critical render path? Sass Color Variables That Don’t Suck One of the best reasons to use Sass is variables. They help keep your code DRY, which makes it easy to maintain and change. However, with colors, it’s easy for your variables to get out of hand. In this article, I’ll show you an quick, easy method to wrangle your color variables.
Gulp, SASS, Bourbon, Neat & BrowserSync Boilerplate I found myself creating this particular dev environment set up multiple times and decided to save myself some time by creating a boilerplate. Here are the list of libraries & frameworks we will be including: This post assumes that you have npm and Gulp installed globally. ZURB Ink: Responsive HTML Email Framework Ink is an open source framework that will help you quickly build responsive HTML emails for all major email clients. Even in outdated and notoriously problematic ones like Outlook 2000. Ink just launched today.
HTML5 and CSS3 About this Book 300 pages Published: Release: P1.0 (2013-11-05) ISBN: 978-1-93778-559-8 HTML5 and CSS3 power today’s web applications, with semantic markup, better forms, native multimedia, animations, and powerful APIs. You’ll get hands-on with all the new features with practical example projects, and find what you need quickly with this book’s modular structure. “Falling Back” sections show you how to create solutions for older browsers, and “The Future” sections at the end of each chapter get you excited about the possibilities when features mature. This revised second edition walks you through new features such as IndexedDB, CSS Animations, SVG, and more, along with updated fallback solutions.
Responsive Design is Not About Screen Sizes Any More In March 2012, Guy Podjarny ran a test comparing the performance of hundreds of shiny new responsive websites across four different screen resolutions. The results were very dissapointing. (1) Two years into the rise of Responsive Web Design, after every imaginable sort of designer and developer had jumped into the train, it took a test to almost rock the theory to its foundations. Guy proved that almost every known responsive site was overweight. We've made the internet in our image… ObeseJason Grigsby
How to create flexible layouts with Susy and Breakpoint Creating responsive layouts can be challenging because of the maths involved, so it's common for designers to turn to frameworks and/or Sass to simplify the process. A lot of frameworks are based on a 12-column grid, but a responsive site doesn't always fit into this structure. Here, I'll show you how to use two Sass extensions to create truly flexible layout that transcends the 12-column grid.