variables   2512

« earlier    

Inlining SVG background images in CSS with custom properties
So now I’ve got the same SVG source inlined in two places. That negates any performance benefits I was getting from inlining in the first place. That’s where Trys comes in. He shared a nifty technique he uses in this exact situation: put the SVG source into a custom property!
fridayfrontend  css  cssbasics  svg  inline  customproperties  variables 
3 days ago by spaceninja
Custom Property controlled fluid type sizing
Without getting too much into the weeds, you set a min size and a max size (with optional min and max screen sizes), and the calc-based formula works out a fluid measure, on the fly, based on those 2 locks and the window’s current width.
fridayfrontend  css  cssbasics  customproperties  variables  typography  responsive  locks  fluid  utility 
10 days ago by spaceninja
Get a CSS Custom Property value with JavaScript
CSS Custom Properties are handy for making highly configurable CSS components and themes, but that’s not their only handy use. Sometimes you might want to do something like send some information to some JavaScript.
fridayfrontend  cssbasics  javascript  css  customproperties  variables 
10 days ago by spaceninja
Why you should use CSS env()
Having difficulty keeping shared CSS and JavaScript values updated and in sync? Are you faced with seemingly random bugs when updating shared values? In this article you’ll find out how you can use the upcoming CSS env() feature and a PostCSS plugin to share the same variables between CSS and JS, AND store them in a single file.
fridayfrontend  css  env  variables  javascript  environment  customproperties 
10 days ago by spaceninja
Building Robust Layouts With Container Units
When inspecting most other grids in DevTools, you’ll notice that column widths are dependent on their parent element. This article will help you understand how to overcome these limitations using CSS variables and how you can start building with container units.
layout  variables  grids  webdev  css  cssgridlayout 
13 days ago by Jolantis
How to create better themes with CSS variables
CSS variables (also known as custom properties) are part of a relatively recent CSS specification and are rapidly growing in popularity thanks to their now-widespread browser support (with a few exceptions that we’ll visit later). They allow us to define values for reuse throughout a CSS file — something that had previously only been possible with preprocessors like Sass and LESS. In this article, we’ll explore what makes CSS variables special and some of the ways in which they can benefit us today.
fridayfrontend  cssbasics  css  customproperties  variables  themes  darkmode 
17 days ago by spaceninja

« earlier    

related tags

2018  2019  ansible  api  app  args  argument  arrays  article  authentication  automation  aws  backend  bash  bem  block  boolean  breakpoints  build  calculations  chriscoyier  cli  code  coding  color  colours  columns  commandline  compose  computing  configuration  constants  containerqueries  content  credentials  css-in-js  css-tricks  css-variables  css  cssbasics  cssgrid  cssgridlayout  cssmodules  custom-properties  customproperties  dark  darkmode  data  default  demo  design+systems  design  designsystem  dev  development  devscola  docker-compose  docker  dockerfile  documentation  dry  education  env  envipane  enviroment  environment  environments  environmentvariables  example  examples  expose  extension  extensions  extention  flag  flexbox  fluid  formacion  framework  fridayfrontend  front_end  frontend  function  gettingstarted  global  globally  globals  grid  grids  guide  howto  html  iam  icinga  icons  inline  issue  java  javascript  js  k8s  keyboardmaestro  kubernetes  launchd  layout  learning  library  light  linux  literals  locks  lookup  loop  macos  macosx  manual  map  maps  multicolored  mysql  names  naming  nested  node  nodejs  null_resource  of  os-linux  os  osx  output  outside  parameters  pen  performance  photoshop  php  plugin  pod  policy  postcss  postman  powerapps  powershell  preprocessor  preprocessors  programming  properties  pseudo  reference  registry  research  responsive  rhythm  root  rotation  ruby  safe-area-inset  sass  science  scope  scripting  scss  server  set  shapes  shell  smacss  ssh  statistics  stringify  studio  super  superglobals  svg  switch  switches  tags  teach  teaching  template  terraform  testing  theme  themes  tip  tips  tokens  tricks  tutorial  tynker  types  typography  unix  utility  ux  vars  vertical  video  visual  volatile  vscode  web  webdev  windows  wordpress  yoast 

Copy this bookmark: