Bootstrap 4 - A Quick Review


Bootstrap 4
·         Bootrap is now officially sass-first project.
·         FlexBox for responsiveness, Traditionally Bootstrap’s layout has been powered by float-based styles
·         Besides Bootstrap’s move away from float-based layouts, its responsiveness now also comes with an extra tier. From now on, you’ll be able to customise these five defaults:
$grid-breakpoints: (
xs: 0px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px /*New Tier Added*/
) !default;
·         The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a “native font stack” for optimum text rendering on every device and OS
$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

This font-family is applied to the <body> and automatically inherited globally throughout Bootstrap. To switch the global font-family, update $font-family-base and recompile Bootstrap

·         Bootstrap 4 guidelines and reasons for choosing what to override in Reboot:
    • Update some browser default values to use rems instead of ems for scalable component spacing.
    • Avoid margin-top. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of margin is a simpler mental model.
    • For easier scaling across device sizes, block elements should use rems for margins.
    • Keep declarations of font-related properties to a minimum, using inherit whenever possible.

Comments

Post a Comment

Popular posts from this blog

Data Bound Controls in ASP.Net - Part 4 (FormView and DetailsView controls)

FormView The FormView control is used to display a single record from a data source. It is similar to the DetailsView control, except it displays user-defined templates instead of row fields. Creating your own templates gives you greater flexibility in controlling how the data is displayed. The FormView control supports the following features: ·          Binding to data source controls, such as SqlDataSource and ObjectDataSource. ·          Built-in inserting, updating and deleting capabilities. ·          Built-in paging capabilities. ·          Programmatic access to the FormView object model to dynamically set properties, handle events, and so on. ·          Customizable appearance through user-defined templates, themes, and styles. Templates For the FormView control ...
Read more

JavaScript - ES2015 (aka ES6)

The ES2015 Since this long time passed between ES5.1 and ES6, the release is full of important new features and major changes in suggested best practices in developing JavaScript programs. To understand how fundamental ES2015 is, just keep in mind that with this version, the specification document went from 250 pages to ~600. In this blog, we describe the most important changes. Arrow Functions A new  this   scope Promises Generators let   and  const Classes Constructor Super Getters and setters Modules Importing modules Exporting modules Template Literals Default parameters The spread operator Destructuring assignments Enhanced Object Literals Simpler syntax to include variables Prototype super() Dynamic properties For-of loop Map and Set New String methods New Object methods Arrow functions Arrow functions since their introduction changed how most JavaScript code looks (and works). Visually, it’s a simple and welcome ...
Read more

The Clickjacking attack and X-Frame-Options

Clickjacking  Clickjacking is a type of “web framing” or “UI redressing” attack. What that simply means in practice is that: 1. A user (victim) is shown an innocuous, but enticing web page (think watch online video) 2. Another web page (that generally does something important – think add friends on social network) is layered on top of the first page and set to be transparent 3. When the user thinks they are clicking on the web page they see (video), they are actually clicking on the higher layered (framed) page that is transparent There are two main ways to prevent clickjacking: 1.     Sending the proper X-Frame-Options HTTP response headers that instruct the browser to not allow framing from other domains 2.     Employing defensive code in the UI to ensure that the current frame is the most top level window Using X-Frame-Options X-Frame-Options  originally invented by Microsoft for IE8, but supported by a number ...
Read more