Professional font pairing generator with 40 curated Google Font combinations. Preview fonts in real UI components, customize text and sizes, and copy ready-to-use CSS code instantly.
Free online CSS Grid layout builder and Bento layout generator
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
![[Talk] Kick your CSS up a notch with PostCSS](https://i.ytimg.com/vi/-_gIKdHYP3E/maxresdefault.jpg)
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.
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
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.
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.
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
43 points and 5 comments so far on reddit
7 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
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
ucss - Find unused and duplicate CSS
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…
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...