recentpopularlog in

spaceninja : css   1863

« earlier  
How to create auto-sized columns using CSS Grid and setting a minimum column width.
How to create auto-sized columns using CSS Grid and setting a minimum column width.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
3 days ago by spaceninja
UI Interactions
UI interactions using one element and pure CSS. Because we love UI interactions and CSS!
fridayfrontend  css  cssbasics  animation  hamburger  icons  ui  ux 
3 days ago by spaceninja
Various Methods for Expanding a Box While Preserving the Border Radius
I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.
fridayfrontend  css  cssbasics  border-radius  animation 
3 days ago by spaceninja
Under-Engineered Text Boxen
This is the latest, and not last, in my informal series of posts on under-engineered controls. Generally I am looking at the minimum amount of CSS necessary to style native HTML controls while also retaining or improving accessibility and honoring different user preferences.
fridayfrontend  html  forms  textarea  inputs  cssbasics  css 
3 days ago by spaceninja
Inline validation is problematic
Live inline validation tells users whether what they type is valid as they type. Theoretically it's easier to fix errors as they occur instead of waiting until after form submission. But inline validation is problematic for many reasons. In this article I'll explain all the problems this causes and what to do instead.
fridayfrontend  forms  css  validation  accessibility 
3 days ago by spaceninja
Using Custom Properties to Wrangle Variations in Keyframe Animations
Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would be so nice to drop yet one more dependency and go with vanilla CSS.

Well, I found a way to account for variations within a keyframe animation using nothing but CSS and it’s thanks to custom properties! Let’s learn a little more about how CSS keyframes work and how we can enhance them with CSS and a touch of custom properties.
fridayfrontend  css  cssbasics  animation  keyframes  variables  customproperties 
3 days ago by spaceninja
CSS Grid: Magazine Layouts
Wanted to do some magazine layouts, so I decided to create a Marvel Magazine. I regret everything.

Responsiveness may not be perfect.
fridayfrontend  css  cssbasics  magazine  layout  avengers  movies  grids  cssgrid 
3 days ago by spaceninja
Understanding Specificity in CSS
Specificity in CSS refers to the how browsers determine the importance, relevance, and “seniority” of CSS styles. Here we’ll look at all the CSS styling types and use the company analogy to understand how competing styles get resolved.
fridayfrontend  css  cssbasics  specificity 
3 days ago by spaceninja
Two Browsers Walked Into a Scrollbar
The scrollbar is a humble but productive mechanism that operates as the primary means through which one can traverse a document. But that’s not all a scrollbar can do! This modest workhorse also provides a meaningful hint at how long the document is, pulling double duty as a document progress bar too.

The scrollbar is under attack. Scrolljacking hijacks the default scrolling behavior, breaking the implied contract between document length and scrollbar height.
fridayfrontend  cssbasics  css  html  scroll  scrollbars 
3 days ago by spaceninja
CSS Security Vulnerabilities
Don't read that headline and get worried. I don't think CSS is a particularly dangerous security concern and, for the most part, I don't think you need to worry about it.

But every once in a while, articles tend to circulate and get some attention as to the possibilities of what CSS can do that might surprise or worry you.

Here's a little roundup.
fridayfrontend  security  css  cssbasics 
3 days ago by spaceninja
Can I email… Support tables for HTML and CSS in emails
Like CanIUse.com, but dedicated to support in email clients.
fridayfrontend  email  css  html  support  browsers 
3 days ago by spaceninja
Ghost Buttons with Directional Awareness in CSS
It would surprise me if you'd never come across a ghost button 👻. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. In this article, we’re going to build a ghost button, but that will be the easy part. The fun and tricky part will be animating the fill of that ghost button such that the background fills up in the direction from which a cursor hovers over it.
fridayfrontend  css  buttons  animation  ghost 
3 days ago by spaceninja
Logical Operations with CSS Variables
Very often, while using switch variables (a variable that's either 0 or 1), I wish I could perform logical operations on them. We don't have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function. This article is going to show you what calc() formulas we need to use for each logical operation and explain how and why they are used with a couple of use cases that lead to the writing of this article.
fridayfrontend  css  variables  customproperties  calc  logic 
3 days ago by spaceninja
Null variables in Sass
As you can see, the Sass compiler will ignore the entire property: value; declaration because the value is null. But, if someone customized this before compilation by overriding that default value, the CSS would compile. Here’s an example of how you’d override that default variable.
fridayfrontend  css  cssbasics  sass  null  variables 
9 days ago by spaceninja
caption-side controls the position of a table caption
Today I came across a tweet by CSS-Tricks. It shares the behavior of the CSS property caption-side. I've never seen caption-side before.

The property can be used when you're dealing with HTML tables. Tables could potentially include a caption element. The clue with caption elements is that they have to be the first element in the table.

This rule makes them usually appear in the top region of the table and gives no options for a different position.
fridayfrontend  css  cssbasics  html  tables  caption  caption-side 
9 days ago by spaceninja
Gradient Magic
A Gallery of Fantastic and Unique CSS Gradients
fridayfrontend  css  cssbasics  gradients 
9 days ago by spaceninja
Multiline truncated text with "show more" button (with just CSS)
TL;DR: I built a CSS-only (~ish) solution for multiline truncated text with read more button.
fridayfrontend  css  cssbasics  truncate  text-overflow  ellipsis  line-clamp  clamp 
9 days ago by spaceninja
Overflow And Data Loss In CSS
In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content.
fridayfrontend  css  cssbasics  overflow  layout 
9 days ago by spaceninja
CSS attr() Function
Using attr() function in our stylesheets, we can get any attribute from any HTML element and display it in the ::before or ::after pseudo-element.
fridayfrontend  cssbasics  attr  css  before  after  generated  content 
9 days ago by spaceninja
Recreating Netlify's Neat-o Sliding Button Effect
Have you seen Netlify's press page? It's one of those places where you can snag a download of the company's logo. I was looking for it this morning because I needed the logo to use as a featured image for a post here on CSS-Tricks.

Well, I noticed they have these pretty looking buttons to download the logo. They're small and sharp. They grab attention but aren't in the way.
fridayfrontend  css  cssbasics  buttons 
9 days ago by spaceninja
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG
Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition.

If you saw that awesome color-changing-couch demo going around, this is the full article explaining the technique.
fridayfrontend  css  svg  color  mix-blend-mode  filters 
9 days ago by spaceninja
Styling Links with Real Underlines
But the web is different. Hyperlinks are the defining feature of the internet; and from the internet’s inception, they have been underlined. It’s a universally understood convention. The meaning is crystal clear — an underline means a link.
fridayfrontend  css  cssbasics  underline  text-decoration 
16 days ago by spaceninja
A Glassy (and Classy) Text Effect
The landing page for Apple Arcade has a cool effect where some "white" text has a sort of translucent effect. You can see some of the color of the background behind it through the text. It's not like knockout text where you see the exact background. In this case, live video is playing underneath. It's like if you were to blur the video and then show that blurry video through the letters.

Well, that's exactly what's happening.
fridayfrontend  css  cssbasics  apple  backdrop-filter  clip-path 
16 days ago by spaceninja
Everything I Know About Style Guides, Design Systems, and Component Libraries
For the better part of the last year, I've been investing heavily in front-end development and design. When I started my new role at Hy-Vee, I identified a need for a component library and created it. Since then, I've learned a lot about style guides, design systems, component libraries, and their best practices. This post will be a deep-dive on everything I've learned in the past year.
fridayfrontend  cssbasics  css  styleguide  patternlibrary  designsystem  components 
16 days ago by spaceninja
Nested Gradients with background-clip
I can't say I use background-clip all that often. I'd wager it's hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis, which coincidentally was itself a learning-response post to a post over here by Ana Tudor.
fridayfrontend  css  cssbasics  backgrounds  background-clip  gradients 
16 days ago by spaceninja
Emulate JS onclick with CSS
The onclick event is one of the most HTML Attribute used to allow interaction with elements on our page. How can I manipulate the state of an element by interacting with a specific object and keep that change? We can use the HTML label and input tag to achieve our goal.
fridayfrontend  javascript  css  cssbasics  onclick  label  checkboxes 
16 days ago by spaceninja
Creating a Maintainable Icon System with Sass
One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after) in my CSS. This technique offers several advantages. But there are some drawbacks to this technique as well. We're going to address both of these drawbacks in this article.
fridayfrontend  css  cssbasics  svg  icons  sass  maps 
16 days ago by spaceninja
Where did CSS named colours come from?
So I didn’t manage to track down the actual reason why Sinclair Paint Co. named the white with a slightly reddish hue, “snow”, but I did find out a whole lot of interesting and entertaining things about colours.
fridayfrontend  css  cssbasics  color  x11  history  snow 
16 days ago by spaceninja
The problem with tooltips and what to do instead
Tooltips are not only hard to use, but they're normally totally unnecessary. Learn why that is and what you could do instead.
fridayfrontend  css  cssbasics  javascript  tooltips  accessibility 
16 days ago by spaceninja
Can you rotate the cursor in CSS?
Kinda! There is no simple or standard way to do it, but it's possible. You can change the cursor to different built-in native versions with CSS with the cursor property, but that doesn't help much here. You can also use that property to set a static image as the cursor. But again that doesn't help much because you can't rotate it once it's there.

The trick is to totally hide the cursor with cursor: none; and replace it with your own element.
fridayfrontend  css  cssbasics  cursors 
16 days ago by spaceninja
Tooltips in the time of WCAG 2.1
A review of the history and current state of tooltip accessibility. Or: everything you didn't know you needed to know before making a tooltip.
fridayfrontend  tooltips  css  html  aria  accessibility 
16 days ago by spaceninja
How to get the value of phone notches/environment variables `env()` in JavaScript (from CSS)
Thankfully, Dean Jackson of WebKit came through with a lovely clean solution that seems so obvious once you hear it! You can set the values of an environment variable to a CSS Custom Property and then just read that value in with JavaScript. Brilliant! It’s almost like someone had thought this through originally!
fridayfrontend  css  javascript  ios  iphone  notch  safe-area-inset  env  customproperties  variables 
16 days ago by spaceninja
How to Create a Dark Mode in Sass
A Scalable Method for Color Theming with Developer Experience in Mind
fridayfrontend  css  cssbasics  darkmode  variables 
25 days ago by spaceninja
Creating Lined Paper
My goal of this tutorial is to keep things as plain as possible so that it might be easier for beginning developers, and developers who may not have worked with my specific stack, to dig into quickly. Of course, feel free to use whatever technology, colors, fonts, etc. you like! That being said, let's get started.
fridayfrontend  css  cssbasics  paper  lines 
25 days ago by spaceninja
CSS Units Explained
CSS has several options for which units to use when determining the size of various CSS properties. Learning all your options for CSS units can be key for styling in a way that’s easy to manage and looks great on any screen.
fridayfrontend  css  cssbasics  units 
25 days ago by spaceninja
Footer always at the bottom - Flexbox
Problem: When a web page doesn't have enough content to fit the screen, the footer doesn't stay at the bottom so it ends up looking weird.

Solution: Do the layout using flex columns.
fridayfrontend  css  cssbasics  layout  flexbox  footer 
25 days ago by spaceninja
Exploring prefers-reduced-motion
Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don't want your site to cause motion sickness and dizziness, right?

Luckily, most modern browsers now support prefers-reduced-motion CSS media query. Which means you can skip animations for people who don't want them.
fridayfrontend  css  cssbasics  animation  reduced-motion  accessibility 
25 days ago by spaceninja
Getting Started with CSS Grid: Three Coding Approaches
A step-by-step tutorial on understanding and building two-dimensional layouts using Grid’s flexible syntax.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
25 days ago by spaceninja
Getting Started with CSS Grid: Anatomy
An overview of when to use CSS Grid, all the parts that make it whole, and how to inspect your layouts.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
25 days ago by spaceninja
Bite Sized Basics: Box Sizing - CSS From Scratch
If there’s ever one really important thing to remember when writing CSS is that everything is a box. Regardless of how it looks visually—it’s still a box.
fridayfrontend  css  cssbasics  boxmodel  box-sizing 
25 days ago by spaceninja
CSS Can Do This... And It's Terrifying!
Did you know you can do user tracking of clicks/mouse movements/etc. only with CSS? How about creating a keylogger? Yep, all that's possible with CSS.
fridayfrontend  css  security  keyloggers  tracking  emoji 
25 days ago by spaceninja
Using a Mixin to Take the Math out of Responsive Font Sizes
Responsive Font Size (RFS) is a Sass mixin that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport. RFS makes writing code for fluid type feel a lot like writing native CSS directly in the stylesheets you’re already working in — only without having to wrangle and manage a bunch of media queries.
fridayfrontend  css  sass  mixins  responsive  typography  fluid 
25 days ago by spaceninja
extra.css
A CSS Houdini library for making your site a little more #extra.
fridayfrontend  css  houdini  paint 
25 days ago by spaceninja
The Differing Perspectives on CSS-in-JS
Some people outright hate the idea of CSS-in-JS. Just that name is offensive. Hard no. Styling doesn't belong in JavaScript, it belongs in CSS, a thing that already exists and that browsers are optimized to use. Separation of concerns. Anything else is a laughable misstep, a sign of not learning from the mistakes of the past (like the <font> tag and such.)

Some people outright love the idea of CSS-in-JS. The co-location of templates and functionality, à la most JavaScript frameworks, has proven successful to them, so wrapping in styles seems like a natural fit. Vue's single file components are an archetype here.
fridayfrontend  css  cssbasics  css-in-js 
4 weeks ago by spaceninja
Why You Shouldn't Gray Out Disabled Buttons
When designing disabled buttons, adjust the opacity, not the color. The optimal opacity values will vary based on your background color. But a rule of thumb is to aim for an opacity level of 40% or below. It’s important to make the opacity level low enough, or some users may still view the button as enabled.
fridayfrontend  accessibility  css  cssbasics  disabled  forms 
4 weeks ago by spaceninja
Staggered CSS Transitions
But what if you had several list items, and you wanted them all to move on hover, but each one offset with staggered timing? The trick lies within transition-delay and applying a slightly different delay to each item.
fridayfrontend  css  cssbasics  animation  transitions  transition-delay 
4 weeks ago by spaceninja
Learning CSS by reading specs
Note: after writing this whole thing I realised it went on longer than I expected, so the TL:DR of it is, don’t be wary of reading CSS specifications. They help immensely in understanding CSS. Also, you, yes YOU, can contribute to the development of CSS as well.
fridayfrontend  css  cssbasics  specs  learning 
4 weeks ago by spaceninja
Reducing Motion to Improve Accessibility
Hey friends! In this post, I am going to walk you through a newer media query (to me): prefers-reduced-motion. My major takeaways from the web accessibility perspective: Be careful with your animations; Be careful with your gifs; Use prefers-reduced-motion; Allow a user to control reduce motion;
fridayfrontend  css  cssbasics  accessibility  reduced-motion 
4 weeks ago by spaceninja
Sub-pixel rendering and borders
It is highly probable that the reason using thin seems to resolve the disappearing border issue is that each browser resolves the keyword in a manner that fits its own rendering engine’s calculations. So even though thin and 1px should have the same result, using thin is a better option.
fridayfrontend  css  sub-pixel  borders  browsers 
4 weeks ago by spaceninja
Handling Unused CSS In Sass To Improve Performance
Do you know the impact unused CSS has on performance? Spoiler: It’s a lot! In this article, we’ll explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation.
fridayfrontend  css  performance  sass  unused 
4 weeks ago by spaceninja
Contextual Utility Classes for Color with Custom Properties
In CSS, we have the ability to access currentColor which is tremendously useful. Sadly, we do not have access to anything like currentBackgroundColor, and the color-mod() function is still a ways away. With that said, I am sure I am not alone when I say I'd like to style some links based on the context, and invert colors when the link is hovered or in focus. With CSS custom properties and a few, simple utility classes, we can achieve a pretty powerful result, thanks to the cascading nature of our styles:
fridayfrontend  css  customproperties  variables  utility  color-mod  currentcolor 
4 weeks ago by spaceninja
Ooops, I guess we're full-stack developers now, by Chris Coyier
It's cool to see the tech around our job evolve to the point that we can reach our arms around the whole thing. It's worthy of some concern when we feel like complication of web technology feels like it's raising the barrier to entry. That happens sometimes and it's not great. But it's also worthy of cheer when web technology becomes simple enough that people can build things from start to finish all by themselves. That's pretty cool.

While we're being all productive and amazing, let's just remember that doing a good job is everybodies job.

- Good UX is everyone's job
- Good performance is everyone's job
- Good security is everyone's job
- Good accessibility is everyone's job
- Doing right by the people that use your website is everyone's job

Even if you aren't writing the code that directly affects any of those things, you care about them and fight for them to be handled well.
fridayfrontend  video  css  javascript  react  jamstack  serverless  frontend  programming 
4 weeks ago by spaceninja
This Ain’t Disney: A practical guide to CSS transitions and animations
Oh, animation… we want to get it right so badly, don’t we? I mean, does anybody really enjoy a stiff, snappy UI? Can anyone admit they’re not delighted when a component slides into view and appears to slow down before coming to a complete stop? There’s something nice about that. So what is that special touch, and why is it so hard to reproduce?
fridayfrontend  css  cssbasics  animation 
5 weeks ago by spaceninja
The Sidebar: Every Layout
The Sidebar layout is named for the element that forms the diminutive sidebar: the narrower of two adjacent elements. It is a quantum layout, existing simultaneously in one of the two configurations—horizontal and vertical—illustrated below. Which configuration is adopted is not known at the time of conception, and is dependent entirely on the space it is afforded when placed within a parent container.
fridayfrontend  css  cssbasics  layout  sidebars  flexbox 
5 weeks ago by spaceninja
Custom Underlines with SVG
I was browsing the web and an interesting effect caught my eye on a website. It’s a custom link underline effect that is using hardcoded SVG.
fridayfrontend  css  cssbasics  svg  underline 
5 weeks ago by spaceninja
CSS :empty Selector
Often, we want to style elements that contain content. How about when an element has no children or text at all? Easy, you can use the :empty selector 🤩
fridayfrontend  css  cssbasics  empty 
5 weeks ago by spaceninja
Can you nest @media and @support queries?
Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.
fridayfrontend  css  cssbasics  supports  mediaqueries 
5 weeks ago by spaceninja
Writing Modes And CSS Layout
An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew believes understanding writing modes is so important.
fridayfrontend  writing-mode  layout  css  block  inline  cssgrid  flexbox 
5 weeks ago by spaceninja
Top 10 most deadly CSS mistakes made by new and experienced developers
What follows are the top 10 most deadly mistakes I’ve seen engineers make throughout my consulting engagements, listed in increasing order of severity. The more serious the mistake, the harder it is to recover from without a complete re-write of the codebase.
fridayfrontend  css  cssbasics  seo  px  semantics  mobile 
6 weeks ago by spaceninja
Flexbox and padding
If you have tried to apply padding to a flex container with an horizontal overflow behaviour of scroll, you might notice that the padding is not applied to the flex end side of your container.
fridayfrontend  css  cssbasics  flexbox  padding 
6 weeks ago by spaceninja
Creating Utility Classes with Design Tokens using Sass
After creating a set of Design Tokens for my clients Design System I looked at how best we can quickly create some additional utility classes for the various “exceptions to the rule” mentioned above. We needed something that would work automatically, programatically, and with as little human interaction as possible once it was set up.
fridayfrontend  css  cssbasics  sass  utility  tokens 
6 weeks ago by spaceninja
How to add Flexbox fallback to CSS Grid
I shared how to build a calendar with CSS Grid in the previous article. Today, I want to share how to build a Flexbox fallback for the same calendar.
fridayfrontend  css  cssbasics  grids  cssgrid  layout  flexbox  fallback 
6 weeks ago by spaceninja
Bringing CSS Grid to WordPress Layouts
So, this is great, and knowing that we can do so many more things today than we could compared to a few years ago probably makes you want to give Grid a try, at last. If you are working on a WordPress project, you're back facing the two options mentioned above: do we start from scratch and manually coding a template, or is there something that can give us a little help? Luckily, there is a plugin that might interest you, one that we have created with a dual goal in mind:
fridayfrontend  css  cssgrid  grids  layout  wordpress  plugins 
6 weeks ago by spaceninja
CSS prefers-reduced-motion Media Query
One of the CSS media queries I've recently discovered is prefers-reduced-motion, a media query for users sensitive to excessive motion. Let's use prefers-reduced-motion to show motion to all users but none to sensitive users:
fridayfrontend  css  cssbasics  reduced-motion  accessibility 
6 weeks ago by spaceninja
How much specificity do @rules have, like @keyframes and @media?
I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?
fridayfrontend  css  cssbasics  specs  at-rules 
6 weeks ago by spaceninja
The Real Dark Web: We rarely acknowledge the vast majority of web developers
The vast majority of respondents are still using Sass and vanilla CSS? Wow! This made me pause and think. Because I feel there's an analogy here between that unseen dark matter, and the huge crowd of web developers who are using such "boring" technology stacks. These developers are quietly building their sites and apps, day in, day out. But they are rendered invisible as they are not making use of the cutting-edge technologies that the 1% of the bleeding edge love to talk about.
fridayfrontend  culture  development  programming  technology  javascript  css  sass 
6 weeks ago by spaceninja
Branching Out from the Great Divide
I like the term Front-End Developer. It's encapsulates the nature of your job if your concerns are: Building UIs for web browsers; The spectrum of devices and platforms those web browsers run on; The people who use those web browsers and related assistive technology. The breadth of knowledge for all-things front-end development has gotten super deep. I've found that front-end developers that have stretched themselves to the point they are thinking of themselves as full-stack developers more and more. I think that's kinda cool and empowering, but it doesn't mean that everyone needs to go that wide.
greatdivide  culture  fridayfrontend  css  javascript  development  titles  roles 
6 weeks ago by spaceninja
Grids All The Way Down by Rachel Andrew
Two years have passed since Grid Layout launched across all major browsers. However, as it was landing and becoming available for us to use in production, work on the spec continued. Due to this work, Level 2 of the Grid Specification contains the most wanted feature as people come to grips with the spec — subgrid.

In this talk, Rachel will explain what subgrid is, the problems that it will solve for web designers and developers, and the things that it will make possible. She'll also take a look at some of the other things that are coming to CSS Layout, and how you can get involved in pushing all of these new things forward.
fridayfrontend  video  css  grids  cssgrid  layout  subgrid 
6 weeks ago by spaceninja
How to make your HTML responsive by adding a single line of CSS
In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen. And the most beautiful part: the responsiveness will be added with a single line of CSS.
fridayfrontend  css  cssbasics  responsive  grids  cssgrid  layout 
7 weeks ago by spaceninja
Multi-Line Truncation with Pure CSS
Truncating a single line of text if is fairly straightforward. Truncating multiple lines is a bit harder. There is a way which is very clever and something I'd call a bonafide CSS trick. We somehow failed to cover it properly in our canonical post on line clamping, so I'll cover it here then add it to that post. I first saw this trick on the now-dead Mobify blog, and more recently covered by Natalia Onischuk on HackingUI.
fridayfrontend  css  clamp  truncate  line-clamp  ellipsis  cssbasics 
7 weeks ago by spaceninja
Absolutely position element that matches left margin using padding and CSS calc
Adjust the width of this window. This box has a max-width of 500px, while the title above is absolutely positioned. But they always line up. This is accomplished by using CSS Calc to calculate the padding-left of the text box above.
fridayfrontend  css  layout  absolute  position  calc  cssbasics 
7 weeks ago by spaceninja
Choosing tools
There was a fun tweet circulating around yesterday: You're working on a frontend project. You can install max. 5 dependencies. Which ones do you pick?
fridayfrontend  tools  html  css  javascript  architecture  cssbasics 
7 weeks ago by spaceninja
Responsive Iframes
The best trick for responsive iframes, for now, is making an aspect ratio box. First you need a parent element with relative positioning. The iframe is the child element inside it, which you apply absolute positioning to in order to fill the area. The tricky part is that the parent element becomes the perfect height by creating a pseudo-element to push it to that height based on the aspect ratio. The whole point of it is that pushing the element to the correct size is a nicer system than forcing a certain height. In the scenario where the content inside is taller than what the aspect ratio accounts for, it can still grow rather than overflow.
fridayfrontend  html  css  iframes  responsive  aspectratio  cssbasics 
7 weeks ago by spaceninja
How to build a calendar with CSS Grid
Building a calendar with CSS Grid is actually quite easy. I want to show you how to do it.
fridayfrontend  css  grids  cssgrid  layout  calendars  cssbasics 
7 weeks ago by spaceninja
Don't comma-separate :focus-within if you need deep browser support
That's nice, but it causes a tricky problem. Browsers ignore entire selectors if it doesn't understand any part of them. So, if you're dealing with a browser that doesn't support :focus-within then it would ignore the CSS example above, meaning you've also lost the :hover state.
fridayfrontend  css  focus  focus-within  support  cssbasics 
7 weeks ago by spaceninja
Form design: from zero to hero all in one blog post
This guide is quick and to the point—a whistle stop tour of the knowledge I’ve accrued in my years of form design. It’s not exhaustive, but rather an entry point, designed to save you time on the basics.
fridayfrontend  forms  css  html  design  accessibility  cssbasics 
7 weeks ago by spaceninja
CSS :not() with Multiple Classes
Say you want to select an element when it doesn't have a certain class. That's what the :not() selector is for.

body:not(.home) {...}

But what if there are multiple classes you want to avoid?
fridayfrontend  css  not  cssbasics 
7 weeks ago by spaceninja
Intrinsically Responsive CSS Grid with minmax() and min()
CSS Grid is now widely supported across modern browsers, and there are lots of folks doing great work with it! But unfortunately, one of the most useful features of the specification doesn’t quite work as advertised. Specifically, it’s not possible to create an “intrinsically responsive grid” — that is, a grid that is responsive based on the size of its container, without the use of media queries. But thanks to some standards that are now available in some browsers and on their way to others, we can fix that!
fridayfrontend  css  layout  grids  cssgrid  responsive  minmax  min 
7 weeks ago by spaceninja
Writing Tests For CSS Is Possible! Don’t Believe The Rumors, by Gil Tayar
You know that fear. The fear of changing something in your CSS. Deleting a CSS rule is a lesson in getting yourself to calm down, telling yourself that it’s OK, you are absolutely sure that deleting that rule won’t change anything.

And only manual testing can assuage that fear. And yet, even then, you’re still frightened that you haven’t checked _everything_, and that you missed something. Not to mention that it’s amazingly boring.

Never fear again! Testing your CSS code, testing the visual aspects of your code, is now possible, and I will show how. A slew of new Saas tools have come to the forefront which enable us to write tests that check that everything is the same that it was (even if we moved from BEM to CSS-in-JS).

So grab that keyboard, refactor your CSS, because writing tests for it is now possible!
fridayfrontend  video  testing  css  regression 
7 weeks ago by spaceninja
« earlier      
per page:    204080120160

Copy this bookmark:





to read