Front-End Goodness – A crash course for nooberts – Layouts

View Github Repository Open presentation in a new window

b1lly

See all presentation from b1lly

Front-End Goodness – A crash course for nooberts – Layouts

0 0

fedemo

Front End Workshop, discussing core principals of HTML/CSS Layouts and Javascript/jQuery

On Github b1lly / fedemo

Front-End Goodness

A crash course for nooberts

Created by Billy Bastardi / @wabism

  • Introduction
  • Presentation and workshop
  • Coding demo
  • Layouts
  • jQuery

Layouts

Wat is dat?

  • Presentation layer (HTML/CSS)
  • Page structure
  • Micro vs Macro layouts

Box Model

  • width
  • height
  • border
  • margin
  • padding
  • Every element is represented by a rectangluar box
  • Box model is made up of many Layers
  • Padding adds to the width

Display Properties

The display CSS property specifies the type of rendering box used for an element.
  • block
  • inline
  • inline-block
  • none
  • Different display properties have different behaviors.
  • Behavior of an element is based on the HTML spec.
  • All use the box model in different ways

Block elements

By default, block level elements start on a new line and inherit the width of their parent container. 
e.g.: div, p, form, h1, h2, h3, ul, ol
/* CSS */
.parent-wrap {
  width: 500px;
}

.child-block-element {
  height: 200px;
}
<!-- HTML -->
<div class="parent-wrap">
  <div class="child-block-element">
    This is my content
  </div>
</div>
  • They act as if they have a line break before and after.
  • Intended to be vertically stacked
  • Respect all margin and padding properties

Inline elements

Inline elements inherit the width of their content and will not disrupt the flow of the content around it. 
e.g.: span, a, input, button
/* CSS */
.my-text {
  text-decoration: underline;
}
<!-- HTML -->
<p>
  This is a string of <span class="my-text">text</span> and we have
  a bunch of text in it.
</p>
  • Cannot have a width or height set
  • Respect left & right margins/padding, but not top/bottom
  • May only contain data and other inline elements
  • Allow elements to sit to the left and right

Inline-block elements

Inline-block elements are a hybrid between block and inline elements. They will not disrupt the flow of content around it and they respect all width, height, margin and padding properties. 
/* CSS */
#nav li {
  display: inline-block;
  height: 25px;
  width: 125px;
  padding: 10px;
}
<!-- HTML -->
<ul id="nav">
  <li>Home</li>
  <li>Location CMS</li>
  <li>Listings</li>
  <li>Social</li>
  <li>Analytics</li>
</ul>
  • Respect all box model properties and values
  • Can have a width and hight

Demo

What the block?

Positioning Schemes

With the normal flow positioning scheme, boxes are laid out one after the other. Block elements are laid out vertically and inline elements are are laid out horizontally.
With the absolute positioning scheme, boxes are removed from the normal flow and are positioned relative to their containing block.
With the the float positioning scheme, floated boxes are positioned at the beginning or end of the current line.
  • Floated elements have no line breaks

Positioning Properties

  • static
  • relative
  • absolute
  • fixed

Static Position

Classification: Normal flow positioning scheme
Boxes are drawn strictly based on their display properties. Static is the default positioning for all elements unless otherwise specified. 
<!-- HTML -->
<div id="box">This is a box</div>
<div id="second-box">This is my second box</div>

<p>
  This is a string of <span class="my-text">text</span> and we have
  a bunch of <span class="my-text">text</span> in it.
</p>
This is a box
This is my second box

Relative Position

Classification: Normal flow positioning scheme
Boxes are drawn relative to their static position with an offset defined by the top, bottom, left, and right CSS properties. 
/* CSS */
#second-box {
  position: relative;
  top: -10px;
  left: 50px;
}
<!-- HTML -->
<div id="box">This is a box</div>
<div id="second-box">This is my second box</div>
This is a box
This is my second box

Absolute Position

Classification: Absolute positioning scheme
Boxes are drawn based on the closest 'relative' parent element using the top, bottom, left, and right CSS properties. By default, they inherit the width of their content. 
/* CSS */
#box {
  position: relative;
}

#second-box {
  position: absolute;
  bottom: 100px;
  left: 50px;
}
<!-- HTML -->
<div id="box">
  This is a containing box
  <div id="second-box">This is my absolute box</div>
</div>
  • Inherit the width of their content
  • Absolute position elementes are removed are entirely removed from the flow and don't interact with it at all.

Absolute Example

This is my relative containing
This is my absolute box

Fixed Position

Classification: Absolute positioning scheme
A fixed position element is an absolutely positioned element thats containing block is the viewport. Fixed elements will be stuck to the screen when scrolling as the viewport is not moving. 
/* CSS */
#second-box {
  position: fixed;
  height: 100px;
  bottom: 100px;
  left: 50px;
}
<!-- HTML -->
<div id="box">
  This is a containing box
  <div id="second-box">This is my fixed box</div>
</div>
  • Inherit the width of their content
  • Absolute position elementes are removed are entirely removed from the flow and don't interact with it at all.

Demo

How to use positioning for layouts

Floats

Classification: Float positioning scheme
Float is a CSS property that will push an element to the left or right. Floating an element allows other elements to wrap around it.
Float can only be used on static or relative positioned elements.
Floated elements are powerful when used right.
  • Floated elements come outside the natural flow

Float Containment

Floated elements can cause weird behaviors when interacting with other elements that use the normal flow positioning scheme.
Use a clear fix to contain floated elements properly inside an element that sits inside the normal flow.
Always contain your floats.

Demo

Floaters are gross?

Workshop

Code Dat Layout!

Javascript

Interpretted Prototypical Loosely typed

Types

The ECMAScript standard defines 7 data types.
  • Object
  • Function
  • String
  • Number
  • Boolean
  • undefined
  • null

What About Arrays?

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. 
// Javascript
var myArr = ['this', 'is', 'my', 'array'];

myArr.join(' '); // returns 'this is my array'
myArr.pop();     // returns 'array' and mutates myArry = ['this', 'is', 'my']

myArr.push('list');  // mutates myArr = ['this', 'is', 'my', 'list']

myArray[0];   // returns 'this'
myArray['0']; // returns 'this'

DOM

Document Object Model is an application programming interface for HTML (and XML)
It provides a structured representation of the document and it defines a way that the structure can be accessed.

DOMinating

<!-- HTML -->
<div class="my-node">This is my node</div>
<div class="my-node">This is my other node</div>
// Javascript
var myNodes = document.getElementsByClassName('my-node');
// myNodes = [HTMLElement, HTMLElement]

myNodes[0].onclick = function() {
  alert('Ouch, that hurts!');
}

myNodes[1].onclick = function() {
  alert('Ouch, that hurts!');
}

Scope

Javascript is based on function level scope. 
// Javascript
var x = 1;
function foo() {

  for (var i = 0; i < 10; i ++) {
    var y = i;
  }

  return x + y;
}

Expression vs Declaration

foo();
function foo() {
  alert('hey, this works!');
}
foo();
var foo = function() {
  alert('hey, this works?');
}

IIFE

// Global scope
(function() {
  // This is my local scope
  var d = document.getElementById('my-node');
  d.onclick = function() {
    alert('Ouch, that hurts!');
  };
})();

Recap

  • Types
  • DOM
  • Scope
  • Expression vs Declaration

jQuery

Abstraction of the native DOM/Javascript
Based heavily on the Facade Pattern
Slow by nature

Selectors

Use CSS selectors to query the DOM and return a jQuery collection. 
<div id="wrap">
  <div class="my-node">This is my node</div>
  <div class="my-node">This is my node</div>
</div>
$('.my-node');  // jQuery('.my-node')
// Returns an 'array-like' object with a bunch of jQuery props/methos
// [HTMLElement, HTMLElement]

{
  on: function(event, fn) {
    // Interact with "this collection" and do stuff
  },
  length: 3
}

Traversing

<div id="wrap">
  <div class="my-node">My name is Billy</div>
  <div class="my-node">I am a F.E. Ninja</div>
</div>
<div class="my-node">Other data</div>
// Find the node with my name and get the contents
$('#wrap').find('.my-node').css('background-color', 'red');
$('.my-node').closest('#wrap');  // find the closest parent with this id

Templating

<script type="text/template" id="js-user-tmpl">
  <div class="user-wrap">
    <div class="name">Billy Bastardi</div>
    <div class="email">billy@yext.com</div>
  </div>
</script>
var $tmpl = $('#js-user-tmpl');

function createUser(name, email) {
  var $newUser = $tmpl.clone();

  $newUser.find('.name').text(name);
  $newUser.find('.email').text(email);

  $('body').append($newUser.html());
};
createUser('John Smith', 'johnsmith@yext.com');
createUser('Jane Doe', 'janedoe@yext.com');

Event Handling

<div class="my-node">This is my node</div>
<div class="my-node">This is my other node</div>
$('.my-node').on('click', function() {
  alert('Ouch, that hurts');
});

Event Handling

<div id="add-user">
  <input type="text" name="name" class="js-input-name">
  <input type="text" name="email" class="js-input-email">
  <button class="js-add-user-btn">Post it!</button>
</div>
$('.js-add-user-btn').on('click', function() {
  var msg = $('.js-input-name').val(),
      author = $('.js-input-email').val();

  createUser(msg, author);
});

THE END

BY Billy Bastardi / @wabism