Bootstrap: Glossary Week 1

In Bootstrap (as in HTML and CSS) there are many utilities to help you with aligning images, text, columns, and other content.

In this week, you will learn about the align-items-* classes and the text-* classes for alignment.

See:

• https://getbootstrap.com/docs/4.0/layout/grid/#alignment
• https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment

The front end is synonymous with client-side or browser-side in web development.

Before online, networked computing, computers only ran self-contained software that was entirely in one location – the computer itself, or a disk connected to the computer. While some software does still run in this way, websites and web applications consist of code that’s run on both a client (such as a web browser, but could also be a desktop or mobile application) and on a server, with the two sides communicating with each other over a network and passing data back and forth to co-create the functionality of the website or web app.

The part of the code that’s on the server side is primarily concerned with data storage and management, as well processes such as user authentication and handling API calls. In the three-tier architecture model, the data tier and the business logic tier typically make up the back end.

Bootstrap is a framework built on mobile-first, responsive design principles. In other words, Bootstrap helps designers build websites with mobile and tablet devices as their initial and target audiences.

Breakpoints are viewport widths that are set using CSS3 media queries in order to apply different CSS rules at varying viewport sizes. The concept and use of breakpoints is a major part of responsive web design.

Bootstrap 4 uses these breakpoints:

CodePen is a socially-based web development environment that allows developers of all levels to write code and see their results within their web browser, all in real-time. CodePen focuses on front-end web languages and tools such as HTML, CSS and Javascript.

A CLI, or command line interface, also known as a shell or a shell terminal.

There are many different shell applications. In MacOS, you will typically use the Terminal application. In Windows, two built-in options are Command Prompt and Powershell. If you have installed Git in Windows, you will also typically also have access to a shell called Git Bash.

CSS, or Cascading Style Sheets, is a language use to style the HTML content on a web page, such as  modifying colors, font types, font sizes, shadows, images, element positioning and more!!

GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside 40 million developers.

The Bootstrap Grid system is composed of a series of divs with Bootstrap classes applied to them to create a responsive layout method. They make heavy use of the CSS Flexbox layout method and media queries/breakpoints, which are all part of CSS3.

All Bootstrap grids are created with div elements with specific Bootstrap classes applied to them. They will always use these classes: one of two container classes (container and container-fluid), the row class, and the responsive column classes (col-*). The column classes can be further specified to explicitly give a column span to any column (out of 12 potential columns per row) as well as breakpoints that specify the viewport sizes to which a column class applies (ex.: col-sm-4 will cause a column to span a third of a row (4 out of 12) for viewport sizes small AND UP).

The Bootstrap Grid system should not be confused with the similarly named CSS Grid. Bootstrap Grid and CSS Grid are two different concepts.

Homebrew is a package manager for MacOS.

https://brew.sh/

The jumbotron component in Bootstrap is utilized by adding the jumbotron class to an appropriate element such as div or header or section. It is a “lightweight, flexible component for showcasing hero unit style content.”

See: https://getbootstrap.com/docs/4.0/components/jumbotron/

Bootstrap has a built-in class called list-unstyled that will remove the automatic styles from an HTML list made with <ol> or <ul>.  For example, when used with a <ul> tag like <ul class=”list-unstyled”>, it will remove the bullet points from the listitems inside the <ul>.

Media Queries are a new feature in CSS3. The viewport meta tag in HTML5 must be used in order to allow CSS media queries to work. Bootstrap makes heavy use of media queries.

Here is an example of a media query from the Bootstrap.css file:

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

The @media begins the media query. It looks for a min-width of 1200px for the viewport, then applies the styles inside the { } block if that condition is true. This use of a media query is called setting a breakpoint – 1200px is the breakpoint at which the inner styles are applied.

The min-width value is most often used for creating breakpoints for mobile-first design. Along with min-width, there are many other values that are possible for a media query to check, such as max-width and resolution. A list can be found here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

The Navbar feature puts a Navigation header at the top of the page.  You can make it extend or collapse depending on the screen size.  A standard navigation bar is created with <nav class=”navbar navbar default”>

-Source W3schools

Node.js is an asynchronous, event-driven runtime environment for JavaScript based on Chrome V8 engine technology that allows JavaScript to run on a computer/server outside of a browser. It is instrumental in providing a way to use JavaScript across the entire web stack and is quickly gaining in popularity.

NPM stands for Node Package Manager and is the foremost package manager for web development and the world’s largest software registry for both public, open-source software and private software. The open source community uses NPM to share packages of source code, and private companies also use NPM for managing code privately.

https://docs.npmjs.com/about-npm/

https://www.w3schools.com/whatis/whatis_npm.asp

Bootstrap offers a set of offset-* classes that can be used to offset columns to the right in a responsive way.

See: https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Bootstrap offers a set of order-* classes to change the order of columns in a responsive way.

See: https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

Responsive Web Design means web design that adapts to different viewports and changes the website display to be optimized for the current viewport. This is primarily accomplished by use of the meta viewport tag that was added to the HTML specification in HTML5, along with media queries which allow the creation of breakpoints at certain viewport sizes and different CSS rules to be applied at different viewpoints.

Software documentation is written text or illustration that accompanies computer software or is embedded in the source code. The documentation either explains how the software operates or how to use it, and may mean different things to people in different roles.

A viewport is the portion of a website or application’s UI that is viewable by the user. It is sized in CSS pixels (also known as software pixels), versus hardware pixels. Screen resolutions are usually expressed as hardware pixels plus a PPI (pixels per inch), also known as pixel density. Pixel density can differ greatly among devices, so hardware pixels cannot be used to consistently describe viewport sizes. CSS pixels are calculated for consistency and used in giving the measurements for viewports. The meta viewport attribute, new in HTML5, allows the browser to access the viewport of the device and thereby enable the use of media queries and other means of creating responsive websites.

Note: The viewport is not the same as the screen resolution converted to CSS pixels (although it can be, such as on smartphones and with desktop/laptop browsers set to fullscreen mode). For example, on a desktop/laptop web browser not in fullscreen mode, the viewport is the size in CSS pixels of the browser window minus the size of the scrollbars, the address bar, the tabs across the top, the bookmarks bar, the downloads bar, and such.