CSS SCSS

CSS/SCSS

Cheatsheet

General Notes

css is read line by line, so new styles can overwrite old styles

CSS Grid

container properties
- display: grid // or grid-inline
- grid-template
  - grid-template-rows: 150px 150px; // 50%, 50vh, auto, 1fr (fractional unit)
  - grid-template-rows: [header-start] 1fr [header-end main-start] 1fr 1fr [main-end box-start] 1fr [box-end footer-start] 1fr [footer-end];
    - use names: grid-row: main-start / box-end;
  - grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
    - use names: grid-column: col-start 1 / col-end -1;
- grid-template-columns: 150px 150px 150px; // auto, 1fr (fractional unit). repeat(2, 1fr) for 2 same columns
- grid-row-gap: 30px;
- grid-column-gap: 50px;
- grid-gap: 30px 50px; // only provide 1 value if they are the same
- grid-template-areas:
  - “header header header header
  - "sidebar main main main"
  - "sidebar main main main"
  - "sidebar box-1 box-2 box-3"
  - "footer footer footer footer";
  - every cell must be named, or put a . in place of an empty cell
- justify_items: stretch(defautl), center, start, end

Flexbox

.target:nth-of-type(2){ 
}

Justify along the blue line Align along the orange line

flex-flow: row-reverse wrap;

Container properties
- display: flex
- flex-direction: row, row-reverse, column, column-reverse //sets direction along main axis
- flex-wrap: nowrap, wrap //doesn’t allow items to shrink
- flex-flow: row wrap // combine direction and wrap
- justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
  - space items along the main axis
  - column will fill up, so unless you set the height greater than what’s necessary, justify won’t do much
- align-items: flex-start, flex-end, center, baseline, default is stretch.
  - works along cross axis
  - baseline lines up any text along a line
- align-content: stretch, flex-start, flex-end
  - used when there is extra space on cross axis
  - stretch is default
Item properties
- order: 0 // or a number change the order of items
- align-self: auto, stretch, flex-start, flex-end, center, baseline
- flex-grow: 0 // or a number
- flex-basis: auto, initial, inherit // or a length. effected by padding, overwrites width, works along main axis
- flex: 0 1 auto // combine grow, shrink, basis

Animations

animation-name and animation-duration are required fields. Name must match the keyframes name.
can use from, to instead of 0 and 100%, but you have more control with percentages
animation-delay: 2s // delay the start of the animation for 2 seconds
animation-iteration-count: 3 // play the animation 3 times. To keep it running, use value: infinite
animation-direction: normal, reverse, alternate-reverse, alternate
- alternate needs iteration-count to be at least 2 - it will alternate between normal and reverse.
animation-timing-function: similar to transition-timing-function (linear, ease, cubic-bezier)
animation-fill-mode:
- forwards // don’t put element back in original position
- backwards //start the element at the beginning paint of the animation
- both // forwards and backwards
{ anim 4s ease-in 2s infinite alternate, both} //name, duration, function, delay, iteration-count, direction, fill-mode

{
	width: 200px;
	height: 200px;
	background-color: green;
	position: relative;
	animation-name: anim;
	animation-duration: 4s;
}

@keyframes anim {
	0% {
		left: 0;
		top: 0;
		background-color: green;
	}
	25% {
		left: 500px;
		top: 0;
		background-color: red;
	}
	50% {
		left: 500px;
		top: 500px;
		background-color: goldenrod;
	}
	75% {
		left: 0px;
		top: 500px;
		background-color: royalblue;
	}
	100% {
		left: 0;
		top: 0;
		background-color: green;
	}
}

Transforms

{ transform: trnaslateX(200px } //moves element 200px to the right;
{ transform: translate(100px, 200xp; } //moves element 100px to right, 200 down
can be used on hover, with a transition: transform 1s on the element
scale(width, height). default is 1. Change according to original width/height
skewX(30deg), skew(30deg, 20deg)
rotateX(180deg), rotateY, rotateZ // will overwrite previous transform methods
to use multiple transforms at once:
- { transform: translate(200px, 200px) scale(1.5, 1.5); }

Transitions

transition-property and transition-duration are manditory
transition delay, transition-timing-function are optional
timing: ease is default. linear, ease-in, ease-in-out, manual function cubic_bezier(x1, y1, x2, y2)
- check cubic-bezier.com for more info
shortcut:
- { transition: width 1s 1s ease-in //property duration delay function; }
multiple transitions
- { transition: width 1s 1s ease-in //property duration delay function, background-color: 1s; }
all transitions with same duration
- { transition: all 1s}

.box {
	width: 200px;
	transition-property: width;
	transition-duration: 1s;
	transition-delay: 1s;
	transition-timing-function: 
}

.box:hover {
	width: 400px;
	background-color: green
}

Shadows

text-shadow: horizontal position, vertical position. Both positions are required for it to work.
- third value is blurriness, and is not required
- fourth value is colour, and is not required
- text-shadow: 3px 3px 10px #888;
box-shadow - similar, but used with boxes

.card {
	width: 400px;
	margin: 100px auto;
	background-color: #ccc;
	padding: 5px;
	text-align: center;
	box-shadow: 5px 5px 10px #777;
}

.card img {
	width: 100%;
}

<div class=“card”> 	<img src=“”img/img1.jpg”>
	<h2>My Image</h2>
</div>

Gradients

background-image: linear-gradient(to top right, yellow, green) // to bottom is default
add a linear gradient to an image
- background: linear-gradient(rgba(0, 255, 0, .1), rgba(0, 255, 0, .2), url(“img/img1.jpg) no-repeat center /cover

Backgrounds

background-positiono:
- pixels are precise
- percentages determine where clipping happens when there is a double border
background-attachment: fixed
- keeps the position according to the viewport until parent element is off the screen
- paralax effect
background-size: cover
- image might be clipped, but will fill element, and retain its quality
background-size: contain
- image will ratain quality, and will not be clipped. There may be some empty space

Float

jumps out from normal flow
if a container contains only float elements, the container itself will be zero pixels unless you
- give it overflow: auto;
- give a clear element inside the container

.clear {
	clear: both;
}

* create a clearfix element

.clearfix: after {
	content: “”;
	display:  block;
	clear: both;
}

Positions

static is default
relative - positioned relative to itself
- using top, left, right, bottom pushes element from given direction towards the oppositve direction. Negative values have the opposite effect. Will cover up other elements.
- changing width/height will move other elements away instead of covering them.
absolute - positioned relative to parent element
- has no effect on other elements
- jumps out from the normal flow of the page
- using top, left, right, bottom requires parent to have any position except static, or the absolute element will move according to body
fixed - positioned relative to the viewport (good for nav-bar)
sticky - positioned according to user’s scroll position
- requires top position to be defined (the distance box will stick at)
- will keep an element on the screen until its parent element is hidden.
z-index
- default is zero
- higher index puts element in front, so long as element is not static

 Shortcuts

border: 5px #fff solid; //width, color, style,
padding: 5px 2px 5px 2px; //top, right, bottom, left (clockwise)
padding: 5px 2px; // top/botton, right/left
margin: 100px auto; // centers horizontally

Measurement Units

Absolute - pixel, cm, points, pica Relative: em, rem, vw, vh, % - em is calculated according to the closest parent element, or root if no parent is found with absolute measurements - rem is according to html pixel size, not any other elements

Pseudo classes/ Pseudo elements

psueudo classes define a specific state
pseudo elements define a specific part of an element
a:link {} // define the styles for an unclicked link
a:visited {} //define the styles for a link that’s been visited
a:active {} //define styles of link while it is being clicked
to preserve all styles, hover has to go after link and visited, and active has to go after hover
h1::first-letter {} //change the first letter of an element
h1::before { content: “This is ” } // insert something before the element. First letter applies to the before

Box Sizing

width and height
box-sizing: content-box (does not include padding/borders, etc in size of box - this is default)
box-sizing: border-box (includes border, etc in size)

Related Elements

<section>
	<p>Paragraph 1</p>
	<h1>Heading</h1>
	<p>Paragraph 2</p>
	<div>
		<p>Nested Paragraph</p>
	</div>
</section>

Descendant - affects app

elements in section

section p {
	background-color: red;
}

Child - affects all direct child

elements in section - but not nested elements

section > p {
	background-color: red;
}

Adjacent Sibling - affects sibling immediately following (same parent, same level). The

element immediately following h1, in this case

h1 + p {
	background-color: red;
}

General Sibling - affects all siblings placed after an element - all

elemnents after h1, except for nested

h1 ~ p {
	background-color: red;
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly