CSS Grid Layout Simple Example

 .ui .layout {

    display: grid;
    grid-template-columns: 90px auto;
    grid-template-rows: 60px auto 30px;
    grid-template-areas: 
        "sidebar header"
        "sidebar content-section"
        "sidebar footer";
    height: 100vh; /* Full height of the viewport */
}

---

Explanation of Each Property:

1. display: grid;

   • This sets the layout type to grid, which allows placing child elements in a structured way (rows and columns).

2. grid-template-columns: 90px auto;

   • This defines two columns:
     • The first column is fixed at 90px width (typically for a sidebar).
     • The second column takes up the remaining space (auto).

Pros and cons of SCSS (Sass) compared to CSS

 SCSS (Sass):

    Pros:

1. Variables: SCSS allows you to declare variables, making it easy to reuse values throughout your stylesheets. This promotes consistency and reduces redundancy in your code.

2. 
   

3. Nesting: SCSS allows for nested CSS rules, which can help to organize and structure your stylesheets in a more hierarchical way, resembling the HTML structure. This can improve readability and maintainability.

4. 
   

5. Mixins: SCSS supports mixins, which are reusable blocks of styles that can be included in multiple selectors. This enables you to encapsulate common patterns or sets of styles, promoting code reusability and maintainability.

6. 
   

7. Functions: SCSS includes built-in functions that allow for more advanced and dynamic stylesheet generation. These functions can perform calculations, manipulate colors, and more, providing greater flexibility in your stylesheets.

8. 
   

9. Partials and Importing: SCSS supports the use of partials, which are separate files containing segments of CSS that can be imported into other SCSS files. This modular approach can help to organize your stylesheets into smaller, more manageable pieces.

10. 
    

11. Extends: SCSS provides the @extend directive, which allows one selector to inherit styles from another selector. This can help to avoid code duplication and maintain a more DRY (Don't Repeat Yourself) codebase.

What is Hex Triplet?

A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. Thus web colors specify colors in the True Color (24-bit RGB) color scheme. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order:

Byte 1: red value (color type red)
Byte 2: green value (color type green)
Byte 3: blue value (color type blue)

RedGreenBlue

For example, consider the color where the red/green/blue values are decimal numbers: red=36, green=104, blue=160 (a grayish-blue color). The decimal numbers 36, 104 and 160 are equivalent to the hexadecimal numbers 24, 68 and A0 respectively. The hex triplet is obtained by concatenating the 6 hexadecimal digits together, 2468A0 in this example.
If any one of the three color values is less than 16 (hex) or 10 (decimal), it must be represented with a leading zero so that the triplet always has exactly six digits. For example, the decimal triplet 4, 8, 16 would be represented by the hex digits 04, 08, 10, forming the hex triplet 040810.

The number of colors that can be represented by this system is 2563 or 224 or 166 = 16,777,216

Shorthand hexadecimal form

An abbreviated, three (hexadecimal)-digit form is used.[4] Expanding this form to the six-digit form is as simple as doubling each digit: 09C becomes 0099CC as presented on the following CSS example:

.threedigit { color: #09C;    }
.sixdigit   { color: #0099CC; } /* same color as above */

The three-digit form is described in the CSS specification, not in HTML. As a result, the three-digit form in an attribute other than "style" is not interpreted as a valid color in some browsers.

This shorthand form reduces the palette to 4,096 colors, equivalent of 12-bit color as opposed to 24-bit color using the whole six-digit form (16,777,216 colors), this limitation is sufficient for many text based documents.

What is a Media Query?

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive web design.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Eg:
If the browser window is smaller than 500px, the css code executed within the bracket.

@media screen and (max-width:500px) { ... }

A media type can be declared in the head of an HTML document using the "media" attribute inside of a <link> element.