Contents tagged “CSS”

There are 80 contents with this tag:

  1. screenshot of Our web design tools are holding us back

    Vasilis van Gemert

    Our web design tools are holding us back

    nowadays we can build things with CSS that are impossible to create with our design tools. We have scroll-snap, we have complicated animations, we have all kinds of wonderful interaction, grid, flexbox, all kinds of shapes, and so much more that you won’t find in the drop down menus of your tool of choice. Yet our websites still look and behave like they were designed with photoshop.

  2. screenshot of Layout & Grid in Design Systems

    Brad Frost avatar Brad Frost

    Layout & Grid in Design Systems

    This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a “how to do a 12-column grid in HTML/CSS?” Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.

  3. screenshot of gridless.design

    Donnie D'Amato avatar Donnie D'Amato

    gridless.design

    The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout.

  4. screenshot of Why We're Breaking Up with CSS-in-JS

    Sam Magura

    Why We're Breaking Up with CSS-in-JS

    Thanks for reading this deep dive into runtime CSS-in-JS. Like any technology, it has its pros and cons. Ultimately, it's up to you as a developer to evaluate these pros and cons and then make an informed decision about whether the technology is right for your use case. For us at Spot, the runtime performance cost of Emotion far outweighed the DX benefits, especially when you consider that the alternative of Sass Modules + utility classes still has a good DX while providing vastly superior performance.

  5. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }

  6. Working on my photography site, I wanted to show a few photos from folder in a gallery, and built something cool with just CSS.

    But is it really cool, or just cool once and then annoying?

    Try it live on desktop: nicolas-hoizey.photo/travels/europe/

    youtu.be/VmwJ4KInloQ

    I finally decided the effect on hover was too invasive and difficult to tweak, so I changed for a much more traditional way to show multiple images of a folder: a diaporama with a Ken Burns effect.

    Try it! https://nicolas-hoizey.photo/travels/

  7. When I import my Google Analytics data in #CanIUse, it says only 80 % of my visitors have support for CSS clamp(), while it's 90 % globally. 🤔

    Percentages of users that have browsers supporting CSS clamp().

    I have almost only tech-savvy visitors, so I don't understand. 🤷‍♂️

  8. Is there some sort of shape-outside: self; in CSS, to use an image as it's own shape? 🤔

    I couldn't find it in any docs, but it would be really useful to not declare the same URL twice.

  9. screenshot of HTML and CSS techniques to reduce your JavaScript

    Anthony Ricaud avatar Anthony Ricaud

    HTML and CSS techniques to reduce your JavaScript

    relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards. These solutions generally have the advantage of using less code, thus reducing maintenance efforts for a development team (for example, no need to update the libraries used).

  10. I'm a developer, not a graphic designer, so I genuinely wonder if CSS Grid and Flexbox automated layout and space management would be better for the flexible Web than such rigid artificial grids. I'm really wondering.

    Responsive Grid Design: Ultimate Guide

    This article highlights the most important aspect of the responsive grid and how product designers can adapt grids in their design workflow. medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892

    Image from Tweet

  11. screenshot of spider-pig

    Zach Leatherman avatar Zach Leatherman

    spider-pig

    Get a list of local URL links from a root URL. Works with JavaScript generated content. Can also act as a live-DOM CSS search across multiple files (find all the templates that are using the CSS selector I want to change).

  12. screenshot of The (extremely) loud minority

    Andy Bell avatar Andy Bell

    The (extremely) loud minority

    Always remember that although a subset of the JavaScript community can be very loud, they represent a paltry portion of the web as a whole. This means that when they say something like “CSS sucks”—what they mean is “CSS sucks for a small subset of less than 1 percent of the web”

  13. screenshot of Style Stage and old people of the web

    Christian Heilmann avatar Christian Heilmann

    Style Stage and old people of the web

    Let’s not get too hung up about the past and how much great and good we did back then. And let’s fight that first urge to be snarky and feel a “oh god, not again” in our heads as that is our baggage and not the one of the web community. We’ve dropped the ball somewhere along the line talking exclusively to a receptive audience instead of moving on with our advocacy into academia, enterprise and education.

  14. screenshot of Deep dive CSS: font metrics, line-height and vertical-align

    Vincent De Oliveira avatar Vincent De Oliveira

    Deep dive CSS: font metrics, line-height and vertical-align

    Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

  15. screenshot of Why Is CSS So Weird?

    Miriam Suzanne avatar Miriam Suzanne

    Why Is CSS So Weird?

    If you don't understand why CSS is one of the great strengths of the Web, even if you've been using it for a while, you really have to spend these 15 minutes to watch Miriam Suzanne explain how it came to be, and why it is what it is.

  16. screenshot of Can I email ___ ?

    Rémy Parmentier avatar Rémy Parmentier

    Can I email ___ ?

    Rémy and a few others launched an awesome resource for people who plan to struggle with rich email using HTML and CSS, which are not well supported in most email clients.

  17. screenshot of Generative Art With CSS

    Yuan Chuan avatar Yuan Chuan

    Generative Art With CSS

    Yuan Chuan creates art from everything available in CSS, created < css-doodle /> (a web component for drawing patterns with CSS), and gave a talk at the 5th CSS Conference in Shenzhen on March 30, 2019.

  18. screenshot of CSS Indexes: A listing of every term defined by CSS specs

    CSS Indexes: A listing of every term defined by CSS specs

    This is a non-normative document. It lists every term defined in CSS, as long as it’s marked up correctly for the spec generator. It is intended as a reference document for authors, implementors, and spec authors, to aid in finding the definition for a term hidden somewhere in the haystack of CSS specs.

  19. Responsive Icons with SVG

    There have already been some explorations on responsive SVG images a while back, but when Joe Harrison posted a responsive icon concept on Dribbble and even a working version on a dedicated website, a few people thought this was so wrong they had to make their own version. I must admit I'm one of them… 😉

  20. Where is the Fold?

    OK, on le sait tous, « there is no page fold », mais savoir où est ce non fold peut être carrément utile, alors heureusement qu'il y a des outils qui permettent de visualiser simplement ce que donne un site sur les résolutions les plus courantes.

  21. Laissons IE6 mourir sans style, et ses utilisateurs entrevoir la lumière

    Bon, allez, ça va un peu les enfantillages, mais il est temps de montrer aux utilisateurs de IE6 que non, ils n'utilisent pas un bon navigateur, mais que ce sont plutôt des hordes de développeurs Web qui s'arrachent les cheveux pour qu'ils en aient l'illusion. Alors voilà, j'ai décidé d'aider ses pauvres égarés à revenir dans le droit chemin…

  22. L'ombre d'un doute…

    Un effet graphique assez répandu, au point d'envahir notamment les interfaces graphiques des différents OS, est celui des ombrages. Les ombres permettent de donner du relief aux interfaces, principalement pour mettre en évidence la supperposition de différentes « couches » graphiques.

See all tags.