Limitless - Responsive Web Application Kit by Eugene Kopyov

Bootstrap overview

Overview

Limitless web application kit is fully based on Bootstrap framework. It includes almost all native Bootstrap components, grid system, original markup (except a few components where markup was slightly modified) and native classes. It is also based on original Bootstrap SCSS files. Current Bootstrap version is 4.1.1, the latest and the most stable at the moment. Due to limited support of flexbox model in older browsers, if you need IE9/IE10 support use Bootstrap 3.3.7 version included in the package.

About Bootstrap framework

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. The framework makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

Bootstrap components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Limitless template includes (almost) all of them:

Component	Description
Alerts	Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages
Badges	Small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units
Breadcrumbs	Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Buttons	Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button dropdowns	Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper menu markup
Button groups	Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Cards	A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
Collapse	Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Dropdowns	Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Forms	Form control styles, layout options, and custom components for creating a wide variety of forms.
Input groups	Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
List group	List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Modal	Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Navs	Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
Navbar	Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Pagination	Component for showing pagination to indicate a series of related content exists across multiple pages
Popover	Add Bootstrap popovers, like those found in iOS, to any element on your site. Popovers rely on the 3rd party library `Popper.js` for positioning. You must include `popper.min.js` before `bootstrap.js` or use `bootstrap.bundle.min.js` which contains Popper.js in order for popovers to work!
Progress bars	Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Scrollspy	Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
Tooltips	Custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Media object	Media object to construct highly repetitive components like blog comments, tweets, and the like.
Tables	Opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Responsive embed	Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

Getting started

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

<!-- Markup -->
<!DOCTYPE html>
<html lang="en">
  ...
</html>

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<!-- Meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Basic usage

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS. File ordering matters:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">

<!-- Limitless overrides -->
<link rel="stylesheet" href="assets/css/bootstrap_limitless.min.css">

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.. File ordering matters:

<!-- jQuery library -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="../../../../global_assets/js/main/bootstrap.bundle.min.js"></script>

Now you are up and running. All template files MUST contain these 5 files in your page's <head> element. All other files are optional, except app.js, which contains template's JS base. Also keep correct load ordering: first - dependencies, then - components. You can place JS paths either in <head> or before <body> closing tag, it's up to you. I prefer 1st option.

Bootstrap documentation

Bootstrap documentation available online on Official Bootstrap website. Below you can find different links and sources related to the framework:

Link	Description
http://getbootstrap.com/	Official website
https://github.com/twbs/bootstrap	Github project
https://github.com/twbs/bootstrap/issues	Issue tracker
http://blog.getbootstrap.com/	Blog
https://bootstrap-slack.herokuapp.com/	Slack room

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Introduction

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together. Here’s how it works

Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up
Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.
Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Columns have horizontal padding to create the gutters between individual columns, however, you can remove the marginM from rows and padding from columns with .no-gutters on the .row.
To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
You can use predefined grid classes (like .col-4) or Sass mixins for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

Media queries

We use the following media queries in our SCSS files to create the key breakpoints in our grid system.

// No media query for all breakpoints since this is the default in Bootstrap

// Small devices (tablets, 576px)
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-down(sm) { ... }

// Medium devices (desktops, 768px)
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-down(md) { ... }

// Large devices (large desktops, 992px)
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-down(lg) { ... }

// Extra large devices (extra large desktops, 1200px)
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-down(xl) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

// Media queries
// Small devices (tablets, up to 576px)
@include media-breakpoint-down(sm) { ... }

// Medium devices (desktops, up to 768px)
@include media-breakpoint-down(md) { ... }

// Large devices (large desktops, up to 992px)
@include media-breakpoint-down(lg) { ... }

// Extra large devices (extra large desktops, up to 1200px)
@include media-breakpoint-down(xl) { ... }

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table:

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	40px (20px on each side of a column)
Nestable	Yes
Column ordering	Yes

Limitless - Bootstrap