recentpopularlog in

abberdab : sass   19

3 Ways to Create Angled Edges With SVG
In this tutorial you’ll learn three ways to create easy angled edges using SVG. To begin with we’ll use an inline SVG, then we’ll use an SVG background on a pseudo-element, before finishing off with a Sass mixin. Let’s dive in!
css  svg  masks  sass  tutorial 
august 2018 by abberdab
From Darkness to Light: Color Versatility Using Tints, Tones, and Shades | Viget
In my last article, I wrote about how using more specific names can be useful when referencing colors. Several people shared how this is doubly useful when mapping to SASS variables—and I agree. This time around I want to share how to use more specific color names when applying lighter and darker values through tints, tones, and shades and how this can be further helpful for color reference.
color  design  sass  css  naming  naming-conventions  tints  tones  shades  colorpalettes 
august 2017 by abberdab
Angled Edges
A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
css  sass  mixins  layout  motifs  design  www 
august 2016 by abberdab
BEM & Atomic Design: A CSS Architecture Worth Loving | Lullabot
"Atomic Design is all the rage; I’ve recently had the pleasure of using BEM (or CEM in Drupal 8 parlance) and Pattern Lab on Carnegie Mellon’s HCII’s site. Working through that site I landed on a front-end architecture I’m very happy with, so much so, I thought it’d be worth sharing."
bem  css  architecture  sass  atomic-design 
august 2016 by abberdab
Atomic Docs
This looks like it has a lot of potential!
styleguides  pattern-libraries  generator  php  sass 
july 2016 by abberdab
Codepen: Decorative Text Underline (SASS)
A nicer text underline. Variables set using Sass.
typography  underline  text  webbed  css  sass  examples 
july 2016 by abberdab
My process of creating the Arriva web site | Veerle's blog 3.0
"Just a while ago I wrote about a cool project I finished for a small start up company called Arriva. I shared the logo design process back then. Today I’ll talk about the design of the web site and I’ll share how I get started with my coding, how I prepare the different assets, which tools I use, and how I organise my files, my CSS (or better put SCSS) in particular."
designer-developer  process  tools  rwd  sass  css 
may 2016 by abberdab
Gridlover
The tool to establish a typographic system
with modular scale and vertical rhythm.
typography:vertical-rhythm  baseline  tools  css  grids  sass  less 
august 2015 by abberdab
Themed Styles With Sass | Sparkbox | Web Design and Development
Writing all the markup and styles from the ground up for multiple brands wastes your time upfront and makes future changes even more cumbersome. Ethan has a Sassy solution to save your time and sanity.
sass  themes  branding 
january 2015 by abberdab
SCSS @extends Across Media Queries - CodePen
A nice paginated tutorial in Codepen to get @extend 'working' with Media Queries.
mediaqueries  rwd  dev  www  sass  css 
september 2014 by abberdab
typeplate/starter-kit
Used in Rachel Andrew’s examples in her CSS Grid Layout book, also similar to/inspired by the Sassaparilla framework approach to type.

Rule #1 in Typeplate Club… Always use <meta charset="utf-8"> in your document <head>. Doing so alleviates authors need to use a charset from within a stylesheet. Anything imported into a document using <meta charset="utf-8"> is encoded as utf-8 globally.

Based on use cases for most developers' workflow, we recommend using Typeplate just after your reset stylesheet (i.e. normalize) and your compass @import in order to operate as we've intended, but as you'll see from our demo it isn't necessary.
typography  css  sass  boilerplate 
august 2014 by abberdab
Typeplate » A typographic starter kit encouraging great type on the Web
Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.
css  design  sass  typography 
march 2013 by abberdab
Fancy Circles with Sass
The talented folks at Zaarly put together a Sass mixin that makes styling Symbolset icons a breeze.
With this example, you can add a class (appropriately) called .fancy to a Symbolset element to create a nice circular background.
mixins  sass  circles  typography  symbolset  dev  www 
december 2012 by abberdab
Responsive Data Table · CodePen
Super slick mobile friendly tables.
css  html  tables  rwd  www  sass 
november 2012 by abberdab

Copy this bookmark:





to read