Responsive Recipe Page

Community feedback

• 

  Mustafa Sen•3,180

  @mustafasen97

  Posted about 2 months ago

  You have created a beautiful design. Congratulations for that.

  Now, let me talk a little bit about variables in the first step.

  CSS variables allow you to define values ​​that you use repeatedly in one place and use them throughout your project. They are usually defined in :root.

  Here you can assign size/measurement variables, color variables, font variables and many more to reduce code duplication.

  Example:

  :root {
  
  // Font variables
  
  --font-family-base: "Outfit", sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-weight-bold: 700;
  
  // Color variables
  
  --color-primary: #4f46e5;
  --color-secondary: #facc15;
  --color-text: hsl(0, 0%, 20%);
  --color-muted: rgba(0, 0, 0, 0.5);
  
  //Space/Dimension variables
  
    --spacing-xs: 4px;
    --spacing-sm:8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
  
    --border-radius: 12px;
    --max-width-container: 1200px;
  
  //Animation variables
  
   --transition-duration: 0.3s;
    --transition-ease: ease-in-out;
    --animation-delay: 150ms;
  
  }
  
  

  You can assign things like these to variables and then call them elsewhere, thus reducing code duplication.

  Another topic is functions. There are many built-in functions in CSS. We can show some of them with the following example:

  // color function
  
  background-color: rgba(0, 0, 0, 0.5);
  
  // calculation function
  
  width: calc(100% - 50px);
  padding: calc(1rem + 2vw);
  
  // clamp() — Determine Minimum, Preferred, Maximum Range
  
  font-size: clamp(1rem, 2.5vw, 2rem);
  
  // min() → Gets the smallest value.
     max() → Gets the largest value.
  
  width: min(100%, 600px);
  height: max(300px, 50vh);
  
  // url() — Calling a background or image
  
  background-image: url("images/bg.jpg");
  
  
  

  You can make some calculations or settings using these types of functions. Some of these functions are especially preferred for responsive design. I think you will understand this topic better as you practice.

  10

  Marked as helpful