notes.txt

https://jamesclear.com/
https://aliabdaal.com/

# CSS

In order to get a scroll bar when too large for the box: 
overflow: auto

In order to have the scale of the border and padding not increase the size of the box:
box-sizing: border-box. 
(Do this for all elements. )

To get a span to respect width and heigth: 
display: inline-block


Absolute positioning:
then it's like it's on another layer, and will not affect the others. 

Do mobile-first development: then resize for larger screens. 

@media screen and (min-width: 600) {
  .container {
    flex-direction: row;
  }
}


Downloaded font: 
@font-face {
  font-family: "opensans";
  src: url("/fonts/open-sans/opensans-bold-webfont.woff2") format("woff2"),
    url("/fonts/open-sans/opensans-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "opensans";
  src: url("/fonts/open-sans/opensans-regular-webfont.woff2") format("woff2"),
    url("/fonts/open-sans/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}



.withbackgroundimage {
  background-image: url("/images/bg-paper.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

Free Icons: 
flaticon.com

Should Sprite your logos and icons. Reduce the number of http requests your images will be gotten with one http request instead of one GET for every image. 
- cssspritestool.com
- will then have one png image with all your icons. 
- and you apply some css code that is also generated, to get the specific locations for that image. 
- should use spans with background-image to display these sprites. 
- should not combine big images (like photos of people, not very flexible)
- use this for small images like locos and icons. 

Very small and simple icons can ge put directly into your html code. 
- Search for data uri generator. 
- This generates a string that represents your icon. Then embed this directly into img. 
- <img alt="" src="data:image/png";base64..."/>
- Dont use this though, slow on mobile. 


Can clip / crop images directly in css.
- find the code with css clip maker online tools. 
- clip-path: polygon(...)

Can also apply filters directly in css. 
- can be applied on hover, which is pretty cool. 
- like all images are grayscale, and color on the one that you hover over. 

Multi-resolution images. 
- save images in multiple resolutions. 
- then apply srcset with multiple image resolution, and your computer picks the one that fits best. 
- only apply this for images that are supposed to look super-sharp. 
      <img 
        src="images/meal.jpg"
        srcset="
          images/meal.jpg 400w, 
          images/meal.jpg 800w, 
          images/meal.jpg 1200w, 
        "
        sizes="
          (max-width: 500px) 100vw,
          (max-width: 700px) 50vw,
          33vw
        "
      />
- This can be done easily with online tools as well. "Responsive breakpoints". 

You want to have a lot of images in .webp format. They are smaller and faster to load. 
- internet explorer does not support this. 
- so you should do
  <picture>
    <source type="image/webp" srcset="images/meal.webp"/>
    <source type="image/jpeg" srcset="images/meal.jpg"/>
    <img src="images/meal.jpg" alt="A boal of salmon and curry."/>
  </picture>


Art Direction (different images for different size medias. )
- Cropping for different sizes. Mobile crop and zoom.
- So you have different images, where some are cropped. 
<picture>
    <source media="(max-width:500px) "type="image/webp" srcset="images/meal.webp"/>
    <source media="(min-width:501px) type="image/jpeg" srcset="images/meal2.jpg"/>
    <img src="images/meal.jpg" alt="A boal of salmon and curry."/>
  </picture>


SVG
- svgbackgrounds.com
- also have icon fonts, which makes it easy to get a lot of icons.