This project focus on css.
Dev server: Point your browser at the below address!
https://127.0.0.1:5173/
- CSS Specificity
- Combinators
- Box Model & Positioning elements and deep dive inside css
- Background and Image
- Sizes & Units
- Responsive Website
- Styling Form
- Custom Font
- Flex Box
- CSS Grid
- Transitions & Animations
- Guide on Future proof css code
- Sassy CSS
- Other Resources
- The universal selector * has no specificity value (0, 0, 0, 0);
- Positioning theory
- More about the "position" property
- The z-index
- The Stacking Context
- Mastering margin collapsing
-
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
-
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.
-
-
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.
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 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
Screen Resolution Stats Worldwide - Statcounter GlobalStats
- 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
- Setting the Viewport Meta Tag - Noble Desktop
- Responsive Meta Tag - CSS Tricks
- A Beginner’s Guide to Viewport Meta Tags - Semrush
- CSS
-webkit-appearance
- Quackit - CSS appearance - mdn
- Styling web forms - mdn
- How do I style a
select dropdown
with only CSS? - StackOverflow
- How To Load and Use Custom Fonts with CSS
- font-family - mdn
- Web safe fonts
- The
line-height
property - mdn
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
andfont-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 |
- Controlling Font Performance with font-display
- Font loading strategies: FOIT and FOUT
- FOIT - Flash Of Invisible Text
- FOUT - Flash Of Unstyled Text
- Optimize web fonts loading - YouTube
- Adding the
z-index
to an element only has an effect, if theposition
property with a value different fromstatic
was applied to this element. - One exception from this behaviour is flexbox. Applying the
z-index
toflex-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. Ifflex-direction: row;
,flex-basis
will be replaced the width of the element (X - axis). Ifflex-direction: column;
,flex-basis
will be replace the height of the element (Y - axis).
- 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".
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- MDN article on CSS transitions
- 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."
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
- MDN article on CSS animations
- 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
SASS
-> Systematically Awesome Style Sheets
SCSS
-> Sassy Cascading Style Sheets
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;
}
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;
}
// SCSS
.background {
$dark-green: #0e4f1f;
background: lighten($dark-green, 72%);
}
// CSS
.background {
background: #d5f8de;
}
SCSS
$border-size: 1rem;
.maths {
border-radius:$border-size * 3;
}
CSS
.maths {
border-radius: 3rem;
}
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;
}
}
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;
}
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;
}
}