#programming/css

I am a front-end developer who is FED up about front-end development. If you write front-end, this isn't about you personally. It's about how your choices make me angry. Also this is about how my choices have made me angry. Also this is mostly just about choices, the technologies are incidental. Note: The views expressedRead More

Completely rewritten in Svelte, TailwndCSS 4.0 support and more!

Ste's Site

A deep-dive into the virtual keyboard API.

Free online CSS Grid layout builder and Bento layout generator

00:00 Intro00:38 Baseline01:50 light-dark()02:34 Container queries04:46 scroll-state()05:39 dialog07:06 Document Picture-in-PictureLearn HTML CSS: https://le...

Responsive images

BEM is a popular naming convention for CSS class names that we use widely here at Sparkbox. The fundamental concepts of BEM are simple and straightforward, but there are common errors those new to BEM make that this post seeks to explain through a series of examples.

I’ll admit, I traditionally haven’t had much of an opinion about the ordering of CSS properties. I just add what I need. I think they end up largely “grouped” by related things, because that’s just ho…

*Update - We just launched The Side Project Accelerator, an 8-week online program to share everything we learned while building and growing Hacking UI. We're looking for people who want to improve the…

Variable fonts are a new font format offering unprecedented flexibility. They will be landing in web browsers and native operating systems within 12 months. Learn how to try them out now.

When I came across this Codepen that shows an amazing animation of a Star Wars AT-AT Walker that was built ENTIRELY with CSS…

Huula - Automate UI Design with Machine Learning

Making the switch from the long time go-to Sass, to a new PostCSS/cssnext styling setup.

css-styleguide - :book: Opinionated CSS styleguide for scalable applications

Avoid using CSS’ shorthand syntax

The Grid code is coming! The Grid code is coming! It’s really, finally coming to a browser near you! Woohooooo!

While we were all looking the other way browsers have been implementing CSS features that do things you might think you need JavaScript or at least a pre-pro...

Use -webkit-background-clip: text and -webkit-fill-text-color : transparent to apply a background to a text on webkit browser. Set a color fallback f...

I’ve covered the very useful vw and vh CSS units in a previous article, but the related vmin and vmax units are far less known and generally poorly understood. This is unfortunate, as the units have...

44 points and 0 comments so far on reddit

9 points and 19 comments so far on reddit

77 points and 6 comments so far on reddit

70 points and 9 comments so far on reddit

51 points and 6 comments so far on reddit

Learn how to bring your CSS to the next level with PostCSS. Explore the endless possibilities and master writing a CSS transformation plugin! This great talk...

Frontend devs know all about the power of JavaScript. It can manipulate page elements with animations, build dynamic page features, and even handle local t

Pretty much only with CSS transforms and box-shadow, JS is only used for the controls....

Paul Lloyd perches his partridge in the CSS pear tree to discuss naming methodologies, ontologies and semantics. What’s in a name? That which we call a cherub by any other name would smell as sweet.

Animations in your web app should run at 60fps. Not always easy to achieve that,and it really depends on what you're trying to do, but I'm here to help. With FLIP.

The following is a guest post by Ben Simmons (@bdsimmons15). Ben gives us a hand here in wrapping our heads around how to think about approaching animation

Adding further meaning and information to the BEM naming convention

The following is a guest post by Rich Finelli. Rich told me he used to have some trouble with the special ampersand character in Sass, but then had a bit o

Outlining a strategy for using Flexbox in 2015, including examples, possibilities and troubleshooting

If hot reload is part of your CSS development workflow, compilation performance is critical. That 5-second compile time in your large application is now a liability. You're already enjoying a more...

9 points and 3 comments so far on reddit

This is "Kyle Neath, A better future with KSS" by webshaped on Vimeo, the home for high quality videos and the people who love them.

Daniel Imms takes a look at why native CSS variables will have an edge over what can be done with variables in preprocessors like Sass.

Patrick contacted a number of developers who have used BEM and SMACSS in their projects, and collected their thoughts on how they can be used effectively.

28 points and 4 comments so far on reddit

Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in relative harmony. You aren'

14 points and 3 comments so far on reddit

11 points and 2 comments so far on reddit

18 points and 7 comments so far on reddit

The following is a guest post by Filip Naumovic from Salsita Software. Filip has built a Sass tool to help with an issue I know I've experienced many times

7 points and 5 comments so far on reddit

43 points and 5 comments so far on reddit

25 points and 19 comments so far on reddit

“That's how we developed our living style guide, the mistakes we made along the way, and why popular style guide generators did not suit our needs.”

A few things to remember if you’re going to using position:fixed.

CSS statt SVG: Dank neuer CSS3-Eigenschaften erstellst du Formen jenseits von Rechteck und Kreis ganz ohne SVG und animierst diese zudem noch.

A look at the performance difference between Sass’ mixins and @extend

One of the things that I enjoy covering in my workshops is how to deal with managing the CSS cascade. We all have different techniques that we use and each come with their pros and cons. The casca...

A look at managing typography more practically on larger sites and apps

23 points and 3 comments so far on reddit

48 points and 22 comments so far on reddit

2 points and 1 comments so far on reddit

403 points and 9 comments so far on reddit

29 points and 0 comments so far on reddit

47 points and 0 comments so far on reddit

CSS offers various units for sizing elements. The popular choices are px, %, pt, em and more recently rem. There are two other units that have quickly become favourites of mine, vw and vh. These ar…

57 points and 4 comments so far on reddit

Any non-trivial site or application on the Web today will contain a large amount of HTML, CSS, and JavaScript. As the use of the Internet evolves and our dependence on it increases, having a plan for organizing and maintaining your front-end code is an absolute must. via Pocket

As front-end developers and designers, we’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future, when adjustments or full-scale redesigns must be made. via Pocket

Since we're using so much JavaScript in our web applications these days, we're looking for more ways to keep them fast. via Pocket

FastShell: HTML5, Sass and JavaScript boilerplate for Gulp

The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. via Pocket

38,565 Views A presentation about tricks and best practice ideas of how to use JavaScript given in our office in India as part of an internal training. A presentation about tricks and best practice ideas of how to use JavaScript given in our office in India as part of an internal training. via Pocket

ucss - Find unused and duplicate CSS

jQuery, Prototype, Node.js, Backbone.js, Mustache and thousands of JavaScript microlibraries all combine into a single undeniable fact: JavaScript is popular. It’s so popular, in fact, that we often find ourselves using it in places where another solution might be better in the long run. via Pocket

helium-css - Helium - javascript tool to scan your site and show unused CSS

Whether we like it or not, more and more developers are being introduced to the world of JavaScript through jQuery first. In many ways, these newcomers are the lucky ones. They have access to a...

Looking at how CSS has taken over from where we used to use JavaScript, Flash or other techniques to achieve the delightful interfaces we're trying to create.

.good {background-color:#00CC00; } .bad {background-color:#FF0000;} .iffy {background-color:#FFFF00;} .selectors {float: left; width:10em;} Safari and Safari for the iPhone support all HTML element…

MooTools is a JavaScript framework that focus on being flexible, modular and compact. While still not on par in number of resources with other JavaScript frameworks such as jQuery, the MooTools...

Masonry is a layout plugin for the ever-popular Javascript library jQuery.

This is our sixth installment of Ask SM, featuring reader questions about Web design focusing on HTML, CSS and JavaScript. These entries are not all questions, but rather quick Twitter responses to...