- CSS fundamentals
- The problem with CSS
- Some solutions
- Let's practice!
notes:
Check 0-start folder The problem with css is its unpredictability
- Why can't i put any margins around this link
- "a" tag is an inline element, so you can’t put margin top and bottom
- Specificity (View button in final mob demo, change view button to blanchedalmond colour)
- Previously, there is a view-button class that wasn't removed
- Add class to view button
- Put style near card-controls, because seems logical
- Refresh page, find that it doesn't work
- Open dev tools, find out what’s wrong, remove class
- Find that there was a previous style there
- Other dev: Add inline style blanchedalmond to last button
- Now have to change back to white
- So now change .view-button class to white
- Find that one colour still hasn't changed
- Oh man now that blue button needs to change to a red button
- naming classes .blue-button or .red-button is not good
The aim of this superfriday is to make CSS less like the gif
used to style and layout web pages — for example, to alter the font, colour, size and spacing of your content, split it into multiple columns, or add animations and other decorative features
— MDN web docs
notes: show amazing things you can do with CSS https://blog.codepen.io/2018/09/05/the-dogs-of-codepen/ https://colorlib.com/wp/css-layouts/
<!DOCTYPE html>
<html>
<head>
<!-- the document's character encoding -->
<meta charset="utf-8">
<title>CSS Fundamentals</title>
<!--
linking external resources to the document
eg. a stylesheet
-->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- contents displayed on the web page -->
</body>
</html>notes:
- let's start with a way we can connect our styles with our html document
notes:
** Show demo/1-css-fundamentals to change the colour of the paragraph
Selector
The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, "p" elements). To style a different element, just change the selector.
Declaration
A single rule like color: red; specifying which of the element's properties you want to style.
Properties
Ways in which you can style a given HTML element.
Property value
To the right of the property after the colon, we have the property value, which chooses one out of many possible appearances for a given property (there are many color values besides red).
— MDN web docs
matches elements by the name of the node
html
<p>Hello world!</p>css
p {
color: red;
}selects all elements that have the given class attribute
html
<p class="greeting">Hello world!</p>css
.greeting {
color: red;
}- selects an element with the id attribute
- there should only be one
html
<p id="greeting">Hello world!</p>css
#greeting {
color: red;
}selects an element with a given state
html
<a href="#">go somewhere</a>css
a:hover {
color: red;
}notes:
- common example changing the hover style of a link
html
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>css
p:first-of-type {
color: red;
}notes:
- selects the first sibling "p" element
-
descendant combinator
-
child combinator
demo/1-css-fundamentals folder
selectors overrule each other in this order
- importance
- specificity
- source order
using !important keyword will take the highest priority
p {
color: red !important;
}a measure of how specific a selector is — how many elements it could match
— MDN web docs
- inline styles
- id selectors (e.g. #example).
- class selectors (e.g. .example), attributes selectors (e.g. [type="radio"]) and pseudo-classes (e.g. :hover).
- element selectors (e.g. h1) and pseudo-elements (e.g. ::before).
notes:
** use 2-specificity to demo each type of selector
demo what happens when you use the selector with !important
p {
color: red;
}
/* this overrides red */
p {
color: blue;
}
the fill area gets filled by the background property
notes:
as you can see, this includes the content area, padding and border see 3-box-model index1.html to practice adding padding and margin
- defined by the display property
- inline, inline-block, block
notes:
- see 3-box-model demo2.html
- mention html elements have their own initial display type
demo/3-box-model/demo2.html
- what happens when you increase the width of p?
- what happens when you add a margin of 20px to all of the highlighted words?
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal)
— MDN web docs
notes:
- example with the h1 and p tag margins collapsing in the demo
- it's probably better to use margin top only in some cases
sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements
— MDN web docs
the default position of elements
notes:
- go to 3-box-model demo 3
- show box 1 and look at the computed position in the dev tools
allows positioning of elements with an offset
notes:
- show box 5 and the offset from the left of the page
- allows positioning of elements with an offset
- specifying offset is relative to the edges of the containing block
notes:
- show box 2 and 3, with 2 having position:relative
- show box 4 with no ancestor, so it's attached to the root element
demo/3-box-model/challenge.html
https://css-tricks.com/solved-with-css-dropdown-menus/
notes:
- the li element is positioned relative
- it has another ul, which contains the dropdown
- the dropdown ul is positioned absolute
For Web developers, it is now fairly common to be called upon to create a Web site or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience.
— MDN web docs
notes:
example responsive websites https://www.awwwards.com/websites/responsive-design/ https://www.thoughtworks.com/ https://www.apple.com/au/shop/buy-mac/macbook-pro
- media queries
- viewport
allows content to be rendered differently through conditions such as
- media type (eg. screen, print)
- screen resolution
- and more...
notes:
we will only talk about device width in this presentation https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
/*
Bootstrap mobile first breakpoints
No media query for devices less than 576px because this is default
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }notes:
- in 4-responsive-design, start.html changes colour according to size
- opening the mobile view from the inspector,
- we find that this is not really optimised for mobile devices
- enter viewport meta
The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.
— MDN web docs
typical mobile-optimised site contains:
<meta name="viewport" content="width=device-width, initial-scale=1">notes:
width:
- The width property controls the size of the viewport.
- can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%
initial-scale:
- controls the zoom level when the page is first loaded
(MDN web docs)
https://developers.google.com/web/fundamentals/design-and-ux/responsive/
notes:
saved by flexbox
- the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent
- Both horizontal and vertical alignment of the children can be easily manipulated
— MDN web docs
notes:
- now easy to align things vertically
- EXAMPLE https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
- display: flex to a parent container
- vertical alignment
- horizontal alignment
demo/4-responsive-design/start.html
align the numbers to the centre of the box
notes:
- there are several ways to make the layout responsive
- we will be using flexbox, although it is typically best used for one dimension layouting
- to achieve final.html in 4-responsive-design
- let's start without the border first
- at min-width: 576px, we want 2 boxes in a row
- apply display: flex to the parent
- apply flex-basis: 50% (for 2 items) to the children to set the initial size of the flex items
- apply flex-wrap: wrap to allow them to occupy multiple lines when the space occupied gets too big
notes:
- not using flex-wrap will force the boxes to overflow to the right
- apply negative margin-top to shift parent up
- apply negative margin-left to shift parent to the left
- then applying positive margin-top and margin-left to the children will only create the gap in the middle
- finally, flex: 0 0 calc(50% - 10px); to reduce the size of the flex items by 10px
- best used for one dimension layout
- explore css grid for two dimensional layout
- make sure it is supported by the browsers https://caniuse.com/#feat=css-grid
- clone: https://github.com/kksy/css-superfriday
- go to /demo/mob-coding folder and edit start.html and start.css
notes:
- a lot of these can be subjective, but here are some of the things that can help in making css more maintainable
<!-- non semantic -->
<div class="red pull-left pb3">
<div class="grid row">
<div class="col-xs-4">
<!-- semantic -->
<div class="basket">
<div class="product">
<div class="searchResults">- more readable, easier to find
- easier to style elements without having to define multiple classes
- avoid conflicting styling
- easier to use with media queries
eg. BEM http://getbem.com/naming/
notes:
- there are different naming conventions with advantages and disadvantages
- for the purpose of this presentation, we will explore BEM
encapsulates a standalone entity that is meaningful on its own
<div class="block">...</div>- parts of a block and have no standalone meaning
- any element is semantically tied to its block
<div class="block">
...
<span class="block__elem"></span>
</div>- flags on blocks or elements
- use them to change appearance, behavior or state.
<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>- suppose you have block form with modifiers theme: "xmas" and simple: true
- with elements input and submit
- element submit with its own modifier disabled: true for not submitting form while it is not filled
html
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>css
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }- naming is hard
- reduces specificity issues
- new devs will have a reference point
- browsers render elements differently
- reduces styling pain when supporting multiple browsers
- example: https://github.com/sindresorhus/modern-normalize
notes:
https://github.com/sindresorhus/modern-normalize/blob/master/modern-normalize.css
- removing margins in the body
- button example
a program that lets you generate CSS from the preprocessor's own unique syntax
— MDN web docs
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}- define style guide colours
- reuse
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}- having a visual hierarchy makes css more readable
- warning: too much nesting will be harder to maintain
- css intro: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
- maintainable css: https://maintainablecss.com
- bem: http://getbem.com
- sass: http://sass-lang.com
- browser support check: https://caniuse.com/
- css visual reference: https://cssreference.io/
- centering in css: https://css-tricks.com/centering-css-complete-guide/