recentpopularlog in

garrettc : webdesign   1049

« earlier  
Responsive Navigation Patterns
"Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness."
webdesign  webdevelopment  navigation  userexperience  mobilefirst  bestpractice 
9 days ago by garrettc
Design systems pro video series—Master product design at scale with Brad Frost, Dan Mall, and Josh Clark
Watch videos of design system pros Brad Frost, Dan Mall, and Josh Clark sharing best practices for product design at scale. Get expert recommendations for improving speed, quality, and consistency with design systems.
video  webdesign  webdevelopment  designsystems  bestpractice  patternlibrary  styleguide  lessons 
11 days ago by garrettc
Animated Grid Previews
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.
animation  art  webdesign  grid  userinterface 
12 days ago by garrettc
Building a Design System: A Practitioner's Case Study
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile…
webdevelopment  webdesign  designsystems  styleguide  presentation 
17 days ago by garrettc
Building a compelling business case for a Design System
"Design Systems are here to stay. […] But it’s not designers who we have to convince when it comes to investing in the build of a design system. Especially if we aren’t lucky enough to be in an organisation where design has a ‘seat at the table’. How can we sell the benefits of a design system with more focus on appealing to upper management, who may not see the same benefits we do?"
designsystems  webdevelopment  webdesign  business 
17 days ago by garrettc
Design Systems Handbook
Your guide to design systems best practices. Learn how to design, build, maintain, and implement design systems–from design leaders and world-class teams.
webdesign  webdevelopment  styleguide  ebook  bestpractise  designsystems 
17 days ago by garrettc
Dark Mode and CSS • The Breakroom
The new Dark Mode in macOS Mojave provides users with a new way to customize their desktop environment. It also presents a lot of new situations where developers need to adapt content in their apps and websites.
IFTTT  Pocket  css  webdesign  accessibility  webdevelopment 
19 days ago by garrettc
Use Cases For Flexbox
"In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?"
css  flexbox  grid  layout  webdesign  webdevelopment 
4 weeks ago by garrettc
The Shapes of CSS
"CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

We also get the ::before and ::after psuedo elements in CSS, which give us the potential of two more shapes we can add to the original element. By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element."
css  webdesign  shapes  tricks 
4 weeks ago by garrettc
Negative Grid Lines
Uses for negative grid lines.
css  webdesign  grid  layout 
4 weeks ago by garrettc
Accessibility Cheatsheet
Practical approaches to Universal Design for making your website/webapp accessible to everyone
accessibility  cheatsheet  reference  webdesign  webdevelopment  bestpractice 
4 weeks ago by garrettc
CSS Layout cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
css  examples  layout  webdevelopment  webdesign  flexbox  grid 
7 weeks ago by garrettc
Flexbox: How Big Is That Flexible Box?
"In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be?"
css  flexbox  webdesign 
7 weeks ago by garrettc
Create your design system, part 1: Typography
Typography is arguably the essential part of a website. When we think about the content of a web page, we think about words. In this article, we’ll take a look at how to set a typography system in…
css  webdesign  designsystems  webdevelopment  typography  grid  colour  space  icons  buttons 
8 weeks ago by garrettc
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!"
css  webdesign  userinterface  sticky  scrolling 
8 weeks ago by garrettc
Design with Difficult Data
Stop designing for the happy path! Steven Garrity shows how to create more robust layouts by designing with difficult data.
data  design  webdesign  webdevelopment  visualisation  accessibility 
8 weeks ago by garrettc
Unlocking the Power of CSS Grid Layout
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
css  grid  webdevelopment  webdesign 
9 weeks ago by garrettc
Super-Powered Grid Components with CSS Custom Properties | CSS-Tricks
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
css  grid  layout  webdevelopment  webdesign 
9 weeks ago by garrettc
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.
css  webdevelopment  webdesign 
9 weeks ago by garrettc
Web Design Museum
Web Design Museum exhibits over 900 unique designs from the years 1995 to 2005. Discover forgotten trends in web design.
history  design  webdesign  gallery  inspiration  museum  internet  worldwideweb 
10 weeks ago by garrettc
Using CSS Clip Path to Create Interactive Effects
"Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path."
css  svg  webdesign  inspiration 
11 weeks ago by garrettc
Advanced effects with CSS background blend modes
"Learn about background-blend-mode and how you can use it to create eye-catching backgrounds and photo effects that once were only possible in Photoshop."
background  css  webdesign  inspiration 
11 weeks ago by garrettc
Sticky, Smooth, Active Nav
"Just like the title says! Here's a sidebar navigation bar that... Uses sticky positioning. It stays on the screen when it can"
css  navigation  webdevelopment  webdesign 
august 2018 by garrettc
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
cheatsheet  css  grid  webdesign  reference  webdevelopment 
august 2018 by garrettc
FLEX: A simple visual cheatsheet for flexbox
Learn all about the properties available in flexbox through simple visual examples.
cheatsheet  css  flexbox  webdesign  reference  webdevelopment 
august 2018 by garrettc
The power of progressive enhancement
"Building progressively means that I’ve avoided the need for a bunch of fixes and polyfills for older browsers. If something isn’t supported then the app provides a simpler method."
progressiveenhancement  webdesign  webdevelopment 
august 2018 by garrettc
Weft. — Ethan Marcotte
"I wrote about trying to understand what you’re designing or building before you design or build it"
css  designpatterns  designthinking  designsystems  webdesign  webdevelopment 
august 2018 by garrettc
A Brief Intro to Docker for Djangonauts
Lacey didn't have the opportunity to work with Docker at her last job. In this tidbit she steps you through getting started with Docker for Django developers.
webdevelopment  webdesign  programming  django  python  docker  container 
august 2018 by garrettc
CSS Generator Tool
A CSS Generator Tool to demonstrate and quickly generate many different handy CSS declarations.
code  css  generator  webdesign  webdevelopment 
august 2018 by garrettc
Disability Tek - Help others with a disability access technology by sharing how you use it.
Disability Tek offers a platform for sharing information about technology for people with disabilities. Join our community today.
webdevelopment  webdesign  design  userexperience  accessibility  equality 
august 2018 by garrettc
Solved with CSS! Logical Styling Based on the Number of Given Elements | CSS-Tricks
Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and it just makes me love it even more.
css  webdesign  webdevelopment  logic 
august 2018 by garrettc
Solved with CSS! Dropdown Menus | CSS-Tricks
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.
css  webdesign  navigation  userinterface  webdevelopment 
august 2018 by garrettc
Solved with CSS! Colorizing SVG Backgrounds | CSS-Tricks
This post is the first in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds (this post) Dropdown Menus Logical Styling Based On
svg  css  webdesign  webdevelopment 
august 2018 by garrettc
The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
This article looks at augmenting HTML with components that have built-in functionality and styles. We’ll also learn how to make these custom elements reusable across projects using NPM.
components  webdesign  component  webdevelopment 
august 2018 by garrettc
Parker - Stylesheet analysis tool
Parker is a stylesheet analysis tool. It runs metrics on your stylesheets and will report on their complexity.
css  webdesign  webdevelopment  performance  tool  javascript  nodejs 
july 2018 by garrettc
How the Roman Empire Made Pure CSS Connect 4 Possible | CSS-Tricks
Experiments are a fun excuse to learn the latest tricks, think of new ideas, and push your limits. "Pure CSS" demos have been a thing for a while, but new
css  webdesign  inspiration  game  connect4 
july 2018 by garrettc
Drawing Images with CSS Gradients
"What I mean by "CSS images" is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser."
background  css  drawing  webdesign 
july 2018 by garrettc
Pattern Library First: An Approach For Managing CSS
"CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid."
css  styleguide  fractal  patternlibrary  webdesign  webdevelopment 
july 2018 by garrettc
Gallery Grid With CSS Grid
Simple and clever gallery layout with CSS grid.
css  grid  webdesign  webdevelopment  gallery  tips 
july 2018 by garrettc
How to improve your design process with copy docs
"A copy doc is a one-stop “source of truth” for all the copy in a project. There’s no single way to create or use one, but here are some basics to help you get started."
content  contentstrategy  copywriting  webdesign  appdesign 
july 2018 by garrettc
Brutalist Web Design
Guidelines for web design that adhere to the tenets and ethos of Brutalism
webdevelopment  webdesign  minimalism  brutalism  manifesto 
july 2018 by garrettc
Webstock '18: Jeremy Keith - Taking Back The Web on Vimeo
"In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!"
ifttt  vimeo  video  indieweb  webdevelopment  webdesign 
july 2018 by garrettc
CSS Architecture for Design Systems | Brad Frost
"I wrote this post a while ago about how we structure CSS for large-scale design systems"
css  designsystems  patternlibrary  webdevelopment  webdesign  scalability 
july 2018 by garrettc
Should Links Open In New Windows?
"**No, they shouldn't**. At first glance the decision to open links in new windows or not depends on the given site and the preferences of its visitors. Visitors of the sites with heavy linking are more willing to have links opened in new windows than open dozens of links in new windows manually. Visitors of less-heavy-linkage-sites are more likely to open some specific link in new window to remain on the site and continue to browse through it afterwards. However, this is not true."
userexperience  usability  webdevelopment  webdesign  accessibility 
june 2018 by garrettc
Why Design Systems Fail by Una Kravets
"It’s like going to the gym. Small incremental changes make a big difference over the long term. If you just work out for three months and then stop, you’ll lose all your progress. It’s like that with design systems. They have to stay in sync with the live site. If you don’t keep it up to date, people just won’t use it.

It’s really important to have a solid core. Accessibility needs to be built in from the start. And the design system needs ownership and dedicated commitment. That has to come from the organisation."
designsystems  designpatterns  patternlibrary  styleguide  webdevelopment  webdesign  business 
june 2018 by garrettc
New tools for art direction on the web
Jeremy outlines how he built gesiowka.adactio.com with CSS grid, variable fonts, and service workers.
serviceworker  offlinefirst  webdevelopment  webdesign  progressiveenhancement  inspiration 
june 2018 by garrettc
Centering in CSS: A Complete Guide
"Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

So let's make it a decision tree and hopefully make it easier."
css  tips  tricks  webdesign  webdevelopment 
june 2018 by garrettc
The Layouts of Tomorrow
Lovely "metro like" UI, with parallax , built almost entirely in CSS using Grid and CSS 3D transforms.
css  grid  inspiration  layout  webdesign  webdevelopment 
june 2018 by garrettc
swiss in css
Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement.
css  inspiration  webdesign  swiss 
june 2018 by garrettc
The Problem with Patterns
It started off as an honest problem with a brilliant solution. As the ways we use the web continue to grow and evolve, we, as its well-intentioned makers and stewards, needed something better than making simple collections of pages over and over again. Design patterns, component libraries, or even style guides have become the norm for organizations big and small. Having reusable chunks of UI aids consistency and usability for users, and it lends familiarity and efficiency to designers. This in turn frees up designers’ time to focus on bigger problems, like solving for their users’ needs. In theory.
designpatterns  designsystems  webdevelopment  webdesign 
june 2018 by garrettc
The Cult of the Complex
"ALA’s Zeldman bemoans our industry’s fetish for the needlessly complicated over the straightforward."
css  webdevelopment  simplicity  webdesign  javascript 
june 2018 by garrettc
Designing Web Content for watchOS
"watchOS 5 brings web content to Apple Watch by rendering rich HTML in Messages and Mail. Gain insights into how watchOS maintains compatibility with existing web content, and find out what you can do to optimize your web content for Apple Watch."
watchos  apple  webdesign  responsivedesign 
june 2018 by garrettc
Making Avengers ID Card In HTML And CSS
"In this tutorial, we will build a sci-fi ID card for Avengers. You will learn Flexbox, Nested Flexbox, CSS animations, and a ton of other CSS techniques while building this interesting project."
css  flexbox  html  tutorial  webdesign  webdevelopment 
june 2018 by garrettc
Realizing common layouts using CSS Grid Layout
"To round off this set of guides to CSS Grid Layout, I am going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product listing using auto-placement."
css  grid  webdesign  webdevelopment  layout  examples 
may 2018 by garrettc
Building a responsive image
Clever responsive logos using just SVG and CSS.
css  svg  webdesign 
may 2018 by garrettc
Getting Started With CSS Layout
Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today.
css  layout  flexbox  float  grid  html  webdevelopment  webdesign 
may 2018 by garrettc
Onboarding: A College Student Discovers A List Apart
Samantha Lynn weighs in on 20 years of ALA, 350 articles, and how far we’ve come as an industry.
archive  webdesign  webdevelopment  history  society  worldwideweb  internet 
may 2018 by garrettc
Dark theme in a day
Excellent write-up of rethemeing an app with the latest CSS.
css  designthinking  theme  webdevelopment  appdevelopment  webdesign 
may 2018 by garrettc
The Illusion of Control in Web Design
"We think of our job as controlling the user’s experience. But the reality is, we control far less than we imagine."
accessibility  userexperience  webdevelopment  webdesign  userinterface  worldwideweb  networking  offlinefirst  responsivedesign 
may 2018 by garrettc
A Strategy Guide To CSS Custom Properties
"Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties."
css  webdesign  css3 
may 2018 by garrettc
Page Transitions for Everyone
"If we take a look at how mobile apps are designed today, there is very often some sort of animated transition between states. Even ready-to-use native components have some kind of simple animation between states. Developers and designers realized that this little animation helps a user grasp what is happening in the app. It makes the navigation through the app easier and tells the user where they are going within the app."
javascript  css  webdesign  webdevelopment  animation  userexperience  userinterface 
may 2018 by garrettc
Where Lines Break is Complicated. Here's all the Related CSS and HTML.
"Say you have a really long word within some text inside an element that isn't wide enough to hold it. A common cause of that is a long URL finding it's way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do."
css  layout  reference  webdesign 
may 2018 by garrettc
Unicode Patterns
"Lately I had some fun with Unicode in CSS and made several interesting background patterns with them."
background  css  unicode  patterns  webdesign  inspiration  webcomponents 
may 2018 by garrettc
Designing for Inclusion with Media Queries
Did you know that media queries aren’t just limited to screen size? This talk will dive into some lesser-known media queries that can help developers and designers create experiences for people browsing the web using assistive technologies.
responsivedesign  webdevelopment  webdesign  mediaqueries  accessibility  inclusion  society 
may 2018 by garrettc
Make Frontend Shit Again
"We used to make websites because it was fun and at a point we lost the way. We need to make dumb shit! Make useless stuff, make the web fun again!"
css  fun  html  webdesign  webdevelopment 
may 2018 by garrettc
Stylable - scoped CSS for components
Stylable is an open-source CSS preprocessor that extends and scopes CSS for components, resolving to flat, vanilla, cross-browser CSS at build time.
css  framework  react  components  webdevelopment  webdesign 
may 2018 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read