BUILDING ADVANCED & COMPLEX UIs using CSS Secrets For Web Apps and Sites. FRONT-END MASHUP By Patrick Ifeora Okechukwu 

SPEAKER BIO • Twitter – https://www.twitter.com/isocroft • Facebook – https://www.facebook.com/ifeora.okechukwu • GitHub – https://www.github.com/isocroft • LinkedIn – https://www.linkedin.com/in/ifeora-okechukwu-a3b30b69 Unrepentant Internet addict, adaptive choleric, open-source junkie and Developer Advocate at @Coolcodes https://web.facebook.com/coolcodes. Works at @OmniSwift https://www.omniswift.com #BestPractices #WebApplications #ScalableArchitecture 

AGENDA • CSS a d it’s Box Model • Order Of Cascade (OOC – How the CSS parser works) • Layout Systems (Float-based vs. Flex-based) • Shrink-To-Fit Triggers (CSS property-value pairs) • Contextual Positioning (Stacking Order vs. Stacking Context) • Understanding CSS Units (px, pt, %, cm, in, em, rem, vh, vw) • About Media Queries • Brief Overview of Bootstrap CSS 3/4 and Ionic CSS 1/2 • Introducing Modernizr & Browsengine • Bonus Section + ITCSS + Closing Off + Q/A 

OMNI SWIFT COOLCODES 

CSS PRIMER 1 (Normal Flow & Elements) Normal Flow can be defined as the way in which a HTML tag/element is laid out on a page with respect to other elements around it. This is computed by the layout/rendering engine of the browser. Furthermore, the way in which the tag/element is laid depends on whether the tag/element is inline or block . Inline elements tend to squeeze around their content area and allow other elements to wrap around them including text e.g , ,,,,<span>,<a>,<i>,<b>,<var>,<code>,<a bbr>,<u>,<em>,<small>,<strong> Block elements tend to expand and fill up the available space of the content area of their parent tag/element irrespective of the size of their content area e.g <div>,<section>,<main>,<article>,<p>,<ul>,<ol>,<li>,<form> 

CSS PRIMER 2 (parts of a style definition) The SELECTOR is the part of a definition that says which HTML tag/element the style should target. The RULE is the combination of any valid CSS property and valid CSS value for that property The RULESET is made up of 2 or more RULE(s). 

QUOTE FROM A UI GUY ͞ When a UI/UX visual/graphic designer hands you a design board and/or UI mockup to implement, your first task is to draw a bunch of boxes on or according to it (especially when the design is only digitally a essi le a d deter i e ho the ’re supposed to sta k, alig , arranged, grow/stretch, overlap and wrap to achieve the desired desig . O e ou’ e got that do e, it should e prett eas to ode it up using any of the available layout systems in CSS. ͟ – O e gu like that… 

THE CSS BOX MODEL – (Block box/Inline box) So, what exactly is the CSS Box Model ??? The CSS box model is the rule that guides the behavior of each and every HTML tag/element as regards normal flow. It also determines the 4 major different parts of the tag/element (i.e. margin, padding, border and content-area) that are used to effectively size out the element in relation to other HTML tag/elements around. 

ORDER OF CASCADE (OOC) for CSS 1. Rule Importance 2. Selector Specificity 3. Source Order 4. Parent-To-Child Rule Inheritance The location of Style Definition/Style Sheet (external, internal, inline) will sometimes affect the order-of-cascade but only if the target HTML tag/element has no prior CSS rule(s) applied to it in an external or internal style sheet. 

RULE IMPORTANCE This is the symbol (!important) used to signal to the CSS parser that a given rule MUST always be applied on the target HTML tag/element irrespective of whatever rule has been applied to it by virtue of the use of other target selector types. 

SELECTOR SPECIFICITY This refers to the eighti g hi h is as ri ed to any HTML tag/element(s) CSS selector in such a way that the rule-sets defined for that selector can override or be overridden by other rule-sets defined using a different selector that targets the same and/or similar HTML tag/element(s). 1. The more HTML tags/elements a selector matches or can match, the lower its specificity. 2. The rule-set of a selector with higher specificity supersedes/overrides that of a selector with lower specificity. 

SOURCE ORDER Source order is simply the order in which the CSS source code is written. This order can sometimes affect the way your CSS rule-sets are applied on target HTML tags/elements especially when conflicts arise as a result of the cascading attribute of CSS. However, this order does in fact ever supersede rule inheritance. 

PARENT-TO-CHILD INHERITANCE This is manner by which CSS property and value pairs defined on a given HTML tag/element are passed on to the child HTML tag/ elements inside it. By way of inheritance. Examples of inheritable properties: color, overflow, line-height, font-size, font- family, opacity, text-align 

Layout Systems (Float-based vs. Flex-based) There are 2 broad layout systems in CSS today. By layout systems, this refers to the manner in which different HTML tags/elements are laid out (or arranged) on a page. These 2 layout systems allow for grouping, stacking, overlapping, shrinking, stretching of the HTML tags/elements. They are: 1. Float-based System 2. Flex-Based System 

Float-based Layout (example) 

Flex-based Layout (example) 

Flex Container CSS Properties List 

Shrink-to-Fit Triggers • display : inline-block; • position : absolute; • float : left; • display: inline-flex; • float: right; This can be defined as a map of specific pair of CSS properties and CSS values that when applied to a tag/HTML element, forces that ele e t to shri k a d fit tightl arou d its’ o te t i.e. o te t- area . This fit is er depe de t o the size of its’ o te t. Examples: 

CSS POSITIONING – LAYOUT HELPERS CSS Positioning is very critical to achieving complex UI layouts but must not be overused and/or abused. If not, you can fall into what is called the stir of sta ki g o te ts . When CSS positioning is mixed with x-y- dimension markers CSS properties (top, left, bottom, right) and z- dimension marker CSS property (z-index), you can achieve very complex beautiful designs. The key CSS property is the position property position: static; (default – z-index a ’t e used ith this position: absolute; position: relative; position: sticky; position: fixed; 

CONTEXTUAL POSITIONING – STACKING ORDER / STACKING LEVELS Stacking Levels are triggered with a particular CSS property (z-index) where HTML tag/elements is/are stacked in the z-direction (outside the plane of the browser window or into it). When one or more Stacking Levels are created on a web page with different numeric values for the z- index property, a Stacking Order is created. The z-index property can have negative values as well in which case this creates a Negative Stacking Level. The z-index property can also assume a value of auto. This is the order in which a Stacking Order takes (in ascending order from overlapped to overlapping HTML tag/elements) 1. Elements with a Negative Stack Level, typically elements with z-index: -1 2. Elements with a position value of static. 3. Elements with a Stacking Level of 0, typically positioned elements with a z-index value of auto. 4. Elements with Positive Stack Levels, e.g. a positioned element with a z-index value of 1 or higher 

CONTEXTUAL POSITIONING STACKING CONTEXT A Stacking Context is created by a Stacking Level or a combination of specific CSS property-value pair-range nested in one another. You can have multiple Stacking Contexts on a given webpage. A Stacking Context can also be nested into another Stacking Context . Stacking Contexts are self- contained bunches of 2 or more Stacking Levels nested in depth (i.e. When a Stacking Level is the child of another Stacking Level which is the child of another Stacking Level). The sta ki g is do e according to the value assigned for each Stacking Level whether or not they are children of a higher Stacking Level or not. Whenever you have one Stacking Context inside another. The outermost Stacking Level of the outermost Stacking Context is SUPREME. CSS property-value pairs that can create a Stacking Context are as follows: 1. opacity: 0.1 - 1 2. transform: rotate(30deg) – scale(2) 3. the HTML element 4. a Flex-Item with a z-index:1 or higher 5. z-index: 1 or higher 

STACKING CONTEXT DIAGRAM 1. DIV #1 is a Stacking Level 2. DIV #2 is another Stacking Level 3. DIV #3 is the outermost Stacking Level of the Stacking Context which is comprised of DIV #4, DIV #6, DIV #5 and DIV #3 4. DIV #6, DIV #4, DIV #5 are all Stacking Levels (nested) 5. DIV #4 can NEVER stack above DIV #1 even when it z-index is higher. 6. All DIVs form a Stacking Order 

CSS UNITS - PRIMER There are 2 types of CSS units for any CSS property that takes in a numeric value with a unit. E.g. margin, padding, line-height, width, height, min-width, min-height, max-width, max-height, font-size, border-width Relative Units: (em, rem, %, vw, vh) are flexible units. lengths expressed in any of these will appear relative to another fixed length property-value. Usually, the value of the width or height of the browser viewport or the size of a HTML tag/element font size.The %, em and rem units are practical in creating perfectly scalable layout! Absolute Units: (px, cm, pc, in, pt) are fixed length and a length expressed in any of these will appear as exactly that size in real life. 

RELAVTIVE UNITS • em Relative to the font-size of the element (2em means 2 times the size of the current font) • rem Relative to font-size of the root element • vw Relative to 1% of the width of the viewport* • vh Relative to 1% of the height of the viewport* • % Relative to the to the portion of the viewport that signifies 1vw or 1vh Percent-based conversions [ 1% = 1vh /1vw] 

ABSOLUTE UNITS The in, px, pt, cm units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout. Inches-based conversions [ 1in = 96px = 72pt = 2.54cm ] 

ABOUT MEDIA QUERIES - PRIMER Media Queries are a CSS construct for responding to changes in viewport sizes by updating styling to a group of rule sets. Media queries help to target different device screens size ranges and orientations. Each width and/or height chosen for triggering a media query is called a breakpoint. Media queries can also target devices without a screen like Printers or unconventional device types like Wearables and Internet TVs. If your design has a very complex layout, then Never base your breakpoints on the target devices (width and/or height)!! If your design has a simple layout, then base your breakpoints on the target devices 

ABOUT MEDIA QUERIES 

BOOTSTRAP CSS / IONIC CSS Bootstrap CSS is a CSS framework which is built upon a float-based layout system organized into 12-column grid. layout CSS classes row, col-md-1, col-md-2, col-sm-3, col-sm-4, col-xs-5 , col-xs-12 Ionic CSS is a CSS framework which is built upon a flex-based layout system organized into a 12-column grid. layout CSS classes row, responsive-sm, col, col-10, col-20, col-25, col-67, col-90 , col-top 

MODERNIZR / BROWSENGINE Modernizr is a JavaScript Library for Feature Detection. It continually adds a class name to the HTML tag whenever a feature is detected to be supported by the browser. See https://www.github.com/Modernizr/Modernizr BrowseEngine is a JavaScript Library for View-Port, Device Type and Browser Engine Property Detection. It continually adds a class name and special attributes to the BODY tag whenever the device type and/or browser engine is detected. See https://www.github.com/isocroft/Browsengine 

Using Modernizr and Browsengine for CSS 

Using Modernizr and Browsengine in CSS 

THANKS FOR LISTENING Hope you enjoyed it? I can now take your questions !!!