vaupeh + css   149

A Strategy Guide To CSS Custom Properties
CSS Custom Properties (sometimes known as ‘CSS variables’) are now supported in all modern browsers, and people are starting to use them in production. This is great, but they’re different from variables in preprocessors, and I’ve already seen many examples of people using them without considering what advantages they offer.

Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. I’m not going to focus on the syntax and how they work (for that I recommend you read “It’s Time To Start Using Custom Properties”). Instead, I want to take a deeper look at strategies for getting the most out of CSS Custom Properties.
css  css-variables  css-custom-properties 
8 weeks ago by vaupeh
CSS Grid — Responsive layouts and components
Let’s make a photo gallery responsive quickly and using very few lines of CSS.
CSS  grid  grid-layout  image-gallery  responsive 
9 weeks ago by vaupeh
The Front-End Checklist
The Front-End Checklist Application is perfect for modern websites and meticulous developers!
checklist  cheatsheet  frontend  resources  html  css  Javascript 
11 weeks ago by vaupeh
Collection of CSS snippets
Some time ago I asked on twitter about the favorite CSS snippets people use regularly.
CSS  snippet  snippets  toolbox 
april 2018 by vaupeh
What no one told you about z-index
Deep dive into the stacking of HTML elements
CSS  z-index 
march 2018 by vaupeh
30 Seconds of CSS
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
CSS  snippet 
march 2018 by vaupeh
Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges
Concise examples what to achieve with the nth-child CSS selector
CSS  nth-child 
february 2018 by vaupeh
« earlier      
per page:    204080120160

related tags

absolute  accessibility  adaptive  addon  alternatives  animation  architecture  aria  aria-roles  atomic  atomiccss  background  background-image  bem  best-practice  best-practise  bestpractice  bestpractices  blog  boilerplate  bootstrap  border  breakpoint  bringhurst  broken-image  browser  browser-bug  bug  bugs  button  buttons  calculator  center  centering  cheatsheet  checkbox  checklist  clear  clearfix  code  codestandards  collapse  collapsing-margins  color  colored  columns  comparison  compatibility  component  css  css-custom-properties  css-variables  css3  custom  data-uri  design  development  documentation  Drupal  e-mail  eclipse  editor  element  elements  ellipsis  em  em-square  email  emulate  example  explorer  external  fallback  filter  firefox  flex  flexbox  flexible  float  font  font-loading  fonts  form  forms  foundation  framework  frontend  gap  generator  gmail  google  gradient  grid  grid-layout  guide  guidelines  hack  hacks  haslayout  height  Helpers  horizontal  houdini  hover  howto  html  html-email  html5  icon  icons  ie  ie6  ie7  ie8  image  image-gallery  images  important  in-depth  inline  inline-block  inline-element  internet  javascript  jquery  js  layout  line-height  linux  magento  mail  mailclient  margin  marketing  max-width  mediaqueries  mediaquery  min-width  mobile  modular  modules  multiline  newsletter  nth-child  oo-css  oocss  optimization  overflow  pattern  performance  plugin  plugins  polyfill  position:  positioning  postioning  profiling  pseudo-element  radiobutton  radiobuttons  reading-list  reference  resizable  resources  responsive  ressourcen  rgba  roles  schriftgrad  search  selectors  semantic  semantic-html  smacss  snippet  snippets  specifity  sprites  stackingorder  standards  stick-header  sticky  sticky-header  style  styleguide  stylesheet  stylesheets  styling  svg  tabelle  table  templates  text  text-overflow  the  theme  themes  tips  tool  toolbox  tools  tooltips  touch  touch-device  truncation  tutorial  type  typographic  typography  usability  vector  vertical  vertical-align  visual  web  web-development  webdesign  webdev  webdevelopment  webentwicklung  webfont  webfonts  windows-10  windows-mail  z-index  z-index-bug  zen  zindex 

Copy this bookmark:



description:


tags: