leereamsnyder + sass   78

Fluid Responsive Typography With CSS Poly Fluid Sizing – Smashing Magazine

(with the caveat that users aren't constantly resizing their browsers, if they even can)
css  sass  webdesign  rwd  math 
may 2017 by leereamsnyder
Focusing a `background-image` on a Precise Location with Percentages | CSS-Tricks
There's a lot of trickiness if you're not setting something at 0%, 50%, or 100%
css  backgrounds  tips  sass 
april 2017 by leereamsnyder
“Cooking with Design Systems,” an article by Dan Mall
This is a smart way of thinking about building a system.

> Once I feel like I have a thorough enough set of raw ingredients, my goal is to create as much of the site as I can without opening my stylesheet again. If I can do this, I’m using my design system, as opposed to creating patterns on the fly.
css  sass  webdesign  programming  design 
march 2017 by leereamsnyder
The 100% correct way to do CSS breakpoints
Yes, it is.

- use reasonable breakpoints in between common sizes
- refer to ranges, not the absolute breakpoints
- give them reasonable names "phone, tablet portrait, desktop"
- span ranges like "phone up" or "tablet only"
css  rwd  sass  webdesign 
december 2016 by leereamsnyder
Molten Leading in CSS | CSS-Tricks
Use some math to dynamically set font-size and line-height as the viewport changes
css  sass  typography  mediaqueries 
june 2016 by leereamsnyder
Mixing Color for the Web with Sass · An A List Apart Article
Did not know about the scale-color function (proportionate scaling of hue/color/lightness)
color  css  sass  webdesign 
november 2015 by leereamsnyder
Responsive Typography with Sass Maps
Some clever mixins to keep things organized
css  sass  typography 
june 2015 by leereamsnyder
On writing real CSS (again)
Not so sure about this. If you want some "real" CSS, just compile your SASS and go from there.
css  sass  programming  javascript 
may 2015 by leereamsnyder
Extending Sass Without Creating A Mess
Some ideas for using @extend responsibly (I still wouldn't…)
css  sass 
may 2015 by leereamsnyder
Sass Mixins vs Extends: The Data - Belly Card Engineering
Mixins result in larger raw files, but smaller gzip'd files
css  performance  sass 
march 2015 by leereamsnyder
Compass Display Helpers | Compass Documentation
Need to know if a particular element defaults to inline or whatever? They're all here.
css  html  reference  compass  sass 
february 2015 by leereamsnyder
Authoring Critical Above-the-Fold CSS | CSS-Tricks
Couple of different ways to break out styles 'above the fold' for rendering performance
css  performance  webdesign  nodejs  sass 
july 2014 by leereamsnyder
DRY-ing Out Your Sass Mixins · An A List Apart Article
Some clever ideas to handle output bloat if you're finding mixin and extend aren't quite getting you there
css  webdesign  productivity  sass  performance 
may 2014 by leereamsnyder
mojotech/jeet · GitHub
Similar to Singularity. Syntax is fractional: (1/4)
css  grid  sass  productivity 
march 2014 by leereamsnyder
csswizardry/typecsset · GitHub
Instant baseline grid, if that's your bag
css  typography  sass  webdesign  grid 
january 2014 by leereamsnyder
Mobile-first Responsive Web Design and IE8 | Info | theguardian.com
One setting that just exports the desktop-only layout (no media queries) for IE8. That's one way to do it.
mediaqueries  rwd  sass  browsers  ie8  mobile 
december 2013 by leereamsnyder
Sass + CSS utilities. Mostly useful patterns, not so much browser prefix adjustments
css  patterns  sass  utilities  webdesign 
november 2013 by leereamsnyder
Conditional Media Query Mixins | CSS-Tricks
How to generate a media query-free CSS file for older browsers that can't use it
css  sass  rwd  performance 
october 2013 by leereamsnyder
IE-friendly mobile-first CSS with Sass 3.2
Some mixins to auto-generate your IE-only stylesheets
browsers  ie  sass  css  performance  productivity 
october 2013 by leereamsnyder
The Extend Concept | CSS-Tricks
Differences b/w LESS, Sass, and Stylus and what to watch out for
css  sass  less  programming  productivity 
july 2013 by leereamsnyder
SASS function to build media queries with a simplified syntax
css  rwd  sass  productivity 
march 2013 by leereamsnyder
Developing a responsive, Retina-friendly site (Part 1) — PaulStamatiou.com
There's a lot to look up to here. Particularly like the sass media query mixins that help you avoid constantly overriding properties
css  design  rwd  html  retina  browsers  performance  sass  mediaqueries  tools  reference  tips 
january 2013 by leereamsnyder
24 ways: Redesigning the Media Query
Clever: SASS mixins for Jori's "infinite fixed grid" concept, with some script in tow to load the right images
css  sass  rwd  javascript  grid  layout  performance 
december 2012 by leereamsnyder
Responsive background images with fixed or fluid aspect ratios – Voormedia
Clever using a starting height and 'slope' calculation to alter the aspect ratio at larger sizes
css  css3  browsers  mobile  rwd  images  html  sass  math 
november 2012 by leereamsnyder

Copy this bookmark: