Bootstrap 4 | Working with the New Navigation

Working with the new navigation provides you with in-depth training on Web. Taught by Ray Villalobos as part of the Bootstrap 4: First Look

Bootstrap 4 is here, and it’s an important update that touches nearly every line of code. Get your first look at the changes in this popular responsive design platform. Our resident Bootstrap expert Ray Villalobos covers Reboot.css, which standardizes a lot of the CSS in Bootstrap 4; the new card components; and changes to the grid, forms, and tables in Bootstrap. Plus, find out how to compensate for the deprecation of Glyphicons and adjust to smaller changes throughout the platform. These tips will help you avoid some of the pitfalls when it comes to upgrading your own site from Bootstrap 3—and get excited about what’s to come.

Topics include:

  • Installing the upgrade
  • Using Reboot.css
  • Using the new grid
  • Working with new navigation and card components
  • Understanding table and form changes

Structure and function

Bootstrap is modular and consists essentially of a series of Less stylesheets that implement the various components of the toolkit. A stylesheet called bootstrap less includes the components stylesheets. Developers can adapt the Bootstrap file itself, selecting the components they wish to use in their project.

Adjustments are possible to a limited extent through a central configuration stylesheet. More profound changes are possible by the Less declarations.

The use of Less stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Bootstrap 4

Since version 2.0, the configuration of Bootstrap also has a special “Customize” option in the documentation. Moreover, the developer chooses on a form the desired components and adjusts, if necessary, the values of various options to their needs. The subsequently generated package already includes the pre-built CSS style sheet.

As of Bootstrap 4, Sass will be used for stylesheets instead of Less.

Grid system and responsive design comes standard with a 1170 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.

Stylesheets

Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a uniform, modern appearance for formatting text, tables and form elements.

Re-usable components

In addition to the regular HTML elements, Bootstrap contains other commonly used interface elements. These include buttons with advanced features (e.g. grouping of buttons or buttons with drop-down option, make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.), labels, advanced typographic capabilities, thumbnails, warning messages and a progress bar. The components are implemented as CSS classes, which must be applied to certain HTML elements in a page.

Bootstrap 4
StartUI – Premium Bootstrap 4 Admin Dashboard Template

JavaScript components

Bootstrap comes with several JavaScript components in the form of jQuery plugins. They provide additional user interface elements such as dialog boxes, tooltips, and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields. In version 2.0, the following JavaScript plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.

See more resources:

Bootstrap Programming Cookbook
Building WordPress Themes with Bootstrap

Website:
Build My Site

Writing Your First TypeScript Function

Writing your first TypeScript function provides you with in-depth training on Developer. Taught by Jess Chadwick as part of the TypeScript Essential Training.

TypeScript lets you write JavaScript “the way you really want to.” TypeScript compiles to plain JavaScript, so it works in any browser, any host, and any OS. It adds a variety of helpful syntax and tools onto an already mature language, bringing the power and productivity of static typing and object-oriented development to core JavaScript. Plus, it’s completely open source.

In this course, Jess Chadwick teaches you how to leverage the full power of the TypeScript language in your JavaScript applications, starting by revisiting some JavaScript fundamentals. Then he reviews the data types, classes, generics, modules, and decorators that are unique to TypeScript. In the “Real-World Application Development” chapter, he demos how to convert an existing JavaScript codebase to take advantage of everything TypeScript has to offer. What’s more, he shows you how to do it all using the environment of your choosing: Windows, Mac, or even Linux.

Topics include:

  • What is TypeScript?
  • Installing TypeScript
  • Creating a TypeScript project
  • Reviewing ES6 language features
  • Specifying JavaScript types
  • Defining custom and anonymous types
  • Defining and implementing TypeScript classes
  • Working with generics
  • Organizing code with namespaces
  • Switching modules
  • Importing modules
  • Debugging TypeScript
  • Implementing decorators

TypeScript

TypeScript is a free and open source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language.

function

TypeScript is designed for development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, any existing JavaScript programs are also valid TypeScript programs.

TypeScript supports definition files that can contain type information of existing JavaScript libraries, much like C/C++ header files can describe the structure of existing object files. This enables other programs to use the values defined in the files as if they were statically typed TypeScript entities. There are third-party header files for popular libraries like jQuery, MongoDB, and D3.js. TypeScript headers for the Node.js basic modules are also available, allowing development of Node.js programs within TypeScript.

Compatibility with JavaScript

TypeScript is a strict superset of ECMAScript 2015, which is a superset of ECMAScript 5, commonly referred to as JavaScript. As such, a JavaScript program is also a valid TypeScript program, and a TypeScript program can seamlessly consume JavaScript. TypeScript compiles to ES3-compatible JavaScript. By default the compiler targets ECMAScript 3, the current prevailing standard, and is also able to generate constructs used in ECMAScript 5.

function

With TypeScript, it is possible to use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript-generated code from other JavaScript. Type declarations for these libraries are provided with the source code.

TypeScript adds support for features such as classes, modules and an arrow function syntax as proposed in the upcoming ECMAScript 6 standard.

Declaration Files

When a TypeScript script gets compiled there is an option to generate a declaration file (with the extension .d.ts) that functions as an interface to the components in the compiled JavaScript. In the process the compiler strips away all function and method bodies and preserves only the signatures of the types that are exported. The resulting declaration file can then be used to describe the exported virtual TypeScript types of a JavaScript library or module when a third-party developer consumes it from TypeScript.

The concept of declaration files is analogous to the concept of header file found in C/C++.

declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

Type declaration files can be written by hand for existing JavaScript libraries, as has been done for jQuery and Node.js.

Large collections of declaration files for popular JavaScript libraries are hosted on GitHub in DefinitelyTyped and the Typings Registry. A command-line utility called typings is provided to help search and install declaration files from the repositories.

See more resources:

The World of ECMAScript
TypeScript won

Website:
Build My Site

Create Basic Interaction

Buttons are made for clicking, or in iOS, tapping. This movie demonstrates the basics of responding to button presses in iOS. Using this basic interaction effectively helps build a foundation for developing apps. The process involves connecting a button to code and handling the touch event inside your code.

Learn how to create native apps for iOS 9, the latest operating system for the iPhone and iPad. It all starts with the installation of Xcode, the free all-in-one development environment built by Apple. Author Todd Perkins then shows how to select an app template and start working on the core iOS programming skills: creating interactions; responding to touch events, button clicks, and text input; and using delegation. He also spends a few chapters on iOS interface design. In these sections, you’ll learn how to use Interface Builder to visually design your app’s UI and use size classes to responsively adjust to different screen sizes. Plus, find out how to use views to display images, web content, and table data, and transition seamlessly between views in multiview apps.

Interested in developing for Apple Watch or Apple TV? Get a sneak peek in Chapter 9. The course wraps up with a look at the submission process for the App Store. See more about this course: iOS 9 App Development with Swift 2 Essential Training

Topics include:

  • Installing Xcode and the iOS SDK
  • Creating a simple iOS app
  • Creating a basic interaction with a button
  • Choosing an object as a first responder
  • Creating a user interface with Interface Builder and Auto Layout
  • Working with sliders and progress bars
  • Creating views to show images and web pages
  • Developing responsive layouts with size classes
  • Understanding the iOS architecture
  • Loading data in table views
  • Transitioning between views
  • Developing for the iPad, Apple Watch, and Apple TV
  • Submitting apps to the App Store

Interaction

In addition to dividing the application into three kinds of components, the model–view–controller design defines the interactions between them.

interaction
MVC (Model View Controller) is a very important design pattern in programming.
  • A model stores data that is retrieved according to commands from the controller and displayed in the view.
  • A view generates an output presentation to the user based on changes in the model.
  • A controller can send commands to the model to update the model’s state (e.g. editing a document). It can also send commands to its associated view to change the view’s presentation of the model (e.g. by scrolling through a document).

MVC is useful because it separates the functionality of data storage, data representation, and user interaction. Under this framework, it is possible to manipulate how a end user will see data without affecting the data itself. It is popular in the world wide web because it provides an clean organization and structure to applications that require user interaction.

interaction

See more resources:

Building iOS Interfaces: A Custom Button
Creating Global Properties and Constants
Open Source iOS Component For Creating Customizable Buttons That Float Above A Scroll View

Website:
Build My Site

React.js Syntax

React.js syntax provides you with in-depth training on Web. Taught by Eve Porcello as part of the Learn React.js: The Basics.

JSX

React components are typically written in JSX, a JavaScript extension syntax allowing easy quoting of HTML and using HTML tag syntax to render subcomponents. HTML syntax is processed into JavaScript calls of the React library. Developers may also write in pure JavaScript. JSX is similar to another extension syntax created by Facebook for PHP, XHP (an augmentation of PHP and Hack developed at Facebook to allow XML syntax for the purpose of creating custom and reusable HTML elements).

react.js

Architecture Beyond HTML

The basic architecture of React applies beyond rendering HTML in the browser. For example, Facebook has dynamic charts that render to <canvas> tags and Netflix uses isomorphic loading to render identical HTML on both the server and client.

React Native

React Native libraries announced by Facebook in 2015 provide the React architecture to native iOS and Android applications.

react.js

One-way Data Flow

Properties, a set of immutable values, are passed to a component’s renderer as properties in its HTML tag. A component cannot directly modify any properties passed to it, but can be passed as callback functions that modify values. This mechanism’s promise is expressed as “properties flow down and actions flow up”.

For example, a shopping cart component might include multiple product line components. Rendering a product line uses only the properties passed to it and cannot affect the shopping cart’s total due. However, the product line could be passed a callback function as a property which would be called when a ‘delete this product’ button was pushed and that callback function could affect the total due.

Virtual DOM

Another notable feature is the use of a “virtual DOM.” React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser’s displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change while the React libraries only render subcomponents that actually change.

For example, a shopping cart component would be written to render the entire shopping cart on any change of data. If a product line subcomponent had no changes to the properties, a cached rendering would be used. This means the relatively slow full update to the browser’s DOM would be avoided. Alternately, if the product line quantity had changed, the product line subcomponent would be rendered; the resulting HTML might differ in only one node, and only that node would be updated in the DOM.

See more resources:

Up and Running with React.js | Creating a React Component
Building a Polling App with Socket IO and React.js
Learn React.JS in 8 Minutes

Website:
Build My Site

Create an Android Studio Project

Get an introduction to Java programming while you learn to develop Java applications for various runtime environments—desktop, web, and mobile—with Eclipse. Author Todd Perkins explains how to configure the development environment, and reviews the basic building blocks of the Java syntax: variables, functions, arrays, conditional statements, classes, and input/output. In chapters 3 and 4, he builds a user interface with the Swing framework, the GUI toolkit for Java, and connects Swing’s table components to different data sources. He also covers NetBeans, an alternative IDE for working with JavaServer Pages (JSP), and publishing workflows for desktop applications (via JAR files) and Android apps built with Java. See more: Up and Running with Java Applications

Topics include:

  • Installing Java and Eclipse
  • Understanding basic Java syntax
  • Handling Java errors
  • Creating a UI with Swing
  • Creating tables and connecting to data sources for tables
  • Publishing a JAR file
  • Installing NetBeans
  • Creating JSP pages
  • Setting up and connecting to databases
  • Creating Java-based Android Studio projects
    • Android Studio

      Android Studio is the official integrated development environment (IDE) for developing for the Android platform. It was announced on May 16, 2013 at the Google I/O conference. Android Studio is freely available under the Apache License 2.0.

      Android Studio

      Android Studio was in early access preview stage starting from version 0.1 in May 2013, then entered beta stage starting from version 0.8 which was released in June 2014. The first stable build was released in December 2014, starting from version 1.0.

      Based on JetBrains’ IntelliJ IDEA software, Android Studio is designed specifically for Android development. It is available for download on Windows, Mac OS X and Linux, and replaced Eclipse Android Development Tools (ADT) as Google’s primary IDE for native Android application development.

      Android Studio vs. Eclipse ADT comparison

      Feature Android Studio Eclipse ADT
      Build system Gradle Apache Ant
      Maven-based build dependencies Yes No
      Build variants and multiple-APK generation Yes No
      Advanced Android Intelligent code completion and refactoring Yes No
      Graphical layout editor Yes Yes
      APK (Android application package) signing and keystore management Yes Yes
      NDK support Yes Yes

      Swing (Java)

      Swing is a GUI widget toolkit for Java. It is part of Oracle’s Java Foundation Classes (JFC) – an API for providing a graphical user interface (GUI) for Java programs.

      Android Studio

      Swing was developed to provide a more sophisticated set of GUI components than the earlier Abstract Window Toolkit (AWT). Swing provides a native look and feel that emulates the look and feel of several platforms, and also supports a pluggable look and feel that allows applications to have a look and feel unrelated to the underlying platform. It has more powerful and flexible components than AWT. In addition to familiar components such as buttons, check boxes and labels, Swing provides several advanced components such as tabbed panel, scroll panes, trees, tables, and lists.

      Unlike AWT components, Swing components are not implemented by platform-specific code. Instead, they are written entirely in Java and therefore are platform-independent. The term “lightweight” is used to describe such an element.

      See more resources:

      The official Android IDE
      Configuring Android Studio
      Android Studio 2.0 Beta: What’s New?

      Website:
      Build My Site

Move the Necessary Files with FTP

Move the necessary files with FTP provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the Moving WordPress with WP Migrate DB and DB Pro.

Move WordPress to a new site with the free plugin WP Migrate DB. Morten Rand-Hendriksen breaks down how to migrate a WordPress site from one location to another, by duplicating and resetting the database with WP Migrate DB. He also shows how to simplify the process with the premium edition of the plugin, WP Migrate DB Pro, and move files with its powerful add-on, Media Files. Both plugins retain all your original content and settings, and work great whether you’re moving WordPress from your computer to a live site or between hosts. It’s just three steps—setting up the new site, migrating files, and migrating the database. However, if something goes wrong along the way, Morten also includes troubleshooting techniques for the most common WordPress migration problems.

Topics include:

  • Moving files via FTP
  • Installing WP Migrate DB on both sites
  • Exporting and importing the database
  • Using the WP Migrate DB Pro
  • Understanding push and pull
  • Moving files with the Media Files add-on
  • Troubleshooting common WordPress migration problems

File Transfer Protocol (FTP)

The File Transfer Protocol (FTP) is a standard network protocol used to transfer computer files between a client and server on a computer network.

FTP is built on a client-server model architecture and uses separate control and data connections between the client and the server. FTP users may authenticate themselves with a clear-text sign-in protocol, normally in the form of a username and password, but can connect anonymously if the server is configured to allow it. For secure transmission that protects the username and password, and encrypts the content, FTP is often secured with SSL/TLS (FTPS). SSH File Transfer Protocol (SFTP) is sometimes also used instead, but is technologically different.

FTP
llustration of starting a passive connection using port 21

The first FTP client applications were command-line programs developed before operating systems had graphical user interfaces, and are still shipped with most Windows, Unix, and Linux operating systems. Many FTP clients and automation utilities have since been developed for desktops, servers, mobile devices, and hardware, and FTP has been incorporated into productivity applications, such as Web page editors.

Migration/wp-config.php

WordPress makes migration from one server to another relatively simple due to its use of a configuration file (wp-config.php, usually located in your root). This file controls the base settings for a WordPress website including (but not limited to) your database connection settings. Due to the use of a configuration file, migrating from one server to another can be accomplished by the following basic steps:

  • Download a copy of the WordPress files/folders (e.g. via FTP).
  • Download a copy of the associated database (view the ‘DB_NAME’ row in the wp-config.php for the associated database to back up).
  • Upload the files/folders to the new server.
  • Create a new database on the new server and import the sql backup.
  • Update the wp-config.php database fields to reflect.

See more resources:

Migrating WordPress DB is no more pain
Migration can be a beautiful thing
8 Best WordPress Backup Plugins

Website:
Build My Site

An Overview of Android 6.0 New Features

Find out what Android 6.0 (Marshmallow) has to offer app developers like you. Google has updated their robust mobile operating system with even more new features, including new project templates in Android Studio, an enhanced permissions framework, automatic backups for app data, and many smaller enhancements that are designed to make developers’ lives easier.

In this short training course, David Gassner shows how to authenticate users using device credentials or the fingerprint scanner, configure apps for backup, test backups to Google servers, and use app links, website associations, and voice interactions. Plus, learn how to control data display in activity layouts with the new data-binding framework. See more: Android 6.0 New Features for Developers.

Android Marshmallow

Android 6.0 “Marshmallow” is a version of the Android mobile operating system. First unveiled in May 2015 at Google I/O under the codename “Android ‘M'”, it was officially released in October 2015.

Android 6.0
Android Marshmallow home screen, with proprietary applications

Marshmallow primarily focuses on improving the overall user experience of Lollipop, introducing a new permissions architecture, new APIs for contextual assistants (a feature notably leveraged by “Google Now On Tap”—a new capability of the Google Search app), a new power management system that reduces background activity when a device is not being physically handled, native support for fingerprint recognition and USB Type-C connectors, the ability to migrate data and applications to a microSD card and use it as primary storage, as well as other internal changes.

Now on Tap

On Android 6.0 “Marshmallow”, Google Now supports an additional feature known as “Google Now On Tap”, which allows users to perform searches within the context of information currently being displayed in an app. When a user activates the feature, by holding the “Home” button or using a voice command, the entire text content of the current screen is parsed to search for keywords and other information, which is then used to generate cards that display information, suggestions, and actions related to the content.

Android 6.0
Google Now on the Nexus 6

Scott Webster of CNET praised Google Now for its ability to remind users of events based on past location histories and check-ins and further commended it for providing “information instantly in a clean, intuitive manner” without the user requesting it. A review by Ryan Paul of Ars Technica claims that like most other voice activated apps, including Siri, voice recognition is a major issue, but noted that the ability to type queries provides users with alternatives. Some commentators noted that the predictive power of Google Now reveals “exactly how much data and information Google actually has about [users’] routines and daily lives.

In January 2015, Google introduced the ability for participating, installed third-party apps to generate cards; on launch, this included apps such as Airbnb, eBay, The Guardian, and Lyft among others.

See more resources:

Sharing Content between Android apps
Guide to implementing App Linking on Android 6.0 Marshmallow
Android framework classes, choose wisely!

Website:
Build My Site

Learn Sketch: The Basics | Creating Pages and Artboards

Sketch is one of the most popular UX design tools around. This training course will help designers of all skill levels be productive with its focused, comprehensive vector graphics workflow. Follow along with Chris Converse and learn the ins and outs of the Sketch 3 interface, how to work with the key tools and workflows for UX and web designers, and how to create logos, wireframes, mockups, and production-ready graphics with Sketch. By the end of the course, you’ll be able to use Sketch’s artboards, text and object styles, reusable symbols, and drawing and export tools to create high-definition PNGs, JPEGs, and PDFs. The exercise files are free to all members. See more: Learn Sketch: The Basics.

Topics include:

  • Creating pages and artboards
  • Adding a navigation bar
  • Creating a logo
  • Drawing custom shape-based icons
  • Building links
  • Adjusting layouts for medium screens
  • Adapting layouts for small screens
  • Exporting artboards and assets

Sketch App By Bohemian Coding is a desktop app for Professional digital design for Mac, mostly used to design and prototype web applications.

How to turn pencil and paper sketch to high fidelity mock up with Sketch app:

Sketch

Artboards

To develop the high level flow of your app many designers choose to create an artboard. The first version of this artboard is often on paper, simply linking boxes with words together. After you’ve drawn your screenflow out on paper you’ll find it much easier to imagine travelling through the interface. Often through visualisation inconsistencies and complexities will become immediately obvious. Many times you’ll have moments where you think “I want to do x” on a screen and suddenly realise there’s no obvious place to do it.

You can use your inital rough artboards as a framework to organise and design a more fully fledged concept. A sketched out, more detailed artboard is quite easy for others to interpret, so you can spend time having people “try” out your design to see if they understand the direction it’s going. Testing your design is a really great way to see what is and what isn’t working.

Sketch Features:

  • Autosave and versioning – Sketch is autosaving for you and it even allows you to restore a previous version of your file.
  • Vector editing and pixel perfection – Switching from vector to pixel view is also very useful when it comes to icon or illustration design.
  • Smart Guides – Smart guides will help you to get all your elements with the correct alignment, padding and margin in a very easy way.
  • Edit elements on the fly – Getting the perfect shape size or corner radius by entering values in the input fields.
  • Shapes connection – No more struggle with moving things between back and front.
  • Multiple blending options per layer – In Sketch, you can do what you want with a single shape.
  • Round to Nearest Pixel Edge – Round to Nearest Pixel Edge rounds a shape or layer to its nearest pixel edge.
  • Linked Styles – When you deal with text-heavy design, linked style allows you to set a specific style that you can assign to any text.
  • Exporting Assets – Sketch being vector friendly and well-thought, the export is one click away and allows different sizes and formats (pdf, eps, svg, png, jpg, tiff).
  • Distribute Spacing – This feature will help you to quickly test several of them in a heartbeat.
  • Grids – You certainly use grids, this is a great tool.
  • Text Rendering – Using it’s own advanced text rendering, Sketch is doing a great work at displaying text and typefonts.
  • CSS Styles – This feature will translate all your blending options into CSS code.
  • Rotate copies – Saves you lot of trouble and time.
  • Sketch Play – It’s still in beta but Sketch is on it’s way to have iOS mirroring.

See more resources:

How to Mockup Responsive Websites in Sketch App
How to Create an Icon Design Workflow in Sketch App 3
iPhone 6 Screens Demystified
Sketch App Sources
Learn to design an iPhone app with Sketch 3

Website:
Build My Site

Creating Responsive Inputs and Labels

Creating responsive inputs and labels provides you with in-depth training on Web. Taught by James Williamson as part of the Building Responsive Forms with Flexbox. Also, see my previous post: What is Flexbox?

The CSS3 Flexible Box Model, or Flexbox, is a different way to design responsive websites and HTML forms. Flexbox doesn’t rely on floats or collapsible margins. Instead, flex containers shrink and expand items to fit the available space. With flexbox, complex layouts can be achieved with cleaner, more semantic code.

In this course, senior staff author James Williamson shows how to use flex containers, flex child items, and responsive design techniques to create responsive layouts for two forms: a short search form and a longer registration form with sections. He demonstrates how to style the form structures, fields, labels, and buttons; control the alignment of different elements; and enhance the responsiveness of both forms with media queries.

CSS3 Modules

Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called “modules”. Each module adds new capabilities or extends features defined in CSS 2, preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999.

responsive

Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group., and four of these have been published as formal recommendations:

Some modules have Candidate Recommendation (CR) status and are considered moderately stable. At CR stage, implementations are advised to drop vendor prefixes.

Terminology

See the Pen CSS3 Flexbox by Sten Hougaard (@netsi1964) on CodePen.

Following are a few terms associated with the flex layout model:

Flex container
Parent element that holds all flex items. Using the CSS display property, the container can be defined as either flex or inline-flex.

Flex item
Any child element held within the flex container in considered a flex item. Any text within the container element is wrapped in an unknown flex item.

Axes
Each flex box contains two axes: the main and cross axes. The main axis is the axis on which the items align with each other. The cross axis is perpendicular to the main axis.

Flex-direction
Establishes main axis.

Justify-content
Determines how content gets placed on the main axis on the current line.

Align-items
Determines the default for how content gets placed on the cross axis on the current line.

Align-self
Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.

Directions
The main-start/main-end sides determine where to start placing flex items within the flex container, starting from the main-start end and going to the main-end end. The cross-start/cross-end sides determine where flex lines get filled with flex items from cross-start to cross-end.

Order
Places elements in groups and determines which order they are to be placed in within the container.

Flex-flow
Shorthands flex-direction and flex-wrap to place the flex content.

Lines
Flex items can either be placed on a singular line or on multiple lines as defined by the flex-wrap property, which controls both the direction of the cross axis and how lines stack within the container.

Dimensions
Main size and cross size are essentially the height and width of the flex container, each dealing with the main and cross axes respectively.

See more resources:

Using Bootstrap 4 Flexbox
Flexbox’s Best-Kept Secret
How To Get Started With CSS Flexbox

Website:
Build My Site

Introducing Popperscores: A Preview of the Final Project

Introducing Popperscores: A preview of the final project provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Themes from Scratch Using Underscores.

Ready for your next WordPress challenge? Learn how to build more complex custom themes using the _s (aka Underscores) starter theme. Morten Rand-Hendriksen takes you from basic layout and customization to enabling advanced responsive design and accessibility features. He reinforces the basics lessons with DRY (don’t repeat yourself) development practices and a structured approach that will help you build WordPress themes that meet modern standards. Plus, he explores core concepts like understanding the WordPress template hierarchy and mobile-first design, creating functions, adding custom JavaScript, applying styles, and more. Plus, for 2016, we’re including an all-new chapter on the Customizer, which provides controls that allow users of your theme to adjust the colors and layout.

Topics include:

  • Installing WordPress, Underscores, plugins, and NetBeans
  • Creating a modular, mobile-first WordPress theme
  • Setting up the basic theme
  • Building a custom header
  • Designing responsive, accessible menus
  • Configuring the Single Post Template plugin
  • Generating featured images
  • Styling the comments area, search results, and widget areas
  • Working with static pages
  • Adding features to the Customizer
  • Customizing the backend
popperscores
Generate your own custom version at Underscores.me

Underscores (_s)

Designed to serve as a base/starter theme by the WordPress.com Theme Team — the people responsible for
the design and development of themes that ship with WordPress. It is a culmination of the lessons learned and best practices garnered from building themes used by millions of people all over the world.

Check out Underscores (_s) on Github

Themes

WordPress users may install and switch between themes. Themes allow users to change the look and functionality of a WordPress website and they can be installed without altering the content or health of the site. Every WordPress website requires at least one theme to be present and every theme should be designed using WordPress standards with structured PHP, valid HTML and Cascading Style Sheets (CSS). Themes may be directly installed using the WordPress “Appearance” administration tool in the dashboard or theme folders may be uploaded via FTP. The PHP, HTML (HyperText Markup Language) and CSS code found in themes can be added to or edited for providing advanced features. WordPress themes are in general classified into two categories, free themes and premium themes. All the free themes are listed in the WordPress theme directory and premium themes should be purchased from marketplaces and individual WordPress developers.

Popperscores
Sparkle is based on Underscores (_s) and Bootstrap Framework with built-in flexibility

WordPress users may also create and develop their own custom themes if they have the knowledge and skill to do so. If WordPress users do not have themes development knowledge then they may download and use free WordPress themes from wordpress.org.

See more resources:

Automattic Launches Components with 5 New Starter Themes Based on Underscores
Underscores WordPress Starter Theme Adds Support for Sass
Introduction To Underscores: A WordPress Starter Theme With Konstantin Obenland
_s_backbone: A WordPress Starter Theme Based on Underscores and Backbone.js

Website:
Build My Site