Layout   312919

« earlier    

Flexbox — The Animated Tutorial
By JavaScript Teacher - Aug 3, 2018
articles  CSS  layout 
yesterday by mycotn
CSS { In Real Life } | How to convince your team to adopt CSS Grid
CSS In Real Life is a blog covering CSS topics and useful snippets on the web’s most beautiful language. Published by Michelle Barker, front end developer at Ordoo and CSS superfan.
grids  layout  web  css-grid  cssgrid 
yesterday by bruno
Blloc | People First
Blloc is a plain, minimalistic and effective smartphone. An efficient affordable hardware that is built to respect your time and be the perfect communication and productivity tool that you can rely on every day. Regain control of your privacy and data
layout  inspo💡 
yesterday by SliCooper
Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page. For example, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page.
css  javascript  positioning  js-library  layout 
2 days ago by aagd
How to convince your team to adopt CSS Grid
Are you keen to jump into CSS Grid Layout but having trouble convincing the rest of your team (whether your peers or your managers)? Someone asked me recently if I had any advice for convincing a skeptical team to adopt CSS Grid into their workflow. Although I haven’t faced any major barriers on this front myself, it’s a story I hear all too often. You’re ready to dive in and work with the latest modern layout techniques, only for the higher powers to put the brakes on. Although frustrating, there is some rationality here. Let’s break that down.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  support 
2 days ago by spaceninja
User interfaces: hiding stuff should be a last resort
“Effective design involves two essential actions: discarding the superfluous and deciding where to put things. Of the two, discarding must come first.”
fridayfrontend  design  layout  ui  ux  accessibility  hidden  cssbasics 
2 days ago by spaceninja
Responsive spacing with viewport and ch units
What I wanted with some elements of my site was some padding around them that was responsive to the viewport in both directions. The smaller the viewport — in either dimension, the tighter the element could be. When the user’s viewport was large, it could be very roomy. I found that using both vw and vh units made this quite easy — and without media queries.
fridayfrontend  css  layout  vw  vh  viewport  ch  units  responsive  cssbasics 
2 days ago by spaceninja
Sophisticated Partitioning with CSS Grid
Each postcard-sized handbill was a photocopied grid of roughly a dozen shows, and each listing within the grid was like a tiny poster. In addition to making Tinnitus Tracker a more fun experience, taking inspiration from those handbills is a good opportunity to experiment with CSS Grid, and getting started is pretty easy.
fridayfrontend  grids  layout  css  cssgrid 
2 days ago by spaceninja
The State of CSS, with Una Kravets
The memes have not been kind to CSS over the years. Remember the gif of Peter Griffin fighting with the blinds, captioned "CSS"? It has a reputation of being unwieldy and hard to use. But how much of that is still true today? Things like preprocessors have helped to hide some of the unpleasantries of CSS and APIs like flexbox, grid, and Houdini have come a long way to help make development easier.
fridayfrontend  video  css  houdini  layout  flexbox  cssgrid  sass  preprocessors  postcss 
2 days ago by spaceninja

« earlier    

related tags

$  abbondanza  accessibility  advice  agency  algorithm  android  articles  assets  australia  authoring  autolayout  backtick  baseline  best_practices  bigliettivisita  bind  binding  blade  book  books  bootstrap-theme  bootstrap  brutalist  bsd  builder  building  calcs  calculations  cell  ch  code  coding  collection  colours  columns  components  configurator  containerqueries  cookbook  css-grid  css  css3  css_grid  cssbasics  cssgrid  customize  customproperties  d3  data  defer  defined  design  designer  designsystem  dev  developer  dimension  displaycontents  dvorak  ebook  ecommerce  editor  effects  electronics  example  examples  extend  fix  flex  flexbox  font  fonts  foss  framework  free  fridayfrontend  future  generative  generator  genesis  government  graphics  grid-area  grid  grids  guide  guitar  height  hidden  hn  hook  hooks  houdini  house  howto  html  ie  illustration  images  information  inspiration  inspo💡  interface  ios  japanese  javascript  jquery  js-library  js  kbd  key  keyboard  language  laravel  laravel5  layout  library  linux  map  margins  masonary  masonry  max-content  mediaqueries  metrics  min-content  mix  mouse  mozilla  museum  musical  not  nth  online  opensource  options  pcb  people  photography  planning  plugin  pointer  portfolio  positioning  postcss  preprocessors  publishing  qmk_firmware  react-hooks  react  reference  remove  resizable  resources  responsive  rooms  safearea  sass  scaling  scss  security  semantic  semantics  shapes  sharepoint  site  size  sketch  smallbear  software  stackoverflow  studio  styling  subgrid  support  svg  symbols  table  techniques  template  text  time  tips  tool  tools  traits  troubleshooting  tutorial  typesetting  typography  ui  uikit  uistackview  uiview  uk  units  unix  us  usability  usedimension  ux  variables  verktyg  vh  video  view  viewport  visualization  vue  vw  w3  web  webbpublicering  webdesign  webdev  webfonts  webpack  width  window  windows  wysiwyg  xmodmap 

Copy this bookmark: