garrettc + css   622

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 
9 days 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 
9 days 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 
9 days 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 
16 days ago by garrettc
NES.css
A NES-style CSS Framework.
8bit  css  framework  nes  nintendo 
16 days ago by garrettc
slick carousel
"Slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!"
css  jquery  javascript  clider  carousels 
22 days ago by garrettc
Concise Media Queries with CSS Grid
Write less CSS and organize responsive layouts with ease.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign 
26 days ago by garrettc
Braces to Pixels
In this installment of our “From URL to Interactive” series, Greg Whitworth explains how cascading actually works, and then some.
html  http  javascript  webdevelopment  network  browser  dom  css  parser 
4 weeks ago by garrettc
Tags to DOM
"Continuing our “From URL to Interactive” series, the second part dives into how HTML is parsed."
html  http  javascript  webdevelopment  network  browser  dom  css  parser 
6 weeks 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 
6 weeks 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 
8 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 
8 weeks ago by garrettc
Negative Grid Lines
Uses for negative grid lines.
css  webdesign  grid  layout 
8 weeks ago by garrettc
Valid CSS Content
"There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element."
css  content  webdevelopment  tips 
8 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 
11 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 
11 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 
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
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
The Font Loading Checklist—zachleat.com
"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."
css  fonts  performance  webfobts  bestpractice 
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
Component Based Design System With Styled-System
Component-based design system is the practice of splitting the UI into small, isolated and more manageable parts; backed by a set of design constraints. It builds upon ideas such as Atomic Design, Style Guides and Component-Based Architecture.
IFTTT  Pocket  css  javascript  react  components 
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 
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  from twitter_favs
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
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
Improving Your CSS with Parker
How to use Katie Fenn's excellent CSS tool Parker.
css  webdevelopment  performance  analysis  tool  nodejs  javascript 
july 2018 by garrettc
BackstopJS - Visual regression testing
"BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time."
css  javascript  html  webdevelopment  testing  chrome  headless  automation  regression  tool 
july 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
Getting to Know a Legacy Codebase
Excellent advice from Harry Roberts on getting to know a new (but legacy to you) codebase.
css  legacy  html  webdevelopment  worldwideweb 
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
Interneting Is Hard
Friendly web development tutorials for complete beginners
html  css  learning  webdevelopment  javascript 
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  from twitter_favs
july 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
Centering: The Newest Coolest Way vs. The Oldest Coolest Way
"This isn't a comprehensive guide to centering things. We have that! This is just a little observation about old and new."
css  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
Easing Functions Cheat Sheet
Make animations more realistic by picking the right easing function.
animation  reference  css  javascript  programming  userinterface 
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
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
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
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
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
Responsive And Fluid Typography With vh And vw Units
"Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design."
css  webdesign  responsivedesign  typography 
may 2018 by garrettc
A Guide To The State Of Print Stylesheets In 2018
We have covered print stylesheets in the past here on Smashing Magazine. In this article, Rachel Andrew takes a look at the state of printing from the browser today.
print  css  webdesign  webdevelopment  userexperience 
may 2018 by garrettc
cssgr.id | An interactive CSS Grid code tool and generator
Cssgr.id is an interactive tool to generate boilerplate code for CSS Grid layouts.
css  grid  generator  webdesign  layout  webdevelopment 
may 2018 by garrettc
Inclusive Components
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
accessibility  reference  css  components  html  webdevelopment  webdesign  bestpractice  patternlibrary 
april 2018 by garrettc
A Look at CSS Viewport Units
"Let's explore the vh, vw, vmin and vmax units and look at how it can make our designs easier to accomplish."
css  webdesign  viewport 
april 2018 by garrettc
HTML5 and jQuery Super Simple Drop Down Nav
Tutorials, guides, blogs and courses on Angular, TypeScript, JavaScript and front-end development.
webdevelopment  webdesign  userexperience  css  javascript  navigation  jquery  responsivedesign 
april 2018 by garrettc
Native-Like Animations for Page Transitions on the Web
"Some of the most inspiring examples I’ve seen of front end development have involved some sort of page transitions that look slick, like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not.

[…]

We’ll build out the simplest possible distallation of these concepts so that you can apply them to any application, and then I’ll also provide the code for this more complex app if you’d like to dive in."
animation  css  vuejs  programming  webdevelopment  userinterface  userexperience  learning 
april 2018 by garrettc
« earlier      
per page:    204080120160

related tags

3d  8bit  accessibility  actor  adventuretime  advertising  advice  ajax  analysis  animation  apache  api  app  appdesign  appdevelopment  apple  application  arch  architecture  archive  art  article  artificialintelligence  artist  astronomy  atmedia  atom  atomicdesign  audio  automation  backbone  background  barchart  baseline  bbc  behaviour  bem  bestpractice  bfc  blending  block  blog  boilerplate  book  bookmarklet  bootstrap  browser  bugs  build  business  buttons  calc  calculator  calendar  caniuse  canvas  carousels  character  chart  cheatsheet  checklist  chrome  cinema  citation  clean  clider  clock  cms  code  collaboration  colour  colourpicker  column  commentary  comments  commercial  community  comparison  compass  compatibility  component  components  conference  connect4  conservation  content  conversion  cool  course  craft  creativecommons  creativity  css  css3  cssshapes  data  date  debugging  deeplearning  demo  design  designpatterns  designsystems  designthinking  desktop  development  devops  dhtml  diagram  digital  discussion  django  documentation  dom  downloads  drawing  drupal  drupal8  ebook  editing  editor  education  effects  email  embed  emmet  english  epub  essential  events  evolt  example  examples  feedback  film  filter  firefox  flexbox  float  floats  font  font-face  fonts  footnotes  formatting  forms  fractal  framework  free  frontend  fun  funny  future  gallery  game  geek  generatedcontent  generator  github  google  gpl  gradient  graphics  graphs  grid  grunt  gss  gui  guide  guidelines  gulp  hacks  handheld  headless  history  howto  html  html5  http  https  humour  ia  icon  iconfonts  icons  ideas  ie6  IFTTT  illusion  illustrator  image  imagereplacement  imagery  images  infographics  information  informationarchitecture  inline  inspiration  interaction  interactive  interesting  interface  internationalisation  internet  internetexplorer  interview  ios  iphone  java  javascript  jquery  kss  language  layout  learning  legacy  less  library  links  list  literature  loading  logic  mac  machinelearning  mail  management  margins  marketing  markup  masonry  material  mathematics  maths  media  mediaqueries  medium  menu  metadata  methodology  microformat  mobile  mobilefirst  mobileweb  mockup  module  mozilla  mp3  nature  navigation  nes  network  networking  newsletter  nintendo  nodejs  nthchild  oop  opensource  opera  opticalillusion  optimisation  osx  outline  oxdug2013  painting  pamoja  parser  patternlibrary  patterns  pda  pdf  perception  performance  phantomjs  photography  photoshop  php  phptemplate  placeholder  planning  plugin  png  Pocket  podcast  portfolio  postcss  preprocessing  preprocessor  presentation  print  process  productivity  programming  progressiveenhancement  prototype  python  quantum  radial  rails  random  ratio  react  reading  reference  regression  research  resource  responsive  responsivedesign  results  rfp  ruby  rubyonrails  safari  sass  scalability  scale  scaling  science  scriptaculous  scripting  scroll  scrolling  scrollytelling  scss  semantics  shadowdom  shapes  sharing  showandtell  showcase  simplicity  sinatra  singlepage  sitemaps  sizing  sketching  slider  slideshow  smacss  smallscreen  snippets  social  software  solarsystem  space  sparklines  specification  spinner  standards  starwars  statistics  sticky  storytelling  stripe  structure  style  styleguide  survey  svg  swiss  sysadmin  system  tab  table  tables  tagging  teamsass  technique  technology  template  testing  text  textures  theme  theory  tips  tool  tools  torchbox  torchboxshowandtell  toread  transforms  transparency  trends  tricks  tutorial  twitter  typekit  typography  unicode  usability  useful  userexperience  userinterface  utility  uxoxford2012  vector  vertical  verticalrhythm  video  viewport  views  visual  visualisation  vml  vuejs  w3c  web  webcomponents  webdesign  webdevelopment  webfobts  webkit  webstandards  wii  windows  wireframes  worldwideweb  writing  xhtml  xml  xmlhttprequest  yahoo  yui 

Copy this bookmark:



description:


tags: