Author: majadc
-
The grid system – float and clearfix.
Grid Layout consists of 12 columns based on floats.
-
Gradient Text
Snippet for gradient text.
-
Using vw for font size
Setting font size in vw units using the cacl() function.
-
Centering vertically
Centering vertically text using line-height See the Pen Vertical centring – text -line-height by majadc (@majadc) on CodePen. Centering vertically image using span element See the Pen Centering vertically using span by majadc (@majadc) on CodePen. Centering vertically image using flex box. See the Pen Centering vertically – flexbox by majadc (@majadc) on CodePen. Centering […]
-
align-self
The align-self property controls how an item is aligned on the cross axis within a flex container. This property will override the align-items property value set on the parent container. However, if the item has an auto margin set on the cross axis, the align-self property will be ignored. See the Pen Untitled by majadc […]
-
order
Example 1 .flex-item-3 { order: -1 } Example 2 .flex-item-1 {order: 3;} .flex-item-2 {order: 4;} .flex-item-3 {order: 2;} .flex-item-4 {order: 1;}
-
meta
The <meta> HTML element is a metadata content element that contain information about presentation and behavior the page. This element is used inside <head> HTML element. The <meta> HTML element represents information that can not be represented by other metadata content elements like: <base>, <link>, <script>, <style>, <title>. One of the following attributes must be […]
-
HTML Content Models
HTML document is represented with a Document object (DOM) and it has his own address called URL. HTML document consists of a series of HTML elements. The HTML elements have theirs own content model: a description of the element’s expected contents. The contents of an element are its children in DOM. That means that every […]
-
font-size 62.5%
Setting font-size in a root element to 62.5%.
-
CSS Flexible Box Layout
CSS flexbox is a layout model in CSS that allows to arrange and align items within a container. The layout can adapt to different screen sizes and devices. The model works by defining a container element and one or more child elements that will be arranged within that container. Then it can be specified how […]