Skip to content

CSS SCSS

Jump to bottom
Mac Peters edited this page Dec 21, 2020 · 4 revisions

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;
}

Index

Home

General

Front End

Back End

Database

Misc

Clone this wiki locally