spaceninja + fridayfrontend   1173

Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid
It can be difficult to achieve complex yet flexible and responsive grid layouts. Various techniques have evolved over the years but most, such as faux columns, were hacks rather than robust design options.
fridayfrontend  css  cssbasics  layout  cssgrid  grids  flexbox  floats  progressive  enhancement 
2 days ago by spaceninja
Customise radio buttons without compromising accessibility
Today, we’re going to cover the different methods of hiding input elements, their effects on accessibility and how to ensure they remain navigable via keyboard after being styled. There will also be a small bonus section on layout, because after making our radio buttons pretty, we want them to go into the right place.
fridayfrontend  css  cssbasics  accessibility  forms  radio 
2 days ago by spaceninja
Creating sliding effects using sticky positioning
Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!
fridayfrontend  css  cssbasics  position  sticky 
2 days ago by spaceninja
CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS
In this article, we’ll look at two methodologies for naming things in CSS. Both methods were created to improve the development process for large sites and large teams; however, they work just as well for teams of one. Whether you choose one or the other, neither, or a mix of both is up to you. The point of introducing them is to help you to think through approaches for writing your own CSS.
fridayfrontend  css  cssbasics  bem  atomic 
2 days ago by spaceninja
Updating a CSS Variable with JavaScript
You can update a CSS Variable using the JavaScript setProperty method.
fridayfrontend  javascript  cssbasics  css  customproperties  variables  setproperty 
2 days ago by spaceninja
CSS Quick Tip: Using Outline
The outline property in CSS is an interesting and rarely used one. We met with it in almost every project through the browser’s native focus state formatting but nothing more.
fridayfrontend  css  cssbasics  outline 
2 days ago by spaceninja
CSS specificity and the cascade
A recent Twitter poll has caused a bit of a storm and there’s something important to take away from it: there’s a gap in some folk’s CSS skillsets, so I’ll try to help y’all fill it in. Let’s not dwell on on the hot drama and instead, dive in and have some fun by learning.
fridayfrontend  css  cssbasics  cascade  specificity 
2 days ago by spaceninja
The Cascade and Other Essential Unessentials
So to anyone that didn’t get the question right, or wouldn’t know how to answer it: don’t feel bad but don’t avoid the topic either. It’s fundamental knowledge, one of those foundational concepts that makes your life as a front-end developer much easier. Yes—even if you are taking a styled components approach. To those of us who understand the topic, let’s consider what we can do to do a better job of explaining these core concepts to people who are less experienced with them.
fridayfrontend  css  cascade  css-in-js  drama 
2 days ago by spaceninja
The Importance Of Manual Accessibility Testing
Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process.
fridayfrontend  accessibility  testing 
2 days ago by spaceninja
Houdini Spellbook
What this means is that we'll finally be able to Extend CSS via JavaScript. This is important because it's currently not possible to extend CSS with JavaScript, only write JavaScript that mimics CSS. Actually polyfilling CSS, or introducing new features (like CSS Grid), is hard-to-impossible to do, doubly so in a way that's not terrible for performance. CSS Houdini will let authors tap in to the actual CSS engine, finally allowing us to extend CSS, and do so at CSS speeds
fridayfrontend  css  javascript  houdini  api 
2 days ago by spaceninja
An Oral History of Web Standards With Jeffrey Zeldman
Designer, author, speaker, publisher, podcaster and longtime friend Jeffrey Zeldman joins the show to reminisce on the origin of the Web Standards Project and it's legacy 20 years on.
history  standards  zeldman  podcasts  fridayfrontend  css 
2 days ago by spaceninja
Using a modern web to recreate 1980s horribly slow & loud loading screens, by Remy Sharp
Why invest time in building fast website, when we can have fun building slow old retro machines using JavaScript. The end result is a mix of Web Audio, canvas API, cameras, audio jacks, binary, typed arrays, blobs, history of computing and a lot of questionable JavaScript.
fridayfrontend  video  css  retro  javascript  audio  canvas  cameras  history 
5 days ago by spaceninja
Create your design system, part 6: Buttons
Buttons are the most important interactive components used by the users to perform actions. Designing buttons means creating a toolkit that allows interaction with an interface. In this final article of our series on design systems, we’ll take a look at how to design a system of buttons in CSS.
fridayfrontend  css  cssbasics  design  designsystem  styleguide  patternlibrary  buttons 
9 days ago by spaceninja
Describing aria-describedby
When building inclusive experiences, developers may need to look beyond the native accessibility of HTML elements and use ARIA attributes to augment the semantics of the HTML language. One such ARIA attribute, aria-describedby, provides the means to associate an element with the text of another object, or objects, in the document. When properly used, this attribute can provide the necessary information to assist in creating inclusive user experiences.
fridayfrontend  cssbasics  aria  accessibility  aria-describedby 
9 days ago by spaceninja
Not the css specificity guide you deserve, but the one you need right now.
fridayfrontend  css  cssbasics  specificity  batman 
9 days ago by spaceninja
How to use Media Queries in JavaScript with matchMedia
When it was first introduced, responsive design was one of the most exciting web layout concepts since CSS replaced tables. The underlying technology uses media queries to determine the viewing device type, width, height, orientation, resolution, aspect ratio, and color depth to serve different stylesheets. If you thought responsive design was reserved for CSS layouts only, you’ll be pleased to hear media queries can also be used in JavaScript, as this article will explain.
fridayfrontend  css  cssbasics  javascript  mediaqueries  matchmedia 
9 days ago by spaceninja
Accessible Breadcrumb Navigation
Examples of a breadcrumb navigation using aria-label to provide an accessible name, and aria-current to indicate the currently active link.
fridayfrontend  css  cssbasics  html  accessibility  breadcrumbs  navigation  aria 
9 days ago by spaceninja
Don’t use “click here”
Using vague and uninformative phrasing for hyperlinks will have several adverse effects on your website: Decrease in overall usability; Decrease in overall accessibility; Decrease in search engine performance and content find-ability. These are huge issues, so I’ll address them individually before providing better options.
fridayfrontend  cssbasics  html  accessibility  usability 
9 days ago by spaceninja
Heading structures are tables of contents
The heading structure of a web page is like its table of contents. It gives people who can’t see your page a way to navigate it without reading everything.
fridayfrontend  html  cssbasics  accessibility  headers 
9 days ago by spaceninja
Create your design system, part 5: Icons
In this article, we’ll take a look at how to include icons in your design system, with some additional CSS techniques to customize them according to your needs.
fridayfrontend  css  cssbasics  design  designsystem  styleguide  patternlibrary  icons  svg 
9 days ago by spaceninja
Is placeholder text a sufficient accessible label for form fields
In a mobile first world many websites use placeholder text to save space. Let's test to see if its a good idea.
fridayfrontend  css  cssbasics  html  accessibility  forms  placeholders  labels 
9 days ago by spaceninja
UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)
This is the second part in a series on enhancing mobile forms for users. In the first part, we saw some general guidelines on how to improve form readability for mobile users, label placement and size, interaction cost and dealing with errors.
fridayfrontend  css  cssbasics  html  forms  mobile  ux  accessibility 
9 days ago by spaceninja
Semantic HTML Sketchnote
If you’ve ever been confused when folks use the term “semantic HTML”, I hope this #sketchnote helps clear it up.
fridayfrontend  css  cssbasics  html  semantics 
9 days ago by spaceninja
Designing A Textbox, Unabridged
Building websites is hard. Let’s explore the creation of a component from start to finish, in the context of an exaggerated reality where projects aren’t flawless.
fridayfrontend  css  cssbasics  forms  textarea  inputs  design  html 
9 days ago by spaceninja
Create your design system, part 3: Colors
In this article, we’ll take a look at how to set a color system in CSS, and what are the best practices to make sure the system is easy to use and maintain.
fridayfrontend  css  design  designsystem  styleguide  patternlibrary  color 
9 days ago by spaceninja
Create your design system, part 4: Spacing
In this article we’ll take a look at how to set a spacing system in CSS, and how to take advantage of relative units to handle responsiveness.
fridayfrontend  css  cssbasics  design  spacing  margins  padding  layout  variables  customproperties  designsystem  styleguide  patternlibrary 
9 days ago by spaceninja
Take A New Look At CSS Shapes
In this article, we take a look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.
fridayfrontend  css  shapes  shape-outside  shape-inside  shape-image-threshold  shape-margin  clip-path 
9 days ago by spaceninja
Design with Difficult Data
Stop designing for the happy path! Steven Garrity shows how to create more robust layouts by designing with difficult data.
fridayfrontend  design  placeholders  layout  ux 
9 days ago by spaceninja
The Font Loading Checklist
When I look back at the last four years that I’ve spent learning everything I could about web fonts and how web fonts load, I can distill it all down to a small checklist of ideals that I continue to chase. Our goal as web developers is to maximize the experience and raise user expectations to the level of what the web is capable of delivering, but also to manage our performance budgets to ensure that we are fulfilling the promise of the web—it’s ubiquity. This checklist should help you deliver on those two often competing ideals.
fridayfrontend  css  typography  webfonts  checklist  performance  preload  font-display 
9 days ago by spaceninja
Nested Links Without Nesting Links
Chris Coyier started a thought exercise thread last week asking the community how they would approach building nested links. I had the same requirement a couple of years ago when I was building the front-end foundation for Smashing Magazine. So I thought I’d write my response to Chris’s thread out in the form of a blog post.
fridayfrontend  html  links  nesting  css  layers 
9 days ago by spaceninja
Designing with Grid, by Jen Simmons
Graphic designers of the 20th century fell in love with using grids for their layouts. How might we apply their ideas to the web, and what might have to change? Jen explores the realities and possibilities of new layout technologies like CSS Grid and Flexbox, and how they will change our craft. Recorded December 11th, 2017.
fridayfrontend  video  css  cssgrid  grids  layout  flexbox  design 
12 days ago by spaceninja
The details and summary elements
The details and summary elements are two of HTML’s interactive elements and together are the elements that create a native disclosure widget. You may think of disclosure widgets by other names, but they’re most commonly recognized within the context of an accordion component. An accordion is comprised of various disclosure widgets that are often aware of each other’s current state.
fridayfrontend  cssbasics  html  details  summary  accordions 
15 days ago by spaceninja
Best Practices For Mobile Form Design
Users can be hesitant to fill out forms. That is why it is our goal as designers to make the process of filling out a form as easy as possible. Nick shares some techniques that can help you design effective forms.
fridayfrontend  cssbasics  css  html  forms  mobile  accessibility 
15 days ago by spaceninja
7 Ways To Make Your Web Application More Accessible
Yet accessibility isn’t just about providing a way for people with disabilities to access your content. Writing accessible code also has positive implications on web app performance or SEO rankings. Thus, let’s delve into the seven ways you can make your web app more accessible. (I promise, it’s easy).
fridayfrontend  cssbasics  accessibility  mobile  semantics  keyboard  aria  tables  alt  color  contrast  typography 
15 days ago by spaceninja
Defining Colors in CSS
CSS is a styling language, and the color – or the other properties which gets a color value – is one of its most basic features. Setting colors is general in any design.
fridayfrontend  css  cssbasics  color  hsl  rgba 
15 days ago by spaceninja
The power of progressive enhancement
It’s become much more successful than I ever imagined, but why? This wasn’t a particularly new idea. Similar products and websites exist, so what is it that made My Browser different? I believe the answer is progressive enhancement. I took a gamble when I changed up my build approach, and I’m very happy I did.
fridayfrontend  cssbasics  progressive  enhancement  javascript  css 
15 days ago by spaceninja
Common Responsive Layouts with CSS Grid (and some without!)
When I was learning CSS and HTML the way that I learnt best was by copying layouts written by others and then changing bits, deleting bits and playing around with them until I understood what was going on. With that in mind, I’ve composed a few common responsive website layouts for you to copy, edit, mess around with. I’ll go over my thinking with each layout and will outline a few tricks from each one.
fridayfrontend  cssbasics  css  grids  layout  cssgrid  responsive 
15 days ago by spaceninja
How do you mark up an accordion?
I made a poll on Twitter the other day asking the #lazyweb how they would mark up an FAQ section — or a list of questions and their corresponding answers. I specifically asked for markup suggestions. Turns out, people mark questions and answers up differently. I got some interesting insight from the responses I got that partly changed the way I would approach building an FAQ section, and some validation for the way I always have built them. The discussion was too interesting to not summarize in an article. The different possible markup approaches as well as useful resources are discussed below.
fridayfrontend  cssbasics  css  html  accordions  lists  ul  ol  dl  summary  details  accessibility 
15 days ago by spaceninja
Using CSS Clip Path to Create Interactive Effects, Part II
Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We’re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible.
fridayfrontend  css  svg  clip-path  clip  masks  animation 
15 days ago by spaceninja
The key lessons I learned creating a popular Design System
With the uptick in design systems discussions over the last couple of years, I’m occasionally asked for tips or insights from my experience building the design system at Atlassian. If you have considered creating one for your product or company, are in the process of making one, or have tried and given up, hopefully these insights will help you create a better design system for your company.
fridayfrontend  css  design  designsystem  patternlibrary  styleguide 
15 days ago by spaceninja
Conversational Semantics
As Alexa, Cortana, Siri, and even customer support chat bots become the norm, we have to start carefully considering not only how our content looks but how it could sound. We can—and should—use HTML and ARIA to make our content structured, sensible, and most importantly, meaningful.
fridayfrontend  semantics  css  html  accessibility  screenreaders  virtualassistants  siri  alexa  cortana  readermode 
15 days ago by spaceninja
Accessibility is not a feature
I care pretty deeply about accessible design. I wouldn’t call myself an accessibility specialist, mind you, but I’ve always felt that “designing for the web” means ensuring our work is accessible as broadly as possible. Not just accessible to differently-sized screens, but for people who might not browse the web like I do.
fridayfrontend  accessibility 
15 days ago by spaceninja
Inspect and Style an Element in DevTools that Normally Disappears when Inactive
It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’s styles, however, it can be very tricky to try and inspect an element if it only shows up when it’s being hovered or if it disappears when it loses focus. Thankfully, there is a handy little trick using setTimeout and debugger that makes inspecting such elements much easier.
fridayfrontend  css  devtools  settimeout  debugging  focus  hover 
15 days ago by spaceninja
Interactive Flex Generator
Welcome to free online CSS flex (flexbox) layout editor and css, html source code generator tool. It was written in JavaScript, and created for those who want to learn css flex, or at least see how it works in action without having to write any code.
fridayfrontend  cssbasics  css  flexbox  grids  layout  generator 
15 days ago by spaceninja
Super-Powered Grid Components with CSS Custom Properties
A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid isn’t just for pages! That is a common myth. Although it is certainly very useful for page layout, I find myself just as frequently reaching for grid when it comes to components. In this article I’ll address using CSS grid at the component level.
fridayfrontend  css  grids  cssgrid  layout  variables  customproperties  components 
17 days ago by spaceninja
The Algorithms of CSS, by Lara Schenck
“CSS isn’t a ‘real’ programming language,” we CSS developers are often reminded — we don’t write programs, we describe presentation. Algorithms and CSS, then, don’t exactly go hand-in-hand … or do they?
fridayfrontend  css  video  algorithms  programming  language  imperative  declarative 
20 days ago by spaceninja
UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1)
Do you test your forms on real users and real devices? If not, you should. Let’s take a look at some of the techniques that can help you take your forms to the next level and help users fill them in.
fridayfrontend  css  cssbasics  forms  html  mobile  accessibility  ux 
24 days ago by spaceninja
CSS Layout Templates From CodePen
So if you want to get started and build a layout, a great place for examples is CodePen. Bellow you will find a list I put together with some of the best CSS layouts templates you can find there.
fridayfrontend  css  cssbasics  layout  flexbox  cssgrid  grids 
24 days ago by spaceninja
::before vs :before
Note the double-colon `::before` versus the single-colon `:before`. Which one is correct? Technically, the correct answer is `::before`. But that doesn't mean you should automatically use it.
fridayfrontend  css  cssbasics  selectors  generated  before  pseudo-classes  pseudo-elements 
24 days ago by spaceninja
Twitter's "fave" animation
Twitter recently updated the design of their “fave” (also known as “fav”) button, introducing a new animation. Rather than rely on CSS transitions, the animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function.
fridayfrontend  css  cssbasics  animation  twitter 
24 days ago by spaceninja
Using feature detection to write CSS with cross-browser support
Why do we need CSS feature detection at all? What are good (and not so good) ways to do feature detection? What does the future hold for CSS feature detection?
fridayfrontend  css  cssbasics  supports  featurequeries  modernizr 
24 days ago by spaceninja
Understanding why Semantic HTML is important, as told by TypeScript.
With the increasing focus on JavaScript in Front End Development and the seemingly increasing devaluing of HTML I recently spent some time trying to figure out how to explain to JavaScript orientated developers why understanding and learning HTML was important.
fridayfrontend  cssbasics  html  semantics  typescript  javascript 
24 days ago by spaceninja
Time-saving CSS techniques to create responsive images
As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours. This situation has happened to me many times and I have learned from my mistakes. No more black magic hacks — here are my five favorites techniques to handle image resizing.
fridayfrontend  css  cssbasics  responsive  images  object-fit 
24 days ago by spaceninja
Redesigning a Card-based Tumblr Layout with CSS Grid
In this tutorial we’re going to retrofit a grid-based design to a layout inspired by the What’re you into? Tumblr page, where the user was able to select a set of topics to tailor their recommended content.
fridayfrontend  css  grids  cssgrid  layout  tumblr  cards 
24 days ago by spaceninja
A Tale of Two Buttons
Making the case for embracing CSS's cascade to create more adaptable and easier to use UI components.
fridayfrontend  css  cascade  buttons  modular  bem  color 
24 days ago by spaceninja
CSS Logical Properties
A property like margin-left seems fairly logical, but… direction, writing mode, and even flexbox all have the power to flip things around and make properties less logical and more difficult to maintain than you'd hope. Now we'll have margin-inline-start for that.
fridayfrontend  css  logic  layout  grids  cssgrid  flexbox  writingmodes  vertical 
24 days ago by spaceninja
Creating the “Perfect” CSS System
A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems
fridayfrontend  design  styleguide  patternlibrary  designsystem  css  frameworks 
24 days ago by spaceninja
Your skip links are broken
Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
fridayfrontend  accessibility  skiplinks  mobile 
24 days ago by spaceninja
Advanced effects with CSS background blend modes
This article will focus on background-blend-mode, the property with the most widespread support, and how you can use it today to create eye-catching backgrounds and photo effects for your website that once were only possible in Photoshop.
fridayfrontend  css  background-blend-mode  blendmodes  backgrounds 
24 days ago by spaceninja
CSS Grid in 45 Minutes!
Really great talk introducing CSS Grid by the legendary Wes Bos. Highly recommended.
fridayfrontend  css  video  cssgrid  grids  layout 
26 days ago by spaceninja
Hamburger Menu Animations
Four different menu animations for menu button toggle between hamburger, cross and back icon.
fridayfrontend  css  cssbasics  hamburger  icons  animation 
28 days ago by spaceninja
Front-End Performance Checklist
Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).
fridayfrontend  css  cssbasics  performance  checklist 
28 days ago by spaceninja
Exploring SMACSS: Scalable and Modular Architecture for CSS
Now, the architectural approach of SMACSS is a bit different from a CSS framework like Bootstrap or Foundation. Instead, it’s a set of rules, more like a template or guide. So let’s dive into some CSS design patterns to find out how we can use them to make our code better, cleaner, easier to read, and more modular.
fridayfrontend  css  cssbasics  smacss  frameworks  modular 
28 days ago by spaceninja
A Friendly Introduction to Flexbox for Beginners
In recent years, CSS layout has come of age, with dedicated tools for complex layouts replacing the various workarounds of using tables, floating, absolute positioning and so on. Flexbox (or the Flexible Box Layout Module) was the first of these dedicated layout modules, followed by CSS Grid Layout. In this article, we provide a user-friendly introduction to flexbox.
fridayfrontend  css  cssbasics  flexbox  grids  layout 
28 days ago by spaceninja
Hex Naw | A color accessibility tool for designers and developers.
Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility. Plug in your palette or color system and let Hex Naw do the rest. Happy testing!
fridayfrontend  css  cssbasics  color  accessibility  contrast 
28 days ago by spaceninja
On Switching from HEX & RGB to HSL
In the context of the tweet I mentioned that I had converted all the colors on my site from the Hexadecimal and RGB(A) formats to the HSL format. A bunch of folks asked me why I made this switch. This article is my response.
fridayfrontend  cssbasics  hex  color  rgb  hsl  css 
28 days ago by spaceninja
FLEX: A simple visual cheatsheet for flexbox
Learn all about the properties available in flexbox through simple visual examples.
fridayfrontend  cssbasics  grids  flexbox  layout  cheatsheet 
28 days ago by spaceninja
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
fridayfrontend  cssbasics  grids  cssgrid  layout  cheatsheet 
28 days ago by spaceninja
Element Hiding Techniques in CSS
Hiding HTML elements from CSS is not a big deal; we do it instinctively until we learn accessibility and find a fundamental difference.
fridayfrontend  accessibility  cssbasics  hidden  display  visibility  opacity  screenreaders  position  clip-path 
28 days ago by spaceninja
Westworld Slider
I just finished the first season of Westworld and I just loved the UI design of the computer systems - relevant, balanced and unfussy, the designer(s) seem to fully understand the systems they aim to represent. Westworld Slider is inspired by the 'personality matrix'.
fridayfrontend  css  cssbasics  forms  westworld  scifi  television 
28 days ago by spaceninja
Everything You Need To Know About Alignment In Flexbox
In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.
css  cssbasics  flexbox  alignment  fridayfrontend 
28 days ago by spaceninja
Line-height Crop — a simple CSS formula to remove top space from your text
It’s a natural behavior of text elements to include some space on top (and bottom) of the element itself based on its line-height value. In some cases, you may need to remove those spaces as they can create inconsistencies in your page design. In this article we are going to take a look at how we can remove this space from the text elements using a simple SCSS mixin.
fridayfrontend  css  sass  mixins  line-height  typography 
28 days ago by spaceninja
Scroll Bouncing On Your Websites
This article describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described in this article. A good understanding of this effect is very helpful for building or designing any website that has fixed elements.
fridayfrontend  css  scroll  position  fixed  overscroll-behavior  mobile  touch 
28 days ago by spaceninja
Building websites for Safari Reader Mode and other reading apps.
If you use HTML to it’s full potential from the beginning, you’re not just making the most out of built in features you’re making it more functional for people, bots, and for any tech, not just now but in the future as well.
fridayfrontend  html  accessibility  readermode  instapaper  pocket  semantics  microdata 
28 days ago by spaceninja
Let's serve everyone good-looking content
In Benjamin’s poll, the second most voted reason to avoid Grid Layout was supporting Internet Explorer users. I think it all depends on how we want to support users. Of any browser. Warning: opinions ahead.
fridayfrontend  css  grids  cssgrid  design  layout  fallback  featurequeries  supports 
29 days ago by spaceninja
Practical CSS Scroll Snapping
CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. …If done thoughtfully, scroll snapping can be a useful design tool. CSS snap points allow you to hook into the browser’s native scrolling interaction, so your interface feel seamless and smooth.
fridayfrontend  css  scroll  scroll-snap 
4 weeks ago by spaceninja
The Web is Made of Edge Cases
People will use your site how they want, and according to their means. That is wonderful, and why the Web was built.
css  cssbasics  accessibility  performance  fridayfrontend 
5 weeks ago by spaceninja
Toggle-Switch Guidelines
Toggle switches are digital on/off switches. They prompt users to choose between two mutually exclusive options and always have a default value. Toggles should provide immediate results, giving users the freedom to control their preferences as needed.
css  cssbasics  forms  html  toggles  checkboxes  radio  accessibility  fridayfrontend 
5 weeks ago by spaceninja
CSS Filter Playground
Filters are a great way of graphically modifying an element. You can blur an image, make an image grey-scale or change its brightness. This is an interactive playground on all of the possible filter functions that can be used.
css  cssbasics  filters  fridayfrontend 
5 weeks ago by spaceninja
« earlier      
per page:    204080120160

related tags

3d  aa  abem  absolute  abstraction  accessibility  accordions  acrylic  active  adaptive  advice  after  ajax  alexa  algorithms  aliasing  align-items  alignment  all  alpha  alt  amazon  amcss  amend  amp  analytics  android  angled  angular  animation  animations  antipatterns  any-link  api  applewatch  apply  architecture  aria  aria-controls  aria-describedby  aria-hidden  art  artdirection  ascii  asl  aspectratio  async  atom  atomic  attr  attributes  audio  audits  autism  auto  auto-fill  auto-fit  auto-placement  autocomplete  autofill  automation  autoprefixer  avengers  await  aws  axe  babel  backdrop-filter  background  background-blend-mode  background-clip  background-position  backgrounds  bars  base  batman  beautifiers  before  bem  bestpractices  beyonce  bezel  billing  bio  blending  blendmodes  blind  bloat  block  blocking  blocks  blur  boilerplate  bookmarklets  books  bootstrap  border-image  border-radius  borders  bower  box-decoration-break  box-shadow  box-sizing  boxmodel  bradfrost  breadcrumbs  break-word  breakout  breakpoints  breathe  broadband  broccoli  broken  browser  browserify  browsers  buffet  bugs  build  bundler  buttons  calc  calculator  callback  cameras  caniuse  canvas  captions  carbon  cards  carousel  cartoons  cascade  cats  centered  ch  chaining  challenge  change  channels  characterentities  charts  cheatsheet  checkboxes  checked  checklist  chinese  chriscoyier  chrome  circle  clamp  class  classList  clearfix  clienthints  clip  clip-path  clone  code  codeofconduct  codereviews  codesmells  codezen  collaboration  collapse  color  columns  comics  commas  comments  commonjs  communication  compassion  complexity  components  compositing  compression  conic-gradient  connect4  console  contain  containerqueries  content  contenteditable  contents  context  contrast  controls  cookies  cortana  counters  creative  creditcards  crisis  critical  cropping  css  css-in-js  css3  css4  cssbasics  cssgrid  cssom  csspaint  csswg  culture  currentcolor  cursors  customelements  customizable  customproperties  dark  data  data-url  date  datepicker  dead  debug  debugging  declarations  declarative  defaults  defer  delay  demos  design  designsystem  designtokens  desktop  details  detection  developers  development  devops  devtools  diagrams  dialog  diamonds  diffs  dinosaurs  direction  director  disabled  discrimination  display  displaycontents  disruption  diversity  dl  documentation  dom  dpi  draft  drama  draplin  drop-shadow  dropcaps  dropdown  drupal  dumb  duotone  durability  dyslexia  ease-in  ease-out  easing  edge  editors  effects  efficiency  elements  ellipse  ellipsis  em  email  emmet  emoji  empty  ems  emulator  engineering  enhancement  entities  env  environmental  eot  ericmeyer  errors  es6  es2015  es2017  eslint  ethics  eventListener  evergreen  ex  example  exclusions  explicit  export  extends  extensible  extension  fallback  fantasai  faqs  fatigue  favicons  featurequeries  features  fecolormatrix  feedback  feminism  fieldset  file  filter  filters  firefox  first-child  first-letter  first-line  fitty  fixed  fixtext  flat  flex-basis  flex-grow  flex-wrap  flexbox  flexible  floats  flow-root  flowtype  fluid  focus  focus-ring  focus-visible  focus-within  foft  foit  font-display  font-face  font-feature-settings  font-size  font-variant  font-weight  fontawesome  fonts  footer  footnotes  formatting  forms  fouc  fout  fr  frameworks  fridayfrontend  frontend  fullbleed  fun  functions  funny  galleries  games  generated  generator  generic  geocities  gestures  gifs  git  github  glitch  glyphs  gmail  google  gpu  gradients  graphql  graphs  grid-gap  grids  grunt  guide  guidelines  guides  gulp  gutenberg  gutters  gzip  hacks  hamburger  handbook  hanging-punctuation  hardwareacceleration  harryroberts  has  headers  headings  headlines  height  hex  hidden  highcontrast  highlight  hints  hiring  history  holygrail  horizontal  houdini  hover  howto  hr  hsl  hsla  html  html5  http2  httponly  https  hyphens  icons  idiomatic  ie  ie10  ie11  iframes  illustrator  images  imperative  implicit  important  imposter  in-range  inclusive  indeterminate  inherit  initial  initial-letter  initial-scale  inline  inline-flex  input  inputmode  inputs  inset  inspiration  instapaper  internationalization  intersectionobserver  interviews  intrinsic  intuit  invalid  inverted  ios  iphone  is  itcss  jasmine  java  javascript  jekyll  jenkins  jinabolton  jobs  jokes  jpl  jquery  jspm  karma  kerning  keyboard  knockout  kss  labels  landmarks  lang  language  last-child  layers  layout  lazyload  leadership  leading  learning  legacy  legal  legend  length  less  letter-spacing  level4  library  ligatures  lighthouse  line-break  line-clamp  line-height  lines  linkedin  links  lint  linters  lists  literals  liveregions  loaders  loading  local  localization  localoverrides  locks  log  logic  logical  logos  ltr  lukewroblewski  mac  macos  main  maintainability  maintenance  make  management  manifest  maps  margins  mario  marquee  mask  masks  masonry  matches  matchmedia  material  math  max  max-lines  max-width  mcss  media  mediaqueries  medium  meltdown  memes  memory  menu  menus  meta  metrics  microdata  mikemonteiro  min  min-width  minmax  misconceptions  mistakes  mix-blend-mode  mix-width  mixins  mixmax  mma  mobile  mocha  mod  modal  modals  modernizr  modular  modules  modulo  moment  motion-path  mouse  mythbusters  myths  names  namespacing  narrator  nasa  native  navigation  nesting  netflix  netscape  newsletters  newton  night  node  normalize  not  notch  notifications  npm  nth-child  nth-last-child  nth-of-type  numbers  numeric  nvda  object-fit  object-position  offline  offscreen  offset-path  ol  onboarding  oocss  opacity  opensource  opentype  opinionated  optimization  optimizelegibility  optional  order  organization  orphans  osx  otters  out-of-range  outline  outline-offset  overflow  overflow-wrap  overlay  overscroll-behavior  packages  padding  painting  pantsuit  parallax  path  patternlibrary  patterns  payments  performance  photos  php  pinned  pixels  placeholder  placeholder-shown  placeholders  plan  plugins  pocket  podcasts  pointer  polygon  portfolios  position  postcss  pragmatism  pranks  pre  prefixes  preload  preprocessors  prettier  pride  print  priorities  priority  privacy  process  productivity  professional  profile  programming  progress  progressive  project  promises  properties  proportional  pseudo-classes  pseudo-elements  pullrequest  puppeteer  push  pwa  px  qa  quantity  query  querySelector  questions  quotes  radial  radio  ratings  ratios  react  read-only  readability  readermode  rebase  reboot  recap  redlining  reduced-motion  redux  refactoring  reference  reflog  reflow  regression  relative  reliability  rem  remote  repaint  required  reset  resilient  resizeobserver  resources  responsive  retina  retro  revert  reviews  rgb  rgba  ribbons  ripple  roadmaps  roadtrips  rolemodels  roles  rtl  ruby  rules  rulesets  rwd  safari  safe  samesite  samsung  sass  scalable  scale  scaling  scifi  scope  screencasts  screenmagnifiers  screenreaders  screenshots  script  scroll  scroll-behavior  scroll-snap  scroll-snap-points  scrollbars  section508  security  select  selection  selectors  self  sem  semantics  sensors  seo  sequential  serviceworkers  setproperty  settimeout  shadowdom  shadows  shape-image-threshold  shape-inside  shape-margin  shape-outside  shapes  shit  shortcuts  shorthand  shrink-to-fit  sidebar  sidebars  siri  sizes  skiplinks  slack  slides  smacss  small-caps  smooth  snap  snippets  snook  software  sorting  space  spacing  speaking  specification  specificity  specs  spectre  speed  speedindex  spinners  sprites  square  squash  srcset  stacking  standards  stars  states  static  statistics  stats  sticky  stripe  study  style  styleguide  stylelint  subgrid  sublime  suffixes  suit  summary  support  supports  surveys  sustainability  susy  svg  svgo  symbols  syntax  system  tabindex  table-layout  tables  tabs  talkback  target  taskforce  tasks  teams  teamwork  tech  television  templates  terminal  testing  tests  text  text-rendering  text-shadow  text-wrap  textarea  textfill  textfit  themes  theming  this  tictactoe  tidy  time  timelines  timetravel  tips  titles  tmbg  toggle  toggles  tokens  tools  tooltip  tooltips  toto  touch  towerdefense  tracking  tradeoffs  transforms  transitions  translation  transparent  transpiler  tricks  troubleshooting  truncate  ttf  tumblr  tutorials  twitter  tylersticka  typescript  typography  ucbrowser  uglify  ui  ul  underline  undo  units  unset  unused  usability  use  user-error  ux  valid  validation  values  variablefonts  variables  vertical  vertical-align  vh  video  viewport  viewport-fit  virtualassistants  visibility  visual  visualization  vm  vmax  vmin  vms  voice  voiceover  vox  vscode  vue  vw  w3c  wat  watchOS  wcag  webapps  webassembly  webcomponents  webfonts  webkit  webpack  westworld  whitespace  width  will-change  windows  woff  word-break  word-wrap  wordpress  work  workflow  wrap-flow  wrap-through  wrapping  writing-mode  writingmodes  x11  yandex  yarn  youtube  z-index  zeldman  zoom 

Copy this bookmark: