When I first heard about CSS Custom Propertieshttps://www.w3.org/TR/css-variables-1/ CSS Variables one of the things I found most intriguing was the possibility of creating themes and have multiple themes available for use. In this post we'll explore some new or not so new pseudo elements that will make working with CSS variables easier, we'll explore what are CSS Custom Properties and the acompanying Javascript API for working with these new variables. > Note that, for this post, I'm using CSS custom properties and CSS variables interchangeably since both terms represent the same spec. Syntax and the :root pseudo element One of...
here's an idea... take a markdown file containing both documentation and the SCSS/CSS code it references as fenced markdown blocks and use that to generate your production code. Granted, it is not a new idea but I think it's something worth exploring. Literate Programminghttp://www.literateprogramming.com/ is a technique where the primary concern is writing the narrative of your program and embedding the code as fragments into the narrative. You then run a program WEB to both create a TeX output suitable for printing and a Pascal program ready for execution. I have seen a few examples of Literate Programming beyond Doccohttps://jashkenas.github.io/docco/...
In Javasacript we've been able to detect support for specific features almost since day one, at least since we decided that detecting browsers and equating a browser/version combination with support for a feature wasn't a good idea after all. Take the examples below used to detect if a browser suports HTML Imports, Custom Elements V1 and Shadow DOM v1. Each of the functions will return true or false based on current browser support We can then break our code based on the functions' results. javascript function supportImports { return 'import' in document.createElement'link'; } function supportsCustomElementsV1 { return 'customElements' in window;...
We're living in a progressively more diverse and more multilingual world. When the language works the same as English we have no problem. We start having issue becomes when we work with languages other than English in the same document. It gets more complicated when our primary language uses a different writing mode than the one we're used to. Think about vertical Kanji or right-to-left Hebrew or Arabic text. Why is this important? People Towards the end of his presentation at Fronteers 2016 Bruce Lawson states that lack of awareness and locally relevant content is the most common barrier to...
I've been playing with the idea of creating crazy, magazine style, layouts since I Attended Jen Simmons and Rachel Andrew workshops at An Event Apart last year. I came up with this crazy idea, build magazine layouts like those on the printed edition of Kinfolk Magazinehttps://kinfolk.com/ and see how far we can push layouts while still remaining usable at small to medium scale sites as bespoke, art directed, designs. This post is a refresher on the SCSS, CSS and Javascript I will use along with ideas of how these technologies may be used in designing print-like publications. Future posts in...
One of the things that have caught my attention about web components is how easy it is to adapt them as pattern libraries and design libraries. Because we can isolate the style and scripts for each individual component and compose larger UI elements from smaller elements, Web Components are ideal for this type of work. Before we can delve into pattern and design libraries we need to design what they are. So here we go: > A design library completely covers an element or a pattern: what it intended purpose is, how it looks, what behaviors and styles are available...
Do we need CSS after all? CSS is not immune to the framework wars. This is a quick look at some of the available CSS frameworks. - Bootstrap - Foundation - Semantic-UI - Susy - Material UI - MaterializeCSS - Gumby - Pure - Metro UI CSS 2.0 - Leaf Beta They all solve the same problem of laying out and styling content but they all have different styles to solve the same problem of providing consistent, reusable and scalable CSS libraries. Different CSS frameworks present different approaches to building a good CSS suite of tools. The problem is that...
There is a point when we need to decide if technology is a help or a hindrance. This came up recently in a conversation with @jiminpanhttps://twitter.com/JiminyPan in Twitter made me realize something: We all react differently to the way technology communicates with us. The tweet that started it all: I mean, Lighthouse auditing really can belittle you sometimes — needless to say it failed to audit some stuff… pic.twitter.com/xigLoNc3EY— Jiminy Panoz @JiminyPan December 30, 2016 While cognizant that things are different for different developers and that different projects have different requirements I can speak about some of the things I've...
Introductory Note Every so often we see twitter rants about progressive enhancement versus using Javascript for everything... after all we can do most of what CSS can with Javascript and the CSS Object Model, right? The latest iteration of this debate has been between Alex Russell who advocates for smaller JS payloads, lazy loading and progressive enhancement versus the people saying that we shouldn't worry about javascript being available because all modern browsers are evergreen and people wouldn't think about disabling Javascript. These are some random thoughts and ideas about the subject Do we still need progressive enhancement? Rather than...
