Skip to content

Latest commit

 

History

History
81 lines (77 loc) · 5.38 KB

frameworks.md

File metadata and controls

81 lines (77 loc) · 5.38 KB
Raw

+++ description = "Bootstrap & jQuery" title = "Frontend tools" draft = false weight = 400 bref="JavaScript frameworks provide tooling to efficiently handle commonly faced problems in client-side development" toc = true script = 'animation' +++

Bootstrap

A free and open-source front-end framework for developing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Classes
Bootstrap has styling classes for tables, margins, padding, borders, alignment, color, and much more. Steer clear of type selectors (e.g., input[type="text"]) and extraneous parent classes (e.g., .parent .child) that make styles too specific to easily override.
Components
These components make use of the popper JavaScript files added to the HTML file. Bootstrap comes built-in with the most commmon components such as navbar, forms, and buttons.
Grid system
A mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system. Each column of a row contains a col class specifying how many of the 12 columns it can possibly take up (no more than 12 total). These classes can also take a prefix (e.g. .col-sm-, .col-lg-) specifying which devices they apply to. Media queries are optionally used to specify the breakpoints (in pixels) for these class prefixes.
Image
z-index
For overlapping components, Bootstrap uses a modifiable z-index to determine priority of overlapping.

jQuery

A fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Selectors
jQuery accepts the same selectors that apply in CSS. It also provides its own.
Traversing
Filters for traversing the DOM and selecting elements.
Attributes
A list of methods that get and set DOM attributes of elements
Events
These methods are used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.
Ajax requests
$.ajax({
  method: "GET",
  url: "website.com/index.html",
  data: null,
  success: function(){console.log('SUCCESS!')},
  failure: function(){console.log('FAILURE!')}
});
Image

Other options

Vanilla JavaScript
Refers to using plain JavaScript without any additional libraries. Usually this means the code you write will be A LOT more lightweight and faster to load than the entire jQuery library. For example, AJAX requests can be written using XMLHttpRequest. See "You might not need jQuery" for vanilla JS alternatives to common jQuery functions.

30 challenge Vanilla JS Coding Challenge - for learning some really cool browser manipulation techniques without needing any libraries or compilers.
CSS
Some of the more popular alternatives to Bootstrap include Materialize and Semantic UI

SASS/SCSS - a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands. There are client-side alternatives to SASS that can be compiled in the browser using javascript such as LESS CSS, though it is advisable to compile to CSS for production use.

CSS Grid Layout - Alternative to Bootstrap grid. CSS Grid layout divides a page into major regions by defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.