{"id":117,"date":"2017-12-14T14:55:27","date_gmt":"2017-12-14T14:55:27","guid":{"rendered":"https:\/\/jmrowe.com\/blog\/?p=117"},"modified":"2018-01-11T17:35:55","modified_gmt":"2018-01-11T17:35:55","slug":"notes-for-advanced-css-and-sass-udemy-course","status":"publish","type":"post","link":"https:\/\/jmrowe.com\/blog\/notes-for-advanced-css-and-sass-udemy-course\/","title":{"rendered":"Notes for “Advanced CSS and SASS” Udemy course"},"content":{"rendered":"

The course can be found at :\u00a0https:\/\/www.udemy.com\/advanced-css-and-sass<\/a><\/p>\n

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

.center-item{\r\nposition:absolute;\r\ntop:50%;\r\nleft:50%;\r\ntransform: translate(-50%,-50%);\r\n}<\/pre>\n
 <\/p>\n
 <\/p>\n
The following CSS3 property can be used to make an element not visible until its animation starts by having it’s 0% keyframe set\u00a0 an opacity to 0. For example:<\/p>\n
@keyframes animated-frames{\r\n0%{opacity:0;}\r\n\r\n100%{opacity:1;}\r\n}\r\n\r\n.item-to-be-animated {\r\nanimation-fill-mode: backwards;\r\n\r\n\/* The backwards setting will apply what is in the 0% settings\r\nbefore the animation starts. So, the item will have an opacity \r\nof 0 which will make it \"invisible\" until the animation begins. *\/\r\n\r\nanimation:animated-frames .5s ease-out .7s;\r\n\r\n\/* The above animation would use the animated-frames keyframes , \r\nit would take .5seconds to complete, \r\nwould use a ease-out method for it's animation, \r\nand the animation would be delayed before it starts by .7seconds *\/\r\n}<\/pre>\n
How CSS is processed and how styles that will be used will be determined:<\/strong><\/h2>\n
!importance -> Specificity – > order that CSS is loaded ( cascade )<\/p>\n
\"\"<\/a><\/p>\n
How relative values ( %, em, rem, vh , vw ) are converted to absolute values (px)<\/h2>\n
Relative values such as em and rem. em for fonts uses the parent element<\/strong>\u00a0as it’s reference, em for lengths ( like padding etc ) uses the current element<\/strong> the\u00a0 while rem uses the root element\u00a0<\/strong>(html element) for both font and length type values.<\/p>\n
Viewport-based : vh<\/b> ( View Height) and vw<\/b>\u00a0(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.<\/p>\n
Misc Notes on Inheritance:<\/h2>\n
initial<\/em>\u00a0keyword resets a property to its initial value ( reset ).<\/p>\n
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<\/em> keyword on that property.<\/p>\n
How and why to use rem instead of px<\/h2>\n
Set html element (root) font-size property to 10px\u00a0 . 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.<\/p>\n
Box Types ( inline, block, inline-block )<\/h2>\n
All determined by the display: property.<\/p>\n
\u00a0Block<\/strong><\/p>\n
Displayed as blocks. 100% of parent’s width. Vertically, one after another. Creates line breaks before and after it.<\/p>\n
Inline<\/strong><\/p>\n
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.<\/p>\n
Inline-block<\/strong><\/p>\n
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.<\/p>\n
Positioning Schemes<\/h2>\n
position: relative\u00a0<\/strong><\/p>\n
Elements laid out in natural order that is written in code. Not floats or absolutely positioned.<\/p>\n
float: left\u00a0 , float: right<\/strong><\/p>\n
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<\/em><\/p>\n
position: absolute; , position:fixed;<\/strong><\/p>\n
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<\/strong> contained.<\/p>\n
Stacking contexts<\/strong><\/p>\n
z-index <\/em><\/p>\n
higher z-index appears on top, the lower the z-index the lower on the stack.<\/p>\n
SASS<\/h3>\n
Variables<\/strong><\/p>\n
Can be used to store any type of values, must start with $ – for example:<\/p>\n
$text-color:#f2f2f2;<\/p>\n
$button-width:150px;<\/p>\n
Nesting<\/strong><\/p>\n
Can nest elements\/classes to reduce the need to rewrite certain code. For example:<\/p>\n
.nav {\r\n  background-color: red;\r\n\r\n  &:hover {\r\n    background-color: darken(yellow, 15%);\r\n  }\r\n  ul {\r\n    width: 100px;\r\n    background-color: yellow;\r\n  }\r\n}\r\n\r\n\r\n\/* Would produce below *\/\r\n\r\n.nav {\r\n  background-color: red;\r\n}\r\n.nav:hover {\r\n  background-color: #b3b300;\r\n}\r\n.nav ul {\r\n  width: 100px;\r\n  background-color: yellow;\r\n}\r\n<\/pre>\n
&\u00a0<\/strong>is used to join the pseudo element or state to the element before it. With out\u00a0 it, it would of produced .nav :hover {} instead which is not what was intended.<\/p>\n
darken and lighten<\/strong><\/p>\n
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.<\/p>\n
darken(#f2f2f2,15%); or lighten(#f2f2f2,10%);<\/p>\n
Mixin<\/strong><\/p>\n
A type function or block of code you can define to use in different areas of your css.<\/p>\n
To define a mixin:<\/p>\n
@mixin clearfix{\r\n$::after{\r\ncontent:\"\";\r\nclear:both;\r\ndisplay:table; \r\n }\r\n}\r\n\r\n\/**  To use the mixin: **\/\r\n@include clearfix;<\/pre>\n
Can also use parameters i.e.<\/p>\n
@mixin button-config($color)\r\n{\r\nwidth:150px;\r\nbackground-color:$color;\r\n}<\/pre>\n
Misc Notes<\/h2>\n
In order to use scss variables in the calc()<\/strong> function it must be enclosed within #{ }<\/p>\n
.random-class{\r\nwidth:calc((100%-#{$variable-with-a-width-value})\/2);\r\n}<\/pre>\n
To make text or a font type icon have a gradient\u00a0 background you can do the following CSS:<\/p>\n
display:inline-block;\r\nbackground-image:linear-gradient(to-right, $begin-color,$end-color);\r\n-webkit-background-clip:text;\r\ncolor:transparent;<\/pre>\n
To use a linear-gradient, you must apply it to the background-image property.<\/p>\n
box-decoration-break or -webkit-box-decoration-break<\/strong><\/p>\n
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;\u00a0<\/strong>to make it so any padding added to the element will be applied to both ( or more ) lines for that element.<\/p>\n
Notes if rotating an object<\/h3>\n
perspective & -moz-perspective:\u00a0 \u00a0<\/strong><\/p>\n
Add a decent amount of pixels to smooth the rotation to look more natural. Must be added to the parent element.<\/p>\n
backface-visibility:hidden;<\/strong><\/p>\n
Will make the backside of an element not visible . i.e. if it is transform: rotateY(180deg);<\/strong><\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The course can be found at :\u00a0https:\/\/www.udemy.com\/advanced-css-and-sass To center an absolute item in the middle of its\u00a0 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%); }     The following CSS3 property can be used to make an element […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-117","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":32,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":152,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions\/152"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}