Archive | components

RSS feed for this section

Prototyping in the Browser

Prototyping animations and interactions is vital for a number of reasons: they can make your interface feel deceptively fast, they can help focus the user on a specific task, and they can provide a better sense of the current state of your application. Is data being loaded? Is something now unclickable? How long do they have to wait until they can perform an action?

At Gusto, I’ve been working on a lot of tiny interaction details and prototypes lately …

The post Prototyping in the Browser appeared first on CSS-Tricks.

One-Offs

There is this sentiment that you don’t design the homepage of a site first. For most sites, it’s an anomaly. It’s unlike any other page and not something to base the patterns you use for the rest of the site or help inform other pages.

You might call it a one-off.1

One-offs are OK! A world without one-offs is very boring. But a site chock-full of one-offs leads to familiar problems: inconsistency and non-reusable CSS that leads to …

The post One-Offs appeared first on CSS-Tricks.

How to Create a Component Library From SVG Illustrations

I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components.

Here’s a GIF that shows what I mean:

What’s unDraw?

While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Here it is on the newly launched design mentoring site called MentorOla, alongside a language site I’ve been working on myself called Little Lingua:

Left: MentorOla…

The post How to Create a Component Library From SVG Illustrations appeared first on CSS-Tricks.

Designer-Oriented Styles

James Kyle:

Components are a designer’s bread and butter. Designers have been building design systems with some model of “component” for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, “components” (in some form or another) have asserted themselves as a best practice for web designers …

Designers don’t care about selectors or #TheCascade. They might make use of it since it’s available, but #TheCascade never comes up in the design thought process.

(Okay …


Designer-Oriented Styles is a post from CSS-Tricks

Designer-Oriented Styles

James Kyle:

Components are a designer’s bread and butter. Designers have been building design systems with some model of “component” for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, “components” (in some form or another) have asserted themselves as a best practice for web designers …

Designers don’t care about selectors or #TheCascade. They might make use of it since it’s available, but #TheCascade never comes up in the design thought process.

(Okay …


Designer-Oriented Styles is a post from CSS-Tricks

Intro to Vue.js: Components, Props, and Slots

This is the second part in a five-part series about the JavaScript framework, Vue.js. In this part, we’ll go over Components, Props, and Slots. This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Vue.js and understand what the framework has to offer.

Article Series:

  1. Rendering, Directives, and Events
  2. Components, Props, and Slots (You are here!)
  3. Vue-cli
  4. Vuex
  5. Animations (Coming soon!)


Intro to Vue.js: Components, Props, and Slots is a post from CSS-Tricks