CSS Playground (css uHost)

This project focus on css.

Dev server: Point your browser at the below address!

🔽To the main content

http://127.0.0.1:5173/

Contents

1. CSS Specificity
2. Combinators
3. Box Model & Positioning elements and deep dive inside css
4. Background and Image
5. Sizes & Units
6. Responsive Website
7. Styling Form
8. Custom Font
9. Flex Box
10. CSS Grid
11. Transitions & Animations
12. Guide on Future proof css code
13. Sassy CSS
14. Other Resources

---

CSS Specificity

• The universal selector * has no specificity value (0, 0, 0, 0);

🔼Back to the top

Combinators

🔼Back to the top

Box Model & Positioning elements and deep dive inside css

1. Positioning theory
2. More about the "position" property
3. The z-index
4. The Stacking Context
5. Mastering margin collapsing

Deep Dive on "Margin Collapsing"

1. Adjacent Siblings: In this case, the first element might have a margin of 10px (on all sides let's say) and the second one has 5px (or 20px - the values don't matter). CSS will collapse the margins and only add the bigger one between the elements. So if we got margins of 10px and 5px , a 10px margin would be added between the elements

2. A parent with children that have a margin:

   • To be precise, the first and/ or last or the only child has to have margins (top and/ or bottom). In that case, the parent elements margin will collapse with the child element(s)' margins. Again, the bigger margin wins and will be applied to the parent element.

   • If the parent element has padding, inline content (other than the child elements) or a border, this behavior should not occur, the child margin will instead be added to the content of the wrapping parent element.

3. An empty element with margins: This case probably doesn't occur that often but if you got an element with no content, no padding, no border and no height, then the top and bottom margin will be merged into one single margin. Again, the bigger one wins.

"display: none" vs "visibility: hidden"

• We had a look at display: none; - this value removes the element to which you apply it from the document flow. This means that the element is not visible and it also doesn't block its position. Other elements can (and will) take its place instead. It's still part of the DOM though, you can still access it via JavaScript for example.
• There is an alternative to that though. If you only want to hide an element but you want to keep its place (i.e. other elements don't fill the empty spot), you can use visibility: hidden;. Here it's not removed from the document flow and of course also not from the DOM.

1. When Using !important is The Right Choice
2. The :not() pseudo class

Float and Clear fix

1. Working With CSS Float And Clear Properties
2. More on float - MDN

🔼Back to the top

Background and Image

1. The background Property - mdn
2. Styling Images - w3 schools
3. Filters - mdn
4. Styling SVG - mdn

🔼Back to the top

Sizes & Units

• Hiding Vertical & Horizontal Scrollbars with Pure CSS

Which will the % (percentage) value calculated with ref. to? The answer depends on the position property of the html element and the containing block (container), which the element takes as ref. for calculation of percentage.

The Containing Block

• The reference point when applying % units to an element
• Depends on the position property applied to this element
• Can be the closest ancestor or the viewport

🔼Back to the top

Responsive Website

Screen Resolution Stats Worldwide - Statcounter GlobalStats

About Viewport Meta-tag

• Should be added to your HTML files to adjust the viewport to device size
• Converts hardware pixels into software pixels and therefore takes into account the actual device width

1. Setting the Viewport Meta Tag - Noble Desktop
2. Responsive Meta Tag - CSS Tricks
3. A Beginner’s Guide to Viewport Meta Tags - Semrush

🔼Back to the top

Styling Form

• CSS -webkit-appearance - Quackit
• CSS appearance - mdn
• Styling web forms - mdn
• How do I style a select dropdown with only CSS? - StackOverflow

🔼Back to the top

Custom Font

• How To Load and Use Custom Fonts with CSS
• font-family - mdn
• Web safe fonts
• The line-height property - mdn

Font short-hand

    font: italic small-caps 400 1.2rem/2 'Montserrat', sans-serif;

the order will be as below:

font: font-style font-variant font-weight font-size/line-height font-family; 

• font-size and font-family should be there in the short-hand

	Block Period	Swap Period	Outcome
block	short	infinite	FOIT, Layout shifts
swap	none	infinite	FOUT, Layout shifts
fallback	extremely short	short	Minimize the risk of layout shift & invisible texts
optional	extremely short	none	Minimize the risk of layout shift & invisible texts(even better than fallback, as no swap period)
auto	based on user agent	based on user agent	based on user agent

1. Controlling Font Performance with font-display
2. Font loading strategies: FOIT and FOUT
   • FOIT - Flash Of Invisible Text
   • FOUT - Flash Of Unstyled Text
3. Optimize web fonts loading - YouTube

🔼Back to the top

Flex Box

• Adding the z-index to an element only has an effect, if the position property with a value different from static was applied to this element.
• One exception from this behaviour is flexbox. Applying the z-index to flex-items (so the elements inside of the flex-container) will change the order of these items even if no position property was applied.

  .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    align-content: normal;
    /* short-hand for flex */
    /* 
      flex-flow: flex-direction flex-wrap;
    */
    flex-flow: row nowrap;
  }

• flex-basis is based on the main axis. If flex-direction: row;, flex-basis will be replaced the width of the element (X - axis). If flex-direction: column;, flex-basis will be replace the height of the element (Y - axis).

🔼Back to the top

CSS Grid

🔼Back to the top

Transitions & Animations

• Simple animation

  .modal {
    /* animation css - `ease-in` -> starts slower & ends faster; `ease-out` -> reverse of the prior */
    opacity: 0;
    transform: translateY(-3rem);
    transition: opacity 200ms, transform .5s;
  }

  .open {
    opacity: 1;
    transform: translateY(0);
  }

/* transition: WHAT DURATION DELAY TIMING-FUNCTION; */
transition: opacity 200ms 1s ease-out;

The above line can be translated to: "Animate any changes in the opacity property (for the element to which the transition property is applied) over a duration of 200ms. Start fast and end slow, also make sure to wait 1s before you start".

1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
5. MDN article on CSS transitions
6. Easing Functions Cheat Sheet

/* animation: NAME DURATION DELAY TIMING-FUNCTION ITERATION DIRECTION FILL-MODE PLAY-STATE; */
animation: wiggle 200ms 1s ease-out 8 alternate forwards running;

@keyframes wiggle {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(10deg);
  }
}

The above line Can be translated to: "Play the wiggle keyframe set (animation) over a duration of 200ms. Between two keyframes start fast and end slow, also make sure to wait 1s before you start. Play 8 animations and alternate after each animation. Once you're done, keep the final value applied to the element. Oh, and you should be playing the animation - not pausing."

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state
9. MDN article on CSS animations

• List of "transitionable" Properties

🔼Back to the top

Guide on Future proof css code

• CSS Modules & Working Groups
• CSS Variables
• Vendor Prefix- mdn
• Which Vendor Prefixes should you use?
• @supports - mdn
• BEM in detail
• An introduction to Bootstrap 4 - Academind
• CSS Polyfills
• Auto prefixer - online

🔼Back to the top

Sassy CSS

SASS -> Systematically Awesome Style Sheets SCSS -> Sassy Cascading Style Sheets

Nested Properties

SCSS code

  $full-width: 100%;

  .mobile-nav__items {
    width: 90%;
    height: $full-width;
    display: flex;
    flex: {
      direction: column;
      wrap: nowrap;
    }
  }

CSS Code

  .mobile-nav__items {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

Lists & Maps

SCSS Code

  $border-size: 1.5px;

  // map
  $color: (green-dark: #0e4f1f, red-bright: #ff1b68);

  // List
  $border-default: $border-size solid map-get($color, green-dark);


  .button {
    background: map-get($color, red-bright);
    color: white;
    font: inherit;
    border: $border-default;
    padding: .5rem;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
  }

CSS Code

  .button {
    background: #ff1b68;
    color: white;
    font: inherit;
    border: 1.5px solid #0e4f1f;
    padding: 0.5rem;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
  }

Built-in functions

  // SCSS
  .background {
    $dark-green: #0e4f1f;
    background: lighten($dark-green, 72%);
  }

  // CSS

  .background {
    background: #d5f8de;
  }

• SCSS/SASS built-in functions - github
• SASS built-in modules

Arithmetic operations in SASS/SCSS

SCSS

  $border-size: 1rem;

  .maths {
    border-radius:$border-size * 3;
  }

CSS

  .maths {
    border-radius: 3rem;
  }

Media query in SASS/SCSS

SCSS

  .container {
    display: flex;
    flex-direction: row;
    font-size: 15px;

    @media (min-width: 40rem) {
      flex-direction: column;
      font-size: 10px;
    }
  }

CSS

.container {
  display: flex;
  flex-direction: row;
  font-size: 15px;
}

@media (min-width: 40rem) {
	.container {
		flex-direction: column;
		font-size: 10px;
	}
}

Inheritance in SCSS/SASS

SCSS

  $color: (green-dark: #0e4f1f, red-bright: #ff1b68);
  $border-size: 1.5px;

  .sass-section {
    font-family: 'Montserrat', sans-serif;
    border: $border-size solid map-get($color, green-dark);
    width: 50px;
  }

  .box1 {
    @extend .sass-section;
    height: 60px;
  }

  .box2 {
    @extend .sass-section;
    height: 70px;
  }

CSS

  .sass-section, .box1, .box2 {
    font-family: 'Montserrat', sans-serif;
    border: 1.5px solid #0e4f1f;
    width: 50px;
  }

  .box1 {
    height: 60px;
  }

  .box2 {
    height: 70px;
  }

  /* OR */

  .box1 {
    font-family: 'Montserrat', sans-serif;
    border: 1.5px solid #0e4f1f;
    width: 50px;
    height: 60px;
  }
  .box2 {
    font-family: 'Montserrat', sans-serif;
    border: 1.5px solid #0e4f1f;
    width: 50px;
    height: 70px;
  }

Mixins

SCSS

  $dark-green: #0e4f1f;

  // mixin without arguments
  @mixin display-flex() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .container {
    @include display-flex();
    flex-direction: column;
  }

  // mixin with arguments
  @mixin media-min-width($width) {
    @media (min-width: $width) {
      border: 2px solid green;
      @content;
    }
  }

  body {
    background: $dark-green;
    font-size: 15px;

    @include media-min-width(40rem) {
      font-family: 'Montserrat', sans-serif;
      font-size: 10px;
    }
  }

CSS

  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
  }

  body {
    background: #0e4f1f;
    font-size: 15px;
  }

  @media (min-width: 40rem) {
    body {
      border: 2px solid green;
      font-family: 'Montserrat', sans-serif;
      font-size: 10px;
    }
  }

1. CSS @import Rule
2. Using SASS partials
3. Sass @import and Partials

🔼Back to the top

Resources for Vite

1. Vite in a simple html+js use case
2. Static Asset Handling - Vite official
3. Shared Options - Vite official
4. How to Convert a String to HTML using JavaScript
5. Append element as sibling after element? - Stackoverflow

🔼Back to the top