variables   2485

« earlier    

How to combine SASS color functions and CSS Variables
A new method, supported in all browsers, to store your colors in CSS Variables and modify them using SASS functions.
fridayfrontend  css  sass  color  variables  customproperties 
8 days ago by spaceninja
manual:Calculations [Keyboard Maestro Wiki]
“If a variable contains a sequence of numbers separated by comma (,) then you can access that variable using array notation (eg MyVar[5]). So if variable MyVar has a text value of 10,20,30,40,50,60, MyVar[5] will return 50.

“The index is itself an expression, so it can be arbitrarily complex.

“Indices are 1-based, so MyVar[1] is the first element. If the index is 0, the size of the array is returned (so MyVar[0] would be 6). If the index is less than zero, the array is indexed from the end (so MyVar[-5] would be 20).”
keyboardmaestro  variables  arrays  calculations  2019 
15 days ago by handcoding
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.
fridayfrontend  css  cssgrid  grids  layout  variables  customproperties 
15 days ago by spaceninja
Making Future Interfaces Playlist
This week's lunch video is actually a playlist of short videos by Heydon Pickering about advanced front-end techniques like CSS shapes, custom properties, and algorithmic layouts. And if that's not enough to convince you, they're also really funny. Highly recommended.
fridayfrontend  video  css  shapes  customproperties  variables  svg  flexbox  grids  layout  cssgrid  containerqueries 
15 days ago by spaceninja
How to theme with CSS variables (custom properties)
Some time back we wrote an article about theming with Sass, which tackled the tricky front-end task of creating CSS themes without the need to do battle with specificity. It’s a really neat technique which makes use of Sass maps and a little bit of BEM. Three years on, the CSS tools we have at our disposal have advanced hugely and one of them, in particular, is really useful for solving this exact issue. Given that the Sass theming article has become one of our most popular blogs, I thought we ought to update it. So what’s this new CSS feature?
fridayfrontend  css  cssbasics  bem  customproperties  variables 
28 days ago by spaceninja
Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints
CSS custom properties (a.k.a. CSS variables) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn’t come as a surprise, because they can be really helpful in numerous use cases, including managing color palettes, customizing components, and theming. But CSS variables can also be really helpful when it comes to responsive design.
fridayfrontend  cssbasics  css  customproperties  responsive  breakpoints  variables 
28 days ago by spaceninja
Square Grid with css grid
This is a component thats puts everything into squares that you throw inside of it. It comes with 3 variables for modification....
grid  css  variables  layout 
4 weeks ago by sistrall

« earlier    

related tags

2018  2019  angular  animation  ansible  api  app  arguments  arrays  asterisk  authentication  automatic  automation  aws  backend  bash  bem  block  blog  boolean  breakpoints  button  calculations  callback  chriscoyier  class  cli  code  color  colours  columns  compose  config  const  constants  containerqueries  content  credentials  css-in-js  css-tricks  css-variables  css  cssbasics  cssgrid  cssmodules  currentcolor  custom-properties  custom  customproperties  d8  darkmode  data  default  demo  design+systems  dev  development  devscola  docker-compose  docker  docksal  documentation  dotenv  drupal  dry  dzone  env  environment  environments  environmentvariables  es6  example  examples  export  expose  extension  extensions  extention  file  flag  flexbox  formacion  framework  fridayfrontend  front_end  frontend  gettingstarted  global  google_tag_manager  grid  grids  guide  haskell  howto  html  iam  icinga  icons  input  issue  java  javascript  js  k8s  keyboardmaestro  kubernetes  layout  let  library  lookup  loop  macos  macosx  manage  management  manual  map  maps  multicolored  mysql  names  naming  nested  node  nodejs  null_resource  of  output  parameters  pen  performance  photoshop  php  plugin  pod  policy  postcss  postman  powerapps  powershell  predefined  preprocessor  preprocessors  prod  programming  properties  pseudo  python  query  rebuild  reference  responsive  rhythm  rotation  ruby  safe-area-inset  sass  scope  screencast  scripting  scss  server  set  setproperty  shapes  shell  shells  smacss  splitting  ssh  stringify  studio  svg  switch  switches  syntax  tags  template  terminals  terraform  testing  themes  tip  tips  tokens  tolearn  toread  totry  tounderstand  tricks  tutorial  types  typography  undefined  unix  url  ux  var  vars  vba  vertical  video  visual  web  webdev  webpack  wordpress  yoast  youtube 

Copy this bookmark: