the murmurous sea

for Embedding custom non-visible data with the data-* attributes - Any attribute that starts with data- will be treated as a storage area for private data. Additionally, this won't affect the layout or presentation. - A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no A..

- A grid-based layout system, with rows and columns. Like tables, grid layout enables an author to align elements into columns and rows. - CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. - Many more layouts are either possible or easier with CSS grid than they w..

1. Absolute positioning and margin auto - An element with no intrinsic size: equal values from the top and bottom. - An element has intrinsic dimensions: 0 for top and bottom, then apply margin auto. - The limitation: the element height must be explicitly declared, or it will occupy the entire container. .container{ position:relative; } .element{ position:absolute; top: 0; bottom: 0; left: 0; ri..

1. Non-semantic elements : and - Tells nothing about its content. - are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributes class and id. - element is in-line and usually used for a small chunk of HTML inside a line. - (division) element is block-line and used to group larger chunks of code. 2. Semantic elements : Clearly defines it..

- CSS has several different units for expressing a length. - A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted. - For some CSS properties, negative lengths are allowed. There are two types of length units: absolute and relative. 1. Absolute Lengths Absolute length units are not recommended for use on screen, because screen sizes vary ..

In this example below you will see how to do a poptrox with some HTML / CSS and Javascript Configurable and responsive jQuery lightbox plugin with different content types. from https://www.codeseek.co/devmount/poptrox-wBqgPd

1. from: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ OCTOBER 17, 2012 - # In Windows 8, there are two “modes” of use: Metro mode and classic mode. Metro mode sports the spiffy new UI while classic is the same old boring Windows of yore. # When you run Internet Explorer 10 in Metro mode (the default) there’s a cool new feature that lets you “snap” a window to the side so y..

justify-content : aligns flex items along the main axis. : flex-start(default) | flex-end | center | space-between | space-around align-items : aligns flex items along the cross axis. : flex-start | flex-end | center | baseline | stretch(default) align-self : aligns a flex item along a cross axis, overriding the align-items value. : flex-start | flex-end | center | baseline | stretch align-conte..

1. both Font size units. Flexible, scalable units which are translated by the browser into pixel values, Both rem and em are relative units, px is not. 2. em : em inherits and scales relative to the font size of the element on which they are used. : Assumes the parent is 1em(100%). Children inherit size by scaling in relation to the parent size. : The name em was originally a reference to the wi..

CSS syntax: text-align: left|right|center|justify|initial|inherit; justify-content: normal | | ? [ | left | right ] where = space-between | space-around | space-evenly | stretch = unsafe | safe = center | start | end | flex-start | flex-end //The justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the in..