jeremyday + sass   58

Some Extremely Handy `:nth-child` Recipes as Sass Mixins | CSS-Tricks
Some Extremely Handy `:nth-child` Recipes as Sass Mixins There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. via Pocket
ifttt  pocket  css  css3  design  sass  tutorial 
may 2017 by jeremyday
iotaCSS - Smart open source SASS based OOCSS framework built for scale.
Get started with iota CSS Create lightweight, fast performant, readable and fully responsive interfaces in no time. Iota CSS is a set of independent modules managed through NPM. They are grouped into the following categories and can be easily configured. via Pocket
ifttt  pocket  bemcss  css  design  framework  iotacss  oocss  sass 
may 2017 by jeremyday
Writing modular CSS (Part 2) | Zell Liew
Writing modular CSS (Part 2) Last week, I shared how I use BEM to create a sensible CSS architecture. Although BEM is awesome, it’s only part of the solution. There’s another part I’ve yet to mention — namespaces. via Pocket
ifttt  pocket  article  bemcss  css  css3  design  sass 
march 2017 by jeremyday
“Cooking with Design Systems,” an article by Dan Mall
Cooking with Design Systems Prolific designer Milton Glaser said, “I move things around until they look right,” Because that’s most of what I do in Photoshop and Sketch, I need a way to do that in code. First, I need to make the “things” that need to be moved around. via Pocket
ifttt  pocket  architecture  article  css  css3  design  programming  sass 
march 2017 by jeremyday
Aesthetic Sass 3: Typography and Vertical Rhythm | Scotch
Aesthetic Sass 3: Typography and Vertical Rhythm In both print design and web design, typography plays an important role. After all, content is king, and text content is prevalent in the web. That is why it is important to adopt a content-first approach to design. via Pocket
ifttt  pocket  article  design  programming  sass  tutorial  typography 
february 2017 by jeremyday
CSS Architectures for UI developers | SmartArt Blog
CSS Architectures for UI developers Writing good CSS (or whichever sub-flavour) requires a good level of experience. In this moment of time, we are still trying to figure out the best way to scale CSS allowing maintainability and readability without sacrificing performance and ease of use. via Pocket
ifttt  pocket  architecture  article  comparison  css  css3  design  framework  reference  sass 
january 2017 by jeremyday
McGriddle by Jonathan Suh
McGriddle McGriddle is a get-out-of-your-way Sass grid library. Supports flexbox (by default, the grid is based on floats). Set up your grid system… Install via npm, yarn or Bower. via Pocket
ifttt  pocket  css  css3  design  flexbox  library  mcgriddlecss  programming  sass 
december 2016 by jeremyday
302 Found
The 100% correct way to do CSS breakpoints For the next minute or so, I want you to forget about CSS. Forget about web development. Forget about digital user interfaces. And as you forget these things, I want you to allow your mind to wander. To wander back in time. Back to your youth. Back to your first day of school. via Pocket
ifttt  pocket  css  design  programming  responsive  sass  tutorial 
december 2016 by jeremyday
Space in Design Systems – EightShapes LLC – Medium
Space in Design Systems I’ve long referred to Color, Type and Icons as the “Big 3” of a system’s visual language. All UI components — from Buttons on up — are built with them. But I left something out. Space, our final frontier. Space is everywhere. via Pocket
ifttt  pocket  article  css  design  sass 
october 2016 by jeremyday
Spectre.css - a lightweight, responsive and modern CSS framework
Spectre.css This is the content inside the modal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. via Pocket
ifttt  pocket  css  css3  design  framework  programming  sass  spectrecss 
august 2016 by jeremyday
blog.prototypr.io
Advanced CSS: Sass Maps to UI Components Sass is a CSS preprocessor. It is great and widely used. If you are not familiar with it yet check out these tutorials. Maps are a hugely under-appreciated feature of Sass. Using Sass Maps can automate generating UI elements and improve the design consistency across your application. via Pocket
ifttt  pocket  css  design  programming  sass  tutorial  ui 
august 2016 by jeremyday
Family.scss
Family.scss Family.scss is a set of smart Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy and classy way. via Pocket
ifttt  pocket  css  css3  design  library  mixin  programming  sass 
may 2016 by jeremyday
Lint your CSS with stylelint | CSS-Tricks
Lint your CSS with stylelint The following is a guest post by David Clark. David is the co-creator of a thing called Stylelint, a tool for keeping your CSS in shape. He does a great intro as to why you might need it himself, so take it away David... You write CSS. Probably a lot of CSS. And you make mistakes. via Pocket
ifttt  pocket  css  css3  csslint  design  programming  sass  stylelint  tools 
april 2016 by jeremyday
Gutenberg — A Meaningful Web Typography Starter Kit
Gutenberg — A Meaningful Web Typography Starter Kit Gutenberg is an open source project licensed under Creative Commons 3.0. Feel free to use, adapt or contribute. Gutenberg is a flexible and simple–to–use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. via Pocket
ifttt  pocket  css  design  github  gutenbergsass  library  opensource  sass 
february 2016 by jeremyday
Variables: The Backbone Of CSS Architecture – Smashing Magazine
Variables: The Backbone Of CSS Architecture When they hit the front-end landscape a few years ago, preprocessors were heralded as the saviour of CSS, bringing modularity, meaning and even a degree of sexiness1. via Pocket
ifttt  pocket  article  css  design  reference  sass 
january 2016 by jeremyday
include-media: Simple, elegant and maintainable media queries in Sass
Simple, elegant and maintainable media queries in Sass I spent quite some time experimenting with different libraries and mixins available out there, but eventually all of them failed to do everything I needed in an elegant way. via Pocket
ifttt  pocket  css  library  programming  responsive  sass 
january 2016 by jeremyday
WTF is Solid? - Solid
Solid Solid is BuzzFeed's CSS style guide. Influenced by frameworks like Basscss, Solid uses immutable, atomic CSS classes to rapidly prototype and develop features, providing consistent styling options along with the flexibility to create new layouts and designs without the need to write additional CSS. via Pocket
ifttt  pocket  css  css3  design  framework  sass 
december 2015 by jeremyday
DocumentCSS - DocumentCSS
DocumentCSS makes it easy to incorporate style documentation as part of your design workflow. Using a combination of custom tags and markdown DocumentCSS parses coments on your CSS, LESS, or SASS and autogenerates a site with your documentation. via Pocket
ifttt  pocket  css  guide  programming  sass  tools 
december 2015 by jeremyday
una.im
✨ Hi! I'm Una! ✨ I began writing this blog post a few weeks after releasing a semi-satirical article about my take on the mix of current CSS naming convention/styling trends on Sitepoint called Atomic OOBEMITSCSS. That was back in August, but life got in the way. via Pocket
ifttt  pocket  css  framework  programming  reference  sass  tutorial 
november 2015 by jeremyday
Mixing Color for the Web with Sass · An A List Apart Article
Mixing Color for the Web with Sass Color is one of the most powerful components of art and design. We use it to influence mood, create an environment, and tell a story. Over 125 years ago, a great impressionist painter changed the way we think about color by observing light’s role in it. via Pocket
ifttt  pocket  color  css  design  programming  sass  tutorial 
november 2015 by jeremyday
Smarter Grids With Sass And Susy
Smarter Grids With Sass And Susy If you’re a designer, you’ll know that grids are your friends. More often than not, they’re the vital architecture that holds a beautiful design together; they create rhythm, structure your page, lead the eye, and prevent the whole thing collapsing in a sloppy mess. via Pocket
ifttt  pocket  design  grid  programming  responsive  sass  susysass  tutorial 
july 2015 by jeremyday
The Sass Mixins/Placeholders I Can't Live Without for Responsive Web Design — Sift Science Blog
The Sass Mixins/Placeholders I Can't Live Without for Responsive Web Design — Sift Science Blog Here at Sift Science, we just completed another big step in our ongoing marketing site redesign, overhauling the homepage and replacing old landing pages with prettier, responsive, and more performant ones. via Pocket
ifttt  pocket  css  reference  responsive  sass  technology 
july 2015 by jeremyday
Creating Better CSS - Web Design Weekly
Creating Better CSS For most web developers we are knee deep in CSS on a daily basis. This can be a good or bad thing. It really depends on the state of the CSS. A well-organised codebase can be a pleasure to work with but, generally speaking, most CSS is a complete nightmare, especially on larger projects. via Pocket
ifttt  pocket  css  css3  design  reference  sass 
july 2015 by jeremyday
Getting Started With SCSS-Lint
Getting Started With SCSS-Lint As surprising as it might sound, writing working code is actually the easy part when developing a website, application or any piece of software. Making the whole thing scalable, tested, properly documented and easy to contribute to is the hard part. via Pocket
ifttt  pocket  design  lint  programming  reference  sass 
july 2015 by jeremyday
sass-guidelin.es
Sass Guidelines Dollar icon Settings icon Up arrow icon Twitter icon An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the to switch. via Pocket
ifttt  pocket  css  design  programming  reference  sass 
july 2015 by jeremyday
HugoGiraudel/sass-boilerplate · GitHub
HugoGiraudel/sass-boilerplate This is a sample project using the 7-1 architecture pattern and sticking to Sass Guidelines writing conventions. Each folder of this project has its own README.md file to explain the purpose and add extra information. Be sure to browse the repository to see how it works. via Pocket
ifttt  pocket  architecture  css  design  reference  sass 
july 2015 by jeremyday
Responsive Typography with Sass Maps
Responsive Typography with Sass Maps Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable. via Pocket
ifttt  pocket  article  css  css3  design  responsive  sass  tutorial  typography 
june 2015 by jeremyday
Skyline | Evolving CSS Architecture
Skyline | Evolving CSS Architecture We are creating horizons, each new skyline is a unique, living outline that changes with the evolving architecture. We're developing a shared vocabulary, creating common HTML modules with consistent naming conventions. via Pocket
ifttt  pocket  css  css3  design  framework  sass 
april 2015 by jeremyday
Project Titon
Titon Framework A collection of modular back-end packages to ease the process of application building by off-loading common tasks. via Pocket
ifttt  pocket  components  css  css3  design  framework  programming  sass  titon  ui 
april 2015 by jeremyday
Gumby - A Flexible, Responsive CSS Framework - Powered by Sass
Gumby - A Flexible, Responsive CSS Framework - Powered by Sass Our friends at Digital Surgeons are looking for a full-stack developer. Apply now » Gumby 2 is built with the power of Sass. via Pocket
ifttt  pocket  css  css3  design  framework  gumby  programming  sass 
april 2015 by jeremyday
5 Great Uses for Sass Maps
5 Great Uses for Sass Maps The Sass map is an awesome tool for organizing your code, minimizing duplication, and making your code base less prone to overall careless errors. They allow us to outline and document our projects in a way that helps with their overall architecture. Maps first came about in Sass 3. via Pocket
ifttt  pocket  css  css3  design  reference  sass 
march 2015 by jeremyday
Using Sass Maps
Using Sass Maps The third major version of Sass brought a new data type called map. While you might be unfamiliar with this name, we already use maps often in other languages, usually under the names of associative arrays, or hashes. In other words, a Sass map is an array matching keys to values. via Pocket
ifttt  pocket  css  css3  design  reference  sass 
march 2015 by jeremyday
Your nesting is harmful — Medium
Your nesting is harmful Two years ago we’ve started adding a preprocessor, Sass to be more precisely, to our toolchain. I was super excited. via Pocket
ifttt  pocket  architecture  article  css  css3  design  sass 
february 2015 by jeremyday
Sass Guidelines
Sass Guidelines Styleguide for writing sane, maintainable and scalable Sass. About the author My name is Hugo Giraudel, I am a front-end developer from France about to move in Germany. I have been writing Sass for over two years now and am the author of Sass related projects such as SassDoc and Sass-Compatibility. via Pocket
ifttt  pocket  css  design  programming  reference  sass 
january 2015 by jeremyday
Managing responsive typography with Sass | Matt Hinchliffe, Front-End Developer
Managing responsive typography with Sass In my previous article I used the maps feature of Sass to create a simple interface that can DRY up the creation of colour variations and help to bridge the gap between developers and designers. via Pocket
ifttt  pocket  css  css3  design  html5  programming  sass  tutorial 
november 2014 by jeremyday
Getting Started with Sass, Part 3 - Web Standards Sherpa
Getting Started with Sass, Part 3 In Part 1 of this series, I introduced you to CodeKit and Sass basics like partials, variables, comments and errors. In Part 2, I showed you how to achieve vertical rhythm using variables and math operators, and demonstrated how the Sass nesting syntax makes media queries easier to maintain. via Pocket
ifttt  pocket  css  css3  design  reference  sass  tutorial 
october 2014 by jeremyday
Build Web Layouts Easily with Susy | CSS-Tricks
Build Web Layouts Easily with Susy I've been coming around to the idea of using Susy (a Sass add-on for grids) lately. I like the idea of grids-on-demand, rather than a strict framework (no matter how simple). We even added support to CodePen. via Pocket
ifttt  pocket  css  design  programming  reference  sass  susysass  tutorial  ui 
september 2014 by jeremyday
Buttons - A button library built with Sass and Compass
Download Buttons and add files to your website. Add css in the head of your webpage.
ifttt  pocket  compasscss  css  design  library  sass 
may 2014 by jeremyday
Our CSS/Sass Project Architecture and Styleguide, by Bruno Azevedo of Group Buddies
Our CSS/Sass Project Architecture and Styleguide, by Bruno Azevedo of Group Buddies It's an almost impossible task to find a way to write consistent, future-proof and robust CSS. Our process has, until recently, consisted of appending CSS rules in an ad hoc manner to some sort of file organization. via Pocket
ifttt  pocket  architecture  article  css  design  sass  standards 
april 2014 by jeremyday
LESS vs Sass? It’s time to switch to Sass | Flippin' Awesome
LESS vs Sass? It’s time to switch to Sass The Sass versus LESS argument has been done to death. In this article I’ll explain why Sass really is the best and why you should start using Sass if you haven’t already. If you are interested, I’ve also written about how to get started using Sass and the problems with pre-processors. via Pocket
ifttt  pocket  css  design  less  programming  sass 
january 2014 by jeremyday
Why Sass? · An A List Apart Article
Why Sass? I was a reluctant believer in Sass. I write stylesheets by hand! I don’t need help! And I certainly don’t want to add extra complexity to my workflow. Go away! That was the thinking anyway. via Pocket
ifttt  pocket  article  css  design  programming  sass 
november 2013 by jeremyday
7 SASS features you should be familiar with - Blog Netguru
7 SASS features you should be familiar with Preprocessors such as SASS are widely used in our RoR world and make writing CSS much easier and clutter free. Most Rails developers are aware of advantages such as nesting, reference selector, variables, mixins or extending directives. But SASS is much more than that! via Pocket
ifttt  pocket  css  design  programming  reference  sass 
september 2013 by jeremyday
Bourbon Neat
Bourbon Neat // Enter Neat section { @include outer-container; aside { @incl via Pocket
ifttt  pocket  design  framework  grid  plugin  programming  rails  sass 
august 2013 by jeremyday
Bourbon - A Sass Mixin Library
bourbon The mixins contain up-to-date vendor prefixes for support in modern browsers. The library contains mixins, functions, and other addons to build kick ass web stuff. via Pocket
ifttt  pocket  css  design  framework  plugin  programming  rails  ruby  sass 
august 2013 by jeremyday
Bourbon Neat - Fluid Grids For Bourbon
Neat is an open source fluid grid framework built on top of Bourbon with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
programming  design  sass  css  grid  bourbon  opensource  rails  github  ifttt 
may 2013 by jeremyday
Bourbon - SASS Directives
A simple and lightweight mixin library for Sass

Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required.
The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.

The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.
programming  design  rails  sass  css  mixin  ifttt  bourbon  opensource  github 
may 2013 by jeremyday

Copy this bookmark:



description:


tags: