Bootstrap & Less – compile online

If you’re using Bootstrap for projects, including but not exclusive to WordPress, you may come across issues such as pages not responding correctly on devices such as iPad mini.

In my instance I couldn’t get the navbar to collapse correctly in either landscape or portrait mode.   Nothing I tried worked for my “twentyseventeen” based themed project, despite the fact that all other settings I worked with did obey my directives.

I found the solution was to modify the bootstrap file using LESS to apply settings such as “@grid-float-breakpoint”.

Rather than going into a lot of depth regarding LESS and compiling a compiler to set it up, I went to the Bootstrap official website and used their online compiler which generates the customised version of bootstrap.css & bootstrap.min.css

From here you can apply your modificatios and allow it to generate the new file which you download and transfer to your website.

https://getbootstrap.com/docs/3.3/customize/

What is the order of priority for my stylesheet elements

The specificity or order of css rules is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.  We are starting from the lowest ranking to the highest.

CSS universal selectors select any type of elements in an HTML page. It matches a single element. An asterisk (*) is used to denote a CSS universal selector and is used to style all the elements of an HTML page. An asterisk can also be followed by an selector when you are wanting to set a style for all of the elements within an element of an HTML page.

At its most basic, the Universal Selector looks like this: 
* {
  margin: 0;
  padding: 0;

This code sets the padding and margins on all elements to zero.

Universal selector with another selector: 
body * {
  margin: 0;
  padding: 0;

This code sets the padding and margins of all elements within body to zero.

Type selectors will select any HTML element on a page that matches the selector:

Example: 
em{
  color: purple;

This rule will select any <em> element on the page and color it blue.

 

For example, it can be used to:

A pseudo-class is used to define a special state of an element.

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently

/* unvisited link */
a:link {
    color: blue;
}

Example of ID selector in HTML code:
<span id="important">Here's a span with some text.</span>
<span>Here's another.</span>

Class selectors are used to select any HTML element that has a id attribute matching the the id selector.

If you want to target a specific section of text in your document you would place it within in the inline element<span> and add an ID so it can be styled in your CSS.

The CSS example could be:
{
#important {
  font-size: 110%;
  font-weight: bold;
  font-color:Red
}

Example of inline style applied to the paragraph: 
<p style=”text-align: center;”>
    <span>target</span>
</p>

Inline style are styles applied directly into the HTML code by adding the style attribute along with any CSS properties.

!important

When an !important rule is used on a style declaration, it overrides any other declaration made in the CSS including inline styles from the mark up. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.

How to ensure my CSS styles are not inheriting

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, etc.

The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example.  This is a wonderful starting point for any project.

By declaring these items first, you have full control from the ground up, no surprises.

/* https://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}