Lessons about CSS (page 4)
The links, tools and tips our engineers and designers share with each other, one “today I learned” at a time.
- lessons shared
- 81
- people sharing
- 21
- database started in
- 2016
Tech Insights· blog.prototypr.io
Aligning SVG icons to text
Shared by
Read on blog.prototypr.io- CSS
- Front End
css-tricks.com
Use this reference every time you need to do anything with flexbox
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.
João Lins
Tech Insights· css-tricks.com
Use this reference every time you need to do anything with flexbox
From css-tricks.com
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.
Shared by
Read on css-tricks.com- CSS
- Flexbox
maxwellito.github.io
Inline SVG <path> animations without JavaScript
Inline SVG animations without JavaScript
Vanessa Barreiros
Tech Insights· maxwellito.github.io
Inline SVG <path> animations without JavaScript
Inline SVG animations without JavaScript
Shared by
Read on maxwellito.github.io- Animation
- CSS
- Svg
Tech Insights· youtube.com
'vertical-align' css property probably doesn't work as you expected, and here's why
Shared by
Read on youtube.com- CSS
smashingmagazine.com
A Strategy Guide To CSS Custom Properties
Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties. In this article, Michael Riethmuller will show you how.
Felipe Farias
Tech Insights· smashingmagazine.com
A Strategy Guide To CSS Custom Properties
From smashingmagazine.com
Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties. In this article, Michael Riethmuller will show you how.
Shared by
Read on smashingmagazine.com- CSS
Tech Insights· gridtoflex.com
Flexbox fallbacks for popular UI solutions that use CSS Grid. CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won’t really work as you expect.
Shared by
Read on gridtoflex.com- CSS
- Css Grid
- Flexbox
hackernoon.com
Understanding Flex-Grow
Let’s face it, laying out a website can sometimes be challenging, especially when some of the content may be dynamic. At times, we may need to add or remove content based on user input, or other conditions. Let’s take for example, the following:
Felipe Farias
Tech Insights· hackernoon.com
Understanding Flex-Grow
From hackernoon.com
Let’s face it, laying out a website can sometimes be challenging, especially when some of the content may be dynamic. At times, we may need to add or remove content based on user input, or other conditions. Let’s take for example, the following:
Shared by
Read on hackernoon.com- CSS
- Flexbox
css-tricks.com
CSS Grid Starter Layouts:
This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and
Lais Varejão
Tech Insights· css-tricks.com
CSS Grid Starter Layouts:
From css-tricks.com
This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and
Shared by
Read on css-tricks.com- CSS
- Css Grid
smashingmagazine.com
Using UI System Fonts In Web Design: A Quick Practical Guide:
Microsoft restarted conversations about system UI fonts with its original Windows Phone design language, which relied heavily on typography in general, and on a font named Segoe in particular. No wonder that the idea of using those fonts is spreading through the web world as well. Whether you want your website to feel more like an app, to draw clearer lines between the content and user interface, or to use modern, beautiful fonts with zero latency, you might be interested in using system UI fonts on your website. But it’s not as easy as it could be. That’s because the CSS support is curiously…
Lais Varejão
Tech Insights· smashingmagazine.com
Using UI System Fonts In Web Design: A Quick Practical Guide:
From smashingmagazine.com
Microsoft restarted conversations about system UI fonts with its original Windows Phone design language, which relied heavily on typography in general, and on a font named Segoe in particular. No wonder that the idea of using those fonts is spreading through the web world as well. Whether you want your website to feel more like an app, to draw clearer lines between the content and user interface, or to use modern, beautiful fonts with zero latency, you might be interested in using system UI fonts on your website. But it’s not as easy as it could be. That’s because the CSS support is curiously…
Shared by
Read on smashingmagazine.com- CSS
- Fonts
Tech Insights· browserhacks.com
Bootstrap uses CSS browser hacks ( in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves
Shared by
Read on browserhacks.com- Bootstrap
- CSS
github.com
Flexbugs: a community-curated list of flexbox issues and cross-browser workarounds for them.
A community-curated list of flexbox issues and cross-browser workarounds for them. - philipwalton/flexbugs
Lais Varejão
Tech Insights· github.com
Flexbugs: a community-curated list of flexbox issues and cross-browser workarounds for them.
From github.com
A community-curated list of flexbox issues and cross-browser workarounds for them. - philipwalton/flexbugs
Shared by
Read on github.com- CSS
- Flexbox
smashingmagazine.com
CSS Grid: Supporting Browsers without Grid
How do you come up with your list of supported browsers? Why would you force a bunch of JavaScript onto those devices? The question of browser support has to be addressed when using any new CSS. In this article, Rachel Andrew will explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?
Lais Varejão
Tech Insights· smashingmagazine.com
CSS Grid: Supporting Browsers without Grid
From smashingmagazine.com
How do you come up with your list of supported browsers? Why would you force a bunch of JavaScript onto those devices? The question of browser support has to be addressed when using any new CSS. In this article, Rachel Andrew will explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?
Shared by
Read on smashingmagazine.com- CSS
Tech Insights· fontfaceobserver.com
Font Face Observer is a fast and simple web font loader. You can use it to load fonts and customise your browser’s font loading behaviour.
Shared by
Read on fontfaceobserver.com- CSS
- Fonts
animista.net
Great site to help you easily create nice css animations
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.
Hugo Bessa
Tech Insights· animista.net
Great site to help you easily create nice css animations
From animista.net
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.
Shared by
Read on animista.net- Animations
- CSS
Tech Insights· jonathan-harrell.com
The Benefits of CSS Variables:
Shared by
Read on jonathan-harrell.com- CSS
Book a call
Found it useful?
Let’s put it to work.
Tell us about your product and the problem in front of you. We’ll bring what we’ve learned on real projects.
Tell us about your product, and we’ll bring what we’ve learned.
Still prefer the good old email? Contact us
