{"id":22962128,"url":"https://github.com/actionanand/css-uhost","last_synced_at":"2025-04-02T03:24:10.383Z","repository":{"id":216177161,"uuid":"740653371","full_name":"actionanand/css-uhost","owner":"actionanand","description":"This project focus on css.","archived":false,"fork":false,"pushed_at":"2024-02-09T06:46:31.000Z","size":4678,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T18:17:36.362Z","etag":null,"topics":["css","css3","node-engine-mentioned","node20","vite","vite-vanilla","vite-vanilla-js"],"latest_commit_sha":null,"homepage":"https://actionanand.github.io/css-uhost/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/actionanand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-08T19:36:31.000Z","updated_at":"2024-01-14T08:12:19.000Z","dependencies_parsed_at":"2024-02-06T04:32:13.142Z","dependency_job_id":null,"html_url":"https://github.com/actionanand/css-uhost","commit_stats":null,"previous_names":["actionanand/css-uhost"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fcss-uhost","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fcss-uhost/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fcss-uhost/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fcss-uhost/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actionanand","download_url":"https://codeload.github.com/actionanand/css-uhost/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246748447,"owners_count":20827311,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","node-engine-mentioned","node20","vite","vite-vanilla","vite-vanilla-js"],"created_at":"2024-12-14T19:15:24.693Z","updated_at":"2025-04-02T03:24:10.362Z","avatar_url":"https://github.com/actionanand.png","language":"HTML","readme":"# CSS Playground (css uHost)\nThis project focus on css.\n\nDev server: Point your browser at the below address!\n\n[🔽To the main content](#contents)\n\n```\nhttp://127.0.0.1:5173/\n```\n![image](https://github.com/actionanand/css-uhost/assets/46064269/61e5afe5-1704-427f-ad7c-33bf514466be)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/ae704491-2adb-4e2d-a9f8-848ffbf644e5)\n\n## Contents\n1. [CSS Specificity](#css-specificity)\n2. [Combinators](#combinators)\n3. [Box Model \u0026 Positioning elements and deep dive inside css](#box-model--positioning-elements-and-deep-dive-inside-css)\n4. [Background and Image](#background-and-image)\n5. [Sizes \u0026 Units](#sizes--units)\n6. [Responsive Website](#responsive-website)\n7. [Styling Form](#styling-form)\n8. [Custom Font](#custom-font)\n9. [Flex Box](#flex-box)\n10. [CSS Grid](#css-grid)\n11. [Transitions \u0026 Animations](#transitions--animations)\n12. [Guide on Future proof css code](#guide-on-future-proof-css-code)\n13. [Sassy CSS](#sassy-css)\n14. [Other Resources](#resources-for-vite)\n\n****\n\n## CSS Specificity\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/aecee362-1955-48f3-9a27-e4a67fb9fa14)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/16d7cdb1-f389-4452-b188-0188dab4a106)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/73fe75ef-1b50-40f4-af07-ef5a1c9f4e5c)\n\n* The universal selector * has no specificity value (0, 0, 0, 0);\n\n[🔼Back to the top](#contents)\n\n## Combinators\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/25296f30-4951-46d0-b204-9baa60b3d8f7)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/72e9cf15-ea73-4c16-97cf-f0f7ab82c48f)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/9e601b59-31d8-44b2-81f4-1b3d94a68028)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/212dd5c7-c72a-4a91-858a-8a89a2c77f6f)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/482409d1-2f9e-4613-ad48-dbb5553036dc)\n\n[🔼Back to the top](#contents)\n\n## Box Model \u0026 Positioning elements and deep dive inside css\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/2f5b520b-e8d7-41a0-8de5-4f5f78f7158b)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/a27e8c48-3c12-4f68-8bda-5f6f1140a052)\n\n\n1. [Positioning theory](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)\n2. [More about the \"position\" property](https://developer.mozilla.org/en-US/docs/Web/CSS/position)\n3. [The z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)\n4. [The Stacking Context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)\n5. [Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)\n\n### Deep Dive on \"Margin Collapsing\"\n\n1. **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\n\n2. **A parent with children that have a margin**:\n     * 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.\n\n    * 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.\n\n3. **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.\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/9f2c2b2d-024c-450c-b889-ccf44bc0b042)\n\n### \"display: none\" vs \"visibility: hidden\"\n\n* 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.\n* 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.\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/30cd00ab-19df-45d0-b8b5-04a730db78e4)\n![image](https://github.com/actionanand/css-uhost/assets/46064269/a35d6b1a-d2d7-4124-8947-9ddc4f29241d)\n\n1. [When Using `!important` is The Right Choice](https://css-tricks.com/when-using-important-is-the-right-choice/)\n2. [The `:not()`  pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)\n\n### Float and Clear fix\n\n1. [Working With CSS Float And Clear Properties](https://blog.openreplay.com/working-with-css-float-and-clear-properties/)\n2. [More on float - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/float)\n\n[🔼Back to the top](#contents)\n\n## Background and Image\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/c4c28015-896a-46b6-9545-c839b171c8d4)\n\n1. [The background Property - mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/background)\n2. [Styling Images - w3 schools](https://www.w3schools.com/css/css3_images.asp)\n3. [Filters - mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)\n4. [Styling SVG - mdn](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/469d2ad5-6a72-482e-8427-9c28374aaeb9)\n\n[🔼Back to the top](#contents)\n\n## Sizes \u0026 Units\n\n* [Hiding Vertical \u0026 Horizontal Scrollbars with Pure CSS](https://web.archive.org/web/20180505112131/https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/)\n\nWhich 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.\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/9369d41a-0852-4c94-83eb-3e8d26f46abd)\n\n### The Containing Block\n\n* The reference point when applying % units to an element\n* Depends on the position property applied to this element\n* Can be the closest ancestor or the viewport\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/450f79fb-e906-46fd-b9bb-f796ba2e1f7a)\n\n[🔼Back to the top](#contents)\n\n## Responsive Website\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/ed1e61bd-ad57-445d-b9e6-9211b5148994)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/6b9f5373-d29a-40a0-977d-05a5058227a7)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/2b9ebf94-0aba-420f-af92-65d10f5d4582)\n\n[Screen Resolution Stats Worldwide - Statcounter GlobalStats](https://gs.statcounter.com/screen-resolution-stats#monthly-201801-202401-bar)\n\n### About Viewport Meta-tag\n\n* Should be added to your HTML files to adjust the viewport to device size\n* Converts **hardware pixels** into **software pixels** and therefore takes into account the actual device width\n\n1. [Setting the Viewport Meta Tag - Noble Desktop](https://www.nobledesktop.com/learn/html-css/setting-the-viewport-meta-tag)\n2. [Responsive Meta Tag - CSS Tricks](https://css-tricks.com/snippets/html/responsive-meta-tag/)\n3. [A Beginner’s Guide to Viewport Meta Tags - Semrush](https://www.semrush.com/blog/viewport-meta-tag/)\n\n[🔼Back to the top](#contents)\n\n## Styling Form\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/bb83ab5d-2ce2-47e1-ba1d-d6bd01583519)\n\n* [CSS `-webkit-appearance` - Quackit](https://www.quackit.com/css/properties/webkit/css_-webkit-appearance.cfm)\n* [CSS appearance - mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)\n* [Styling web forms - mdn](https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms)\n* [How do I style a `select dropdown` with only CSS? - StackOverflow](https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css)\n\n[🔼Back to the top](#contents)\n\n## Custom Font\n\n* [How To Load and Use Custom Fonts with CSS](https://www.digitalocean.com/community/tutorials/how-to-load-and-use-custom-fonts-with-css)\n* [font-family - mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)\n* [Web safe fonts](https://www.cssfontstack.com/)\n* [The `line-height` property - mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)\n\n### Font short-hand\n\n```css\n    font: italic small-caps 400 1.2rem/2 'Montserrat', sans-serif;\n```\nthe order will be as below:\n\n```css\nfont: font-style font-variant font-weight font-size/line-height font-family; \n```\n\n* `font-size` and `font-family` should be there in the short-hand\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/3a056466-7b0e-4b84-8e46-db0ef211f587)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/6803a4ef-74cc-4686-bf84-75e935522d9f)\n\n|              | **Block Period**    | **Swap Period**     | **Outcome**                                                                                         |\n|--------------|---------------------|---------------------|-----------------------------------------------------------------------------------------------------|\n| **block**    | short               | infinite            | FOIT, Layout shifts                                                                                 |\n| **swap**     | none                | infinite            | FOUT, Layout shifts                                                                                 |\n| **fallback** | extremely short     | short               | Minimize the risk of layout shift \u0026 invisible texts                                                 |\n| **optional** | extremely short     | none                | Minimize the risk of layout shift \u0026 invisible texts(even better than `fallback`, as no swap period) |\n| **auto**     | based on user agent | based on user agent | based on user agent                                                                                 |\n\n\n1. [Controlling Font Performance with font-display](https://developer.chrome.com/blog/font-display)\n2. [Font loading strategies: FOIT and FOUT](https://dev.to/ibn_abubakre/font-loading-strategies-foit-and-fout-393b)\n    - **FOIT** - Flash Of Invisible Text\n    - **FOUT** - Flash Of Unstyled Text\n3. [Optimize web fonts loading - YouTube](https://www.youtube.com/watch?v=wnpMeYARV4g)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/74c29804-e812-47ac-b5c8-17450bc1ca9a)\n\n[🔼Back to the top](#contents)\n\n## Flex Box\n\n* 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.\n* 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.\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/d3d2a89b-8fcd-4e0f-9fd8-1019b42bd092)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/a74def38-45f2-4272-97cc-ea4f4a1a9830)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/94fcbbda-ffff-48ec-a6d5-4d98a0d0cbc8)\n\n```css\n  .flex-container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    justify-content: flex-start;\n    align-content: normal;\n    /* short-hand for flex */\n    /* \n      flex-flow: flex-direction flex-wrap;\n    */\n    flex-flow: row nowrap;\n  }\n```\n* `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).\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/537ba735-7595-4a4a-a807-c35f99cb26fa)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/9d87bd97-0daa-4843-b14a-0e6c9c37cee7)\n\n[🔼Back to the top](#contents)\n\n## CSS Grid\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/1b4eff98-edcb-4379-8865-56261417efc9)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/ad588a70-27dc-436f-b869-78561ee607fd)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/aaf07043-831a-4582-b4a4-70da247df3b3)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/580f45b6-0438-4643-869e-ac1adaa15b42)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/79854f82-936b-459a-872f-22434218ad3a)\n\n![image](https://github.com/actionanand/css-uhost/assets/46064269/c7bd6b0d-7b48-487c-a376-a1a4ae50caa7)\n\n\n[🔼Back to the top](#contents)\n\n## Transitions \u0026 Animations\n\n* Simple animation\n\n```css\n  .modal {\n    /* animation css - `ease-in` -\u003e starts slower \u0026 ends faster; `ease-out` -\u003e reverse of the prior */\n    opacity: 0;\n    transform: translateY(-3rem);\n    transition: opacity 200ms, transform .5s;\n  }\n\n  .open {\n    opacity: 1;\n    transform: translateY(0);\n  }\n```\n\n```css\n/* transition: WHAT DURATION DELAY TIMING-FUNCTION; */\ntransition: opacity 200ms 1s ease-out;\n```\n\nThe 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\".\n\n1. [transition-property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)\n2. [transition-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration)\n3. [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)\n4. [transition-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)\n5. [MDN article on CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)\n6. [Easing Functions Cheat Sheet](https://easings.net/)\n\n```css\n/* animation: NAME DURATION DELAY TIMING-FUNCTION ITERATION DIRECTION FILL-MODE PLAY-STATE; */\nanimation: wiggle 200ms 1s ease-out 8 alternate forwards running;\n```\n\n```css\n@keyframes wiggle {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(10deg);\n  }\n}\n```\n\nThe 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**.\"\n\n1. [animation-name](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name)\n2. [animation-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)\n3. [animation-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)\n4. [animation-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)\n5. [animation-iteration-count](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count)\n6. [animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)\n7. [animation-fill-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)\n8. [animation-play-state](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state)\n9. [MDN article on CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)\n\n* [List of \"transitionable\" Properties](https://www.w3.org/TR/css-transitions-1/#animatable-properties)\n\n\n[🔼Back to the top](#contents)\n\n## Guide on Future proof css code\n\n* [CSS Modules \u0026 Working Groups](https://www.w3.org/TR/#tr_Cascading_Style_Sheets__CSS__Working_Group)\n* [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n* [Vendor Prefix- mdn](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)\n* [Which Vendor Prefixes should you use?](https://shouldiprefix.com/)\n* [@supports - mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports)\n* [BEM in detail](https://getbem.com/introduction/)\n* [An introduction to Bootstrap 4 - Academind](https://academind.com/tutorials/bootstrap-4-tutorial)\n* [CSS Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)\n* [Auto prefixer - online](https://autoprefixer.github.io/)\n\n[🔼Back to the top](#contents)\n\n# Sassy CSS\n\n`SASS` -\u003e Systematically Awesome Style Sheets\n`SCSS` -\u003e Sassy Cascading Style Sheets\n\n### Nested Properties\n\nSCSS code\n\n```scss\n  $full-width: 100%;\n\n  .mobile-nav__items {\n    width: 90%;\n    height: $full-width;\n    display: flex;\n    flex: {\n      direction: column;\n      wrap: nowrap;\n    }\n  }\n```\n\nCSS Code\n\n```css\n  .mobile-nav__items {\n    width: 90%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: nowrap;\n  }\n```\n\n### Lists \u0026 Maps\n\nSCSS Code\n\n```scss\n  $border-size: 1.5px;\n\n  // map\n  $color: (green-dark: #0e4f1f, red-bright: #ff1b68);\n\n  // List\n  $border-default: $border-size solid map-get($color, green-dark);\n\n\n  .button {\n    background: map-get($color, red-bright);\n    color: white;\n    font: inherit;\n    border: $border-default;\n    padding: .5rem;\n    border-radius: 8px;\n    font-weight: bold;\n    cursor: pointer;\n  }\n```\n\nCSS Code\n\n```css\n  .button {\n    background: #ff1b68;\n    color: white;\n    font: inherit;\n    border: 1.5px solid #0e4f1f;\n    padding: 0.5rem;\n    border-radius: 8px;\n    font-weight: bold;\n    cursor: pointer;\n  }\n```\n\n### Built-in functions\n\n```scss\n  // SCSS\n  .background {\n    $dark-green: #0e4f1f;\n    background: lighten($dark-green, 72%);\n  }\n\n  // CSS\n\n  .background {\n    background: #d5f8de;\n  }\n```\n\n* [SCSS/SASS built-in functions - github](https://gist.github.com/AllThingsSmitty/3bcc79da563df756be46)\n* [SASS built-in modules](https://sass-lang.com/documentation/modules/)\n\n### Arithmetic operations in SASS/SCSS\n\nSCSS\n\n```scss\n  $border-size: 1rem;\n\n  .maths {\n    border-radius:$border-size * 3;\n  }\n```\n\nCSS\n\n```css\n  .maths {\n    border-radius: 3rem;\n  }\n```\n\n### Media query in SASS/SCSS\n\nSCSS\n\n```scss\n  .container {\n    display: flex;\n    flex-direction: row;\n    font-size: 15px;\n\n    @media (min-width: 40rem) {\n      flex-direction: column;\n      font-size: 10px;\n    }\n  }\n```\n\nCSS\n\n```css\n.container {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n\n@media (min-width: 40rem) {\n\t.container {\n\t\tflex-direction: column;\n\t\tfont-size: 10px;\n\t}\n}\n```\n\n### Inheritance in SCSS/SASS\n\nSCSS\n\n```scss\n  $color: (green-dark: #0e4f1f, red-bright: #ff1b68);\n  $border-size: 1.5px;\n\n  .sass-section {\n    font-family: 'Montserrat', sans-serif;\n    border: $border-size solid map-get($color, green-dark);\n    width: 50px;\n  }\n\n  .box1 {\n    @extend .sass-section;\n    height: 60px;\n  }\n\n  .box2 {\n    @extend .sass-section;\n    height: 70px;\n  }\n```\n\nCSS\n\n```css\n  .sass-section, .box1, .box2 {\n    font-family: 'Montserrat', sans-serif;\n    border: 1.5px solid #0e4f1f;\n    width: 50px;\n  }\n\n  .box1 {\n    height: 60px;\n  }\n\n  .box2 {\n    height: 70px;\n  }\n\n  /* OR */\n\n  .box1 {\n    font-family: 'Montserrat', sans-serif;\n    border: 1.5px solid #0e4f1f;\n    width: 50px;\n    height: 60px;\n  }\n  .box2 {\n    font-family: 'Montserrat', sans-serif;\n    border: 1.5px solid #0e4f1f;\n    width: 50px;\n    height: 70px;\n  }\n```\n\n### Mixins\n\nSCSS\n\n```scss\n  $dark-green: #0e4f1f;\n\n  // mixin without arguments\n  @mixin display-flex() {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n  }\n\n  .container {\n    @include display-flex();\n    flex-direction: column;\n  }\n\n  // mixin with arguments\n  @mixin media-min-width($width) {\n    @media (min-width: $width) {\n      border: 2px solid green;\n      @content;\n    }\n  }\n\n  body {\n    background: $dark-green;\n    font-size: 15px;\n\n    @include media-min-width(40rem) {\n      font-family: 'Montserrat', sans-serif;\n      font-size: 10px;\n    }\n  }\n```\n\nCSS\n\n```css\n  .container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    flex-direction: column;\n  }\n\n  body {\n    background: #0e4f1f;\n    font-size: 15px;\n  }\n\n  @media (min-width: 40rem) {\n    body {\n      border: 2px solid green;\n      font-family: 'Montserrat', sans-serif;\n      font-size: 10px;\n    }\n  }\n```\n\n1. [CSS `@import` Rule](https://www.w3schools.com/cssref/pr_import_rule.php)\n2. [Using SASS partials](https://dev.to/sarah_chima/using-sass-partials-7mh)\n3. [Sass @import and Partials](https://www.w3schools.com/sass/sass_import.php)\n\n[🔼Back to the top](#contents)\n\n## Resources for Vite\n\n1. [Vite in a simple html+js use case](https://dev.to/marcinwosinek/vite-in-a-simple-html-js-usecase-35k2)\n2. [Static Asset Handling - Vite official](https://vitejs.dev/guide/assets.html#importing-asset-as-string)\n3. [Shared Options - Vite official](https://vitejs.dev/config/shared-options)\n4. [How to Convert a String to HTML using JavaScript](https://sabe.io/blog/javascript-convert-string-to-html)\n5. [Append element as sibling after element? - Stackoverflow](https://stackoverflow.com/questions/21422337/append-element-as-sibling-after-element)\n\n[🔼Back to the top](#contents)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fcss-uhost","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factionanand%2Fcss-uhost","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fcss-uhost/lists"}