Bookmarks tagged with #css.
Show all
Show all
CSS Utility Classes and "Separation of Concerns"
Over the last several years, the way I write CSS has transitioned from a "semantic" approach to something more like what people call "functional CSS."
In this post I explain how I got to this point and share some of the lessons and insights I've picked up along the way.
Saved
on: 2019-11-07
ITCSS: Scalable and Maintainable CSS Architecture - Xfive
ITCSS is an answer to the question: How do I make my CSS scalable and maintainable? It’s a concern for every front-end developer.
Tags:
#css
Saved
on: 2019-10-18
Editorial Design Patterns With CSS Grid And Named Columns — Smashing Magazine
By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. In this article, Rachel Andrew is going to demonstrate an approach to this kind of editorial design, which builds on a few techniques. In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns.
Saved
on: 2019-10-06
Managing Flow and Rhythm with CSS Custom Properties ◆ 24 ways
Andy Bell rings out a call for a more flexible method of achieving consistent vertical rhythm across components within a page. Using a technique of CSS custom properties to establish spacing inherited through the cascade, you can make sure your choir are all singing from the same song sheet.
Saved
on: 2019-10-02
Menus with "Dynamic Hit Areas" | CSS-Tricks
Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should
Saved
on: 2019-09-24
Using layered box-shadows to create smoother & sharper shadows | Tobias Ahl
With a simple CSS trick, we can get fine-tuned control over how shadows are rendered, and create richer and more realistic 3D effects
Tags:
#css
Saved
on: 2019-09-20
Two Browsers Walked Into a Scrollbar | Filament Group, Inc.
Read this page on the Filament Group website
Tags:
#css
Saved
on: 2019-09-12
Flexbox: How Big Is That Flexible Box? — Smashing Magazine
In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be? In this article, Rachel Andrew will explain some of the finer points of how Flexbox works out how big the flex items are. It can seem a little academic, however, taking some time to understand the way this works can save you huge amounts of time when using Flexbox in your layouts. If you and your design don’t agree with what Flexbox thinks is best then you can take control back by setting your own flex-basis.
Tags:
#css
Saved
on: 2019-08-27
CSS Cheat Sheets! - DEV Community ????
We all know that Peter Griffin Family Guy gif of him unable to work some blinds. This gif is always a...
Saved
on: 2019-08-14
The CSS background-image property as an anti-pattern
The CSS background-image property allowed us to do some amazing things, but in most cases, it's time to leave it behind.
Saved
on: 2019-07-28
The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.
Read this page on the Filament Group website
Saved
on: 2019-07-24
Frontend Design, React, and a Bridge over the Great Divide
Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products' user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development.
Of course "frontend designer" may or may not be the right title for it. Some others t
Saved
on: 2019-07-19
Extract critical CSS | web.dev
Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.
Saved
on: 2019-06-05
The Sass Ampersand | CSS-Tricks
The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a
Saved
on: 2019-05-28
CSSFX - Beautifully simple click-to-copy CSS effects
Diese Website steht zum Verkauf! cssfx.dev ist die beste Quelle für alle Informationen die Sie suchen. Von allgemeinen Themen bis hin zu speziellen Sachverhalten, finden Sie auf cssfx.dev alles. Wir hoffen, dass Sie hier das Gesuchte finden!
Saved
on: 2019-05-08
CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
Creating a masonry (or mosaic) layout with flexbox produces a grid with a seemingly shuffled and obscure order, but we can achieve a natural ordering by using :nth-child() and the order property
Saved
on: 2019-04-17
How To Align Things In CSS — Smashing Magazine
There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why. She will take a look at the different alignment methods. Instead of providing a comprehensive guide to each, Rachel explain a few of the sticking points people have and point to more complete references for the properties and values. You can go a long way by understanding the fundamental things about how the methods behave, and then need a place to go look up the finer details in terms of how you achieve the precise layout that you want.
Saved
on: 2019-03-29
Use Cases For Flexbox — Smashing Magazine
In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at? Today, Rachel Andrew is going to spend some time thinking about what the use cases for Flexbox really are, given that you now have CSS Grid Layout, giving some suggestions for what you might use when and a way to decide.
Saved
on: 2019-03-05
Breaking Boxes With CSS Fragmentation — Smashing Magazine
Rachel Andrew has been digging around in the CSS Fragmentation spec, and finding browser support is somewhat fragmented. In this article, she explains what fragmentation is, why you might want to use it, and what the state of browser support is. She’ll also show you the current state of browser support and some of the things you can do to get it working as well as it can in your multicol and print projects.
Tags:
#css
Saved
on: 2019-03-01
The Flexbox Holy Albatross | HeydonWorks
A blog post from the HeydonWorks.com blog
Saved
on: 2019-01-14
Axiomatic CSS and Lobotomized Owls · An A List Apart Article
Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational m…
Tags:
#css
Saved
on: 2019-01-10
https://www.sarasoueidan.com/slides/SVG-Filters-Crash-Course.pdf
Saved
on: 2018-11-28
Why can’t we use Functional CSS and regular CSS at the same time? | CSS-Tri
Harry Nicholls recently wrote all about simplifying styles with functional CSS and you should definitely check it out. In short, functional CSS is another
Tags:
#css
Saved
on: 2018-11-20
Animated Grid Previews | Codrops
Today we'd like to share another CSS grid-powered template with you. The idea is to show a navigation and some scattered
Saved
on: 2018-11-09
In Defense of Utility-First CSS | frontstuff
“Favor composition over inheritance”. This piece of wisdom from Design Patterns, one of the most influential software engineering books, is the foundation of...
Tags:
#css
Saved
on: 2018-11-09
Spectre.css CSS Framework
Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Saved
on: 2018-11-08
Cutting out the inner part of an element using clip-path | CSS-Tricks
The following is a guest post by Ana Tudor. Perhaps you know Ana from her amazing work combining code, math, and art. Here, she shows us how we can change the
Tags:
#css
Saved
on: 2018-11-08
Tailwind: style your site without writing any CSS! - Julia Evans
Saved
on: 2018-11-02
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
Saved
on: 2018-10-14
BEM - A naming philosophy that just works
Il documento presenta la filosofia di naming BEM (Block Element Modifier) per la scrittura di CSS, mettendo in evidenza i vantaggi dell'uso di questa metodologia per creare componenti riutilizzabili e gestire siti complessi. BEM aiuta ad evitare problemi di copia/incolla e semplifica il refactoring del codice, stabilendo regole per la nomenclatura che separano blocchi, elementi e modificatori. La struttura di nomi proposta facilita la comprensione e l'organizzazione del codice CSS, rendendolo più gestibile e meno soggetto a conflitti.
Saved
on: 2018-10-09
CSS Grid in IE: CSS Grid and the New Autoprefixer | CSS-Tricks
In Part 1 of this series, I debunked a few misconceptions that many people have around the Internet Explorer (IE) implementation of CSS grid. This article
Saved
on: 2018-07-12
More Unicode Patterns | CSS-Tricks
Creating is the most intense excitement one can come to know.
Saved
on: 2018-06-15
Easier scrollytelling with position sticky
Leaning on CSS to simplify the process.
Saved
on: 2018-06-13
Where Lines Break is Complicated. Here's all the Related CSS and HTML. | CSS-Tricks
Say you have a really long word within some text inside an element that isn't wide enough to hold it. A common cause of that is a long URL finding it's way
Saved
on: 2018-05-16
Page Transitions for Everyone | CSS-Tricks
As Sarah mentioned in her previous post about page transition using Vue.js, there is plenty of motivation for designers and developers to be building page
Saved
on: 2018-05-15
The Relative Units of CSS - Pine
The units in CSS are critical as we work with these all the time. You can’t build anything without using these so we must know the units properly.
Tags:
#css
Saved
on: 2018-05-14
A Guide To The State Of Print Stylesheets In 2018 — Smashing Magazine
Printing pages directly from the browser is an experience that can lead to frustration with enormous images being printed out. We have covered print stylesheets in the past here on Smashing Magazine, but in this article, Rachel Andrew takes a look at the state of printing from the browser today. She will show you how you should include print styles in your web pages, and look at the specifications that really come into their own once printing.
Tags:
#css
Saved
on: 2018-05-02
10 Reasons to Love (and Use) Gradients in 2018 | Webdesigner Depot
After years of flat, material and completely minimal styles, the gradient has made a comeback. Everywhere you look, designers are using color fades to add
Saved
on: 2018-04-27
Radial Gradient Recipes | CSS-Tricks
Radial gradients are pretty dang cool. It's amazing we can paint the background of an element with them so easily. Easily is a relative term though. It's
Tags:
#css
Saved
on: 2018-04-27
Native-Like Animations for Page Transitions on the Web | CSS-Tricks
Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile
Saved
on: 2018-04-24
DasSur.ma – Layers and how to force them
The answer is will-change: transform. Or is it?
Tags:
#css
Saved
on: 2018-04-20
5 Takeaways From Using Tailwind CSS In Real Projects | Nick Basile
A roundup of the lessons learned using Tailwind CSS in real projects.
Saved
on: 2018-03-16
A Book Apart, Get to Know Rachel Andrew
Up next our Meet the Authors series, Rachel Andrew with some advice on getting started in design and development. Read on for more.
Saved
on: 2018-01-19
An Event Apart News: CSS Grid Layout by Rachel Andrew—An Event Apart video
Saved
on: 2017-12-28
An Introduction to Scrollama.js
The what, why, and how to use scrollama.js for your next scrollytelling story.
Saved
on: 2017-11-29
Eric's Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5
A method to create labeled wireframe-style boxes on top of existing page elements using a potpourri of CSS and tiny bits of HTML5.
Tags:
#css
Saved
on: 2017-11-28
Flexbox and Grids, your layout’s best friends
We decided to debunk the myths around Flexbox & Grids in order to show you the power of these two technologies working together.
Saved
on: 2017-11-07
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apar
You may not think about it often, but tables are meant to be read. In this excerpt from Chapter 2 of his book, Web Typography, Richard Rutter explains how typography can improve the UX of our rows …
Saved
on: 2017-11-02
From Bootstrap to CSS Grid – Times Open
Despite many clever hacks and creative workarounds, there hasn’t been a simple answer for creating layout on the web. From misusing tables, to over-engineering simple floats that push around content…
Saved
on: 2017-10-26
Don't Overthink It (Flexbox) Grids | CSS-Tricks
Four years ago I posted "Don't Overthink it Grids" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid.
Tags:
#css
Saved
on: 2017-10-17
Rebuilding slack.com – Several People Are Coding
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a variety of teams, departments, and agencies. We implemented a redesign while overhauling all the under-the-hood code. Our aim was to address a few…
Saved
on: 2017-10-13
Comparing CSS Resets
This pen is a demo by scotch.io to demonstrate different CSS resets and how they are used....
Saved
on: 2017-10-12
10 SASS (SCSS) mixins you should be using in your projects | Engage
Save yourself time and stop repeating so much code, with help from a set of 10 SCSS 'mixins' taken from the Engage Front End Baseplate.
Tags:
#css
Saved
on: 2017-09-21
Penthouse 1.0 — Official Release!?? – Jonas Ohlsson Aden – Medium
Penthouse is the first and best free critical css generator out there, helping you improve your speed index — time to first render. Inspired by Facebook’s awesome open source contribution with React…
Tags:
#css
Saved
on: 2017-09-18
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Ge
The latest news about Opera web browsers, tech trends, internet tips.
Saved
on: 2017-04-21
2016 Favorites | CSS-Tricks
As the year closes, it's good to reflect on all of the things we as a community have built, contemplated, and contributed to. Here are some of the things we
Saved
on: 2017-03-27
Case Study: My First Practical CSS Grid Layout - Cloud Four
A challenge cropped up in one of our projects that served as a simple, self-contained example of how grid layout can make things easier.
Saved
on: 2017-03-27
Animista - On-Demand CSS Animations Library
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
Tags:
#css
Saved
on: 2017-03-17
The Complete Guide to CSS Grid | Codrops CSS Reference
CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web. Grids
Saved
on: 2017-03-02
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
Saved
on: 2017-02-06
CSS Grid – Table layout is back. Be there and be square. | Web | Google
CSS Grid is a new layout system for the web.
Saved
on: 2017-02-01
Print styles – A List Apart Sidebar – Medium
I really wanted to make sure that the print styles for Resilient Web Design were pretty good — or at least as good as they could be given the everlasting lack of support for many print properties in…
Saved
on: 2016-12-28
CSS Writing Modes ◆ 24 ways
Jen Simmons points us in the direction of a useful but less well known CSS feature that becomes increasingly important when designing page layouts for a global audience. Like the wise men following the Star of Bethlehem, sometimes the best direction is given to us, not chosen.
Tags:
#css
Saved
on: 2016-12-23
Flexbox Froggy - A game for learning CSS flexbox
A game for learning CSS flexbox
Saved
on: 2016-12-22
CSS Reference - A free visual guide to the most popular CSS properties.
CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
Saved
on: 2016-11-25
Material Design Lite
A front-end template that helps you build fast, modern mobile web apps.
Saved
on: 2016-11-24
@supports will change your life | Charlotte Jackson, Front-end developer
Saved
on: 2016-11-04
CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane,
High-level advice and guidelines for writing sane, manageable, scalable CSS
Saved
on: 2016-10-14
You Might Not Need JavaScript
Examples of common UI elements and interactions with HTML and CSS alone.
Saved
on: 2016-10-12
Principles we use to write CSS for modern browsers
Principles we use to write CSS for modern browsers - index.md
Saved
on: 2016-09-22
Learn CSS Flexbox in 3 Minutes – Learning New Stuff – Medium
In this post you’ll learn the most important concepts of the flexbox layout in CSS, which will make your life easier if you find yourself struggling with CSS layouts from time to time. We’ll only…
Saved
on: 2016-08-29
The Illusion Of Life: An SVG Animation Case Study – Smashing Magazine
How far can we push SVG animation? At the time, designer Chris Halaska and Michael Ngo were colleagues working on an illustration-heavy campaign website. While aesthetically pleasing, the designs lacked the required “oomph” that all creatives search for. Their idea was to create a data-driven process that enables designers to quickly prototype animations from static illustrations. In this article, Michael will take a look at how you can use SVGs to create seemingly complex animations from simple illustrations.
Saved
on: 2016-07-27
Material Kit 3 by Creative Tim
Most complex and innovative UI Kit Made by Creative Tim. Check our latest Freebie Bootstrap 5 UI Kit.
Saved
on: 2016-07-15
MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOC
A primer on the oft-confusing BEM notation for CSS
Saved
on: 2016-07-15
CSS for People Who Hate CSS | Paul C Pederson
CSS can quickly become an unmanageable nightmare of important rules and overly-specific selectors, don't let it.
Saved
on: 2016-06-16
CSS at BBC Sport (Part 1) — Medium
I promised I’d write a blog with more details so here goes. When I started writing this I realised there was lot to say so I’m going to split this two blog posts which covers how we’re approaching…
Saved
on: 2016-06-13
Colors - A nicer color palette for the web.
Colors.css - A nicer color palette for the web.
Saved
on: 2016-06-07