recentpopularlog in

garrettc : webdesign   1082

« earlier  
Cool Backgrounds
Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers.
background  design  svg  webdesign  patterns 
10 days ago by garrettc
Trianglify.io
A tool for generating low poly triangle patterns that can be used as wallpapers and website assets.
background  design  svg  webdesign  patterns  wallpaper  generator 
10 days ago by garrettc
Patterninja – pattern making application
Combine images from our free library or use your own. Produced patterns can be downloaded in high resolution and used for printing and the web.
background  design  webdesign  patterns  generator 
10 days ago by garrettc
Hero Patterns
A collection of repeatable SVG background patterns for you to use on your web projects.
background  design  svg  webdesign  patterns 
10 days ago by garrettc
To Grid or to Flex?
Good pointers on how to decide when to use Grid and when to use Flexbox.
css  grid  flexbox  webdesign  webdevelopment 
10 days ago by garrettc
Gradians and Turns: the quiet heroes of CSS angles
"Degrees and radians are the angle units we all know and hate, but two lesser-known units are often much easier: turns and gradians"
css  webdesign  webdevelopment  animation 
10 days ago by garrettc
Making Sense of Clip Path
"We can create many different shapes from circles, ellipsis, polygons. Creativity is the only limit."
css  clippath  svg  webdesign  webdevelpoment  mathematics 
10 days ago by garrettc
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom
"Recently I had some fun implementing an image carousel for Pinafore. The requirements were pretty simple: users should be able to swipe horizontally through up to 4 images, and also pinch-zoom to get a closer look."
webdevelopment  webdesign  css  javascript  carousels 
10 days ago by garrettc
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
"SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files.

Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more."
animation  css  svg  webdevelopment  webdesign 
20 days ago by garrettc
Table Design Patterns On The Web
"Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019."
css  data  table  layout  webdesign  webdevelopment  markup  html  javascript 
23 days ago by garrettc
The Flexbox Holy Albatross
How to use flexbox to simulate container query functionality.
css  layout  webdesign  webdevelopment  flexbox  containerqueries 
23 days ago by garrettc
Putting the Flexbox Albatross to Real Use
"If you hadn't seen it, Heydon posted a rather clever flexbox layout pattern that, in a sense, mimics what you could do with a container query by forcing an element to stack at a certain container width."
css  webdesign  webdevelopment  layout  containerqueries  flexbox 
23 days ago by garrettc
Exclusive Design
"But if we want to create truly inclusive websites, expertise in ourselves is not enough. We also need expertise in designing interfaces for people who are excluded. This expertise is lacking. In this research at the Master Design at the Willem de Kooning Academy in Rotterdam I have worked with the question

What if we design websites exclusively for people with disabilities?

In other words, what if we flip the so called ability bias, and start creating tailor made experiences for, and with real people with real disabilities?"
accessibility  webdevelopment  webdesign  thesis 
23 days ago by garrettc
Piecing Together Approaches for a CSS Masonry Layout | CSS-Tricks
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at
css  flexbox  grid  masonry  webdevelopment  webdesign 
4 weeks ago by garrettc
Culrs | Culrs gives you a simple smart approach to choose color palettes
Culrs is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes with different categories from color theory.
design  colour  webdesign  inspiration 
5 weeks ago by garrettc
Design for internationalization
"Well, it turns out this app wasn’t designed in your language. It was designed in Elvish, then translated into your language. Most people are using the Elvish version, so they don’t know how things look in your language.

Believe it or not, this is what non-English users have to deal with time and time again. Because many apps are only designed with English in mind, some design details can get lost in translation if you’re not careful."
webdesign  webdevelopment  internationalisation  localisation  bestpractice  tips 
5 weeks ago by garrettc
How To Learn CSS
"You don’t need to commit in memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. This article aims to guide you along your path of learning CSS."
css  webdesign  webdevelopment  learning 
6 weeks ago by garrettc
Benefits of a connected design system
"We’re seeing more and more organisations, big and small, empowering design teams to think more systematically. Couple that with the adoption of declarative JavaScript libraries, such as React and Angular, we’re able to unlock new ways to use web components to design, build and maintain interfaces.

This shift in approach is pulling design and engineering disciplines closer together, aligning workflows, and fundamentally changing the way teams communicate with each other."
designpatterns  designsystems  designthinking  webdesign  webdevelopment  patternlibrary 
6 weeks ago by garrettc
Gaming the System…and Winning
"Graham Herrli thinks the gamification of websites can be fun and creative…as long as it reaches the sites’ target users."
gaming  gamification  webdesign  webdevelopment  userexperience 
6 weeks ago by garrettc
The Cicada Principle and Why It Matters to Web Designers
What does the life cycle of periodical cicadas, Euclidean number theory and web design have on common?
css  patterns  random  webdesign  webdevelopment  background  tiling 
6 weeks ago by garrettc
Web Typography: Numerals
Richard Rutter offers sage advice on numeral usage in this excerpt from Web Typography.
typography  webdesign  readability  userexperience  numerals 
7 weeks ago by garrettc
Gradient Borders in CSS | CSS-Tricks
Let's say you need a gradient border around an element. My mind goes like this: There is no simple obvious CSS API for this. I'll just make a wrapper
css  webdesign  gradient  borders 
7 weeks ago by garrettc
Clip Paths Know No Bounds
"Dan Wilson throws some Christmas shapes and gives us a run down of different ways to use CSS polygon clip paths to create interesting a flexible shapes with less code that you might have thought."
css  css3  clippath  webdesign  webdevelopment 
9 weeks ago by garrettc
Responsive design (designers and developers working together)
"This is a deep-dive into the role of development in the design process, with a focus on responsive design. It’s aimed at design leaders/managers and developers working with design teams, and visual designers looking to become better web designers."
responsivedesign  webdevelopment  webdesign  management  userexperience 
9 weeks ago by garrettc
Managing Flow and Rhythm with CSS Custom Properties
"Andy Bell rings out a call for a more flexible method of achieving consistent vertical rhythm across components within a page. Using a technique of CSS custom properties to establish spacing inherited through the cascade, you can make sure your choir are all singing from the same song sheet."
css  webdesign  verticalrhythm 
10 weeks ago by garrettc
Masking vs. Clipping: When to Use Each
"I was recently doing some client work where I used both <clipPath>s and <mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we'll go over some of these details so that you can get productive as soon as possible."
css  svg  webdevelopment  webdesign 
10 weeks ago by garrettc
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
"CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started."
webdesign  webdevelopment  svg  design  css  userinterface 
10 weeks ago by garrettc
CSS Animation 101
"Animation using CSS can be overwhelming to learn all at once.

This book gives you a solid introduction to the topic, combining theory with practical lessons. You’ll learn how, and why to use animation on your web pages and hopefully be inspired to try it on your own projects!"
animation  css  ebook  programming  webdesign  webdevelopment 
11 weeks ago by garrettc
Concise Media Queries with CSS Grid
Write less CSS and organize responsive layouts with ease.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign  flex 
november 2018 by garrettc
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 
november 2018 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 
november 2018 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 
november 2018 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 
november 2018 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 
november 2018 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 
november 2018 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 
october 2018 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  flex 
october 2018 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 
october 2018 by garrettc
Negative Grid Lines
Uses for negative grid lines.
css  webdesign  grid  layout 
october 2018 by garrettc
Accessibility Cheatsheet
Practical approaches to Universal Design for making your website/webapp accessible to everyone
accessibility  cheatsheet  reference  webdesign  webdevelopment  bestpractice 
october 2018 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  flex 
september 2018 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  flex 
september 2018 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 
september 2018 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 
september 2018 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 
september 2018 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 
september 2018 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 
september 2018 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 
september 2018 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 
september 2018 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 
august 2018 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 
august 2018 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  flex 
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&#x27;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
« earlier      
per page:    204080120160

Copy this bookmark:





to read