Notes for "Advanced CSS and SASS" Udemy course

The course can be found at : https://www.udemy.com/advanced-css-and-sass

To center an absolute item in the middle of its parent ( parent position must be set to relative ) with out using flex-box,the following can be done:

.center-item{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

.center-item{

position:absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

}

The following CSS3 property can be used to make an element not visible until its animation starts by having it’s 0% keyframe set an opacity to 0. For example:

@keyframes animated-frames{
0%{opacity:0;}

100%{opacity:1;}
}

.item-to-be-animated {
animation-fill-mode: backwards;

/* The backwards setting will apply what is in the 0% settings
before the animation starts. So, the item will have an opacity 
of 0 which will make it "invisible" until the animation begins. */

animation:animated-frames .5s ease-out .7s;

/* The above animation would use the animated-frames keyframes , 
it would take .5seconds to complete, 
would use a ease-out method for it's animation, 
and the animation would be delayed before it starts by .7seconds */
}

@keyframes animated-frames{

0%{opacity:0;}

100%{opacity:1;}

}

.item-to-be-animated {

animation-fill-mode: backwards;

/* The backwards setting will apply what is in the 0% settings

before the animation starts. So, the item will have an opacity

of 0 which will make it "invisible" until the animation begins. */

animation:animated-frames .5s ease-out .7s;

/* The above animation would use the animated-frames keyframes ,

it would take .5seconds to complete,

would use a ease-out method for it's animation,

and the animation would be delayed before it starts by .7seconds */

}

How CSS is processed and how styles that will be used will be determined:

!importance -> Specificity – > order that CSS is loaded ( cascade )

How relative values ( %, em, rem, vh , vw ) are converted to absolute values (px)

Relative values such as em and rem. em for fonts uses the parent element as it’s reference, em for lengths ( like padding etc ) uses the current element the while rem uses the root element (html element) for both font and length type values.

Viewport-based : vh ( View Height) and vw (View Width) will use the devices View height/width to determine the site. So 90vh would be a height of 90% of the viewports height.

Misc Notes on Inheritance:

initial keyword resets a property to its initial value ( reset ).

Properties related to text ( font-family, size, color ) are inherited. Things like margin/padding are not by default. Can force inheritance of a property by using the inherit keyword on that property.

How and why to use rem instead of px

Set html element (root) font-size property to 10px . This way when using rem in other element properties it is easier to figure out since it is a multiple/divisible by 10. This creates a good method in case the view point resizes. However, this is bad in the event that the user sets a different font size in their browser. Because of this, it is better to set the html element ( root ) to font-size of 62.5% . It is 62.5% because the default font-size in a browser is 16px. Since we want 10px, we use 10/16 = .625 or 62.5% for the font-size.

Box Types ( inline, block, inline-block )

All determined by the display: property.

Block

Displayed as blocks. 100% of parent’s width. Vertically, one after another. Creates line breaks before and after it.

Inline

Inline box only occupies just the size it needs. Does not create line breaks. Height and width property do no apply. Can only apply left and right padding and margins.

Inline-block

Mostly inline that it only occupies content spaces that is using, does not create line breaks. Block on inside so all margin padding ( top and bottom) can be set.

Positioning Schemes

position: relative

Elements laid out in natural order that is written in code. Not floats or absolutely positioned.

float: left , float: right

Element is removed from the normal flow; Text and inline element will wrap around floated element. Container of a floated item will not adjust it’s height to the element but can use clear:both fixes

position: absolute; , position:fixed;

Element is removed from normal flow. No impact on surrounding contents/elements. Can use top,bottom, left and right to offset the element from its relatively positioned contained.

Stacking contexts

z-index

higher z-index appears on top, the lower the z-index the lower on the stack.

SASS

Variables

Can be used to store any type of values, must start with $ – for example:

$text-color:#f2f2f2;

$button-width:150px;

Nesting

Can nest elements/classes to reduce the need to rewrite certain code. For example:

.nav {
  background-color: red;

  &:hover {
    background-color: darken(yellow, 15%);
  }
  ul {
    width: 100px;
    background-color: yellow;
  }
}


/* Would produce below */

.nav {
  background-color: red;
}
.nav:hover {
  background-color: #b3b300;
}
.nav ul {
  width: 100px;
  background-color: yellow;
}

.nav {

background-color: red;

&:hover {

background-color: darken(yellow, 15%);

}

ul {

width: 100px;

background-color: yellow;

}

/* Would produce below */

.nav {

background-color: red;

}

.nav:hover {

background-color: #b3b300;

}

.nav ul {

width: 100px;

background-color: yellow;

}

& is used to join the pseudo element or state to the element before it. With out it, it would of produced .nav :hover {} instead which is not what was intended.

darken and lighten

Color methods in SASS to darken/lighten a color. First param is the color. Second param is the % you want to adjust it by. i.e.

darken(#f2f2f2,15%); or lighten(#f2f2f2,10%);

Mixin

A type function or block of code you can define to use in different areas of your css.

To define a mixin:

@mixin clearfix{
$::after{
content:"";
clear:both;
display:table; 
 }
}

/**  To use the mixin: **/
@include clearfix;

@mixin clearfix{

$::after{

content:"";

clear:both;

display:table;

}

/** To use the mixin: **/

@include clearfix;

Can also use parameters i.e.

@mixin button-config($color)
{
width:150px;
background-color:$color;
}

@mixin button-config($color)

{

width:150px;

background-color:$color;

}

Misc Notes

In order to use scss variables in the calc() function it must be enclosed within #{ }

.random-class{
width:calc((100%-#{$variable-with-a-width-value})/2);
}

.random-class{

width:calc((100%-#{$variable-with-a-width-value})/2);

}

To make text or a font type icon have a gradient background you can do the following CSS:

display:inline-block;
background-image:linear-gradient(to-right, $begin-color,$end-color);
-webkit-background-clip:text;
color:transparent;

display:inline-block;

background-image:linear-gradient(to-right, $begin-color,$end-color);

-webkit-background-clip:text;

color:transparent;

To use a linear-gradient, you must apply it to the background-image property.

box-decoration-break or -webkit-box-decoration-break

If a single line of text i.e. <p> line of text that exceeds more than 1 line</p> exceeds a single line.. any padding added to the element would normally not apply to both lines if the element is broken in to two lines. Can use box-decoration-break:clone; to make it so any padding added to the element will be applied to both ( or more ) lines for that element.

Notes if rotating an object

perspective & -moz-perspective:

Add a decent amount of pixels to smooth the rotation to look more natural. Must be added to the parent element.

backface-visibility:hidden;

Will make the backside of an element not visible . i.e. if it is transform: rotateY(180deg);

Online Journal

My online journal about design and development related topics and what I've learned.

Notes for “Advanced CSS and SASS” Udemy course