PHP Classes

File: engine/modules/core/grid/css/grid_all.css

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/core/grid/css/grid_all.css   Download  
File: engine/modules/core/grid/css/grid_all.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 5 years ago
Size: 3,821 bytes
 

Contents

Class file image Download
/* GRID: common elements (grid + flexbox fallback) */ /* VARIABLES */ :root { --gap-size: 15px; --size-1-col: calc(100% / 12); --size-2-col: calc(100% / 12 * 2); --size-3-col: calc(100% / 12 * 3); --size-4-col: calc(100% / 12 * 4); --size-5-col: calc(100% / 12 * 5); --size-6-col: calc(100% / 12 * 6); --size-7-col: calc(100% / 12 * 7); --size-8-col: calc(100% / 12 * 8); --size-9-col: calc(100% / 12 * 9); --size-10-col: calc(100% / 12 * 10); --size-11-col: calc(100% / 12 * 11); --size-12-col: 100%; } /* MAIN PAGE structure: header + #grid-main(max-height) + footer ( + others...) */ body.grid { min-height: 100%; display: flex; flex-wrap: nowrap; flex-direction: column; align-items: stretch; justify-content: initial; } body.grid > * { flex-shrink: 0; } #grid-main { flex-grow: 1; } /* GRID */ ul.grid { margin: 0; padding: 0; } .grid > img { width: 100%; } .grid > *.p-0, .grid-container > .grid.p-0 { padding: 0; } .grid > *.p-x { padding-left: var(--gap-size); padding-right: var(--gap-size); } .grid > *.p-x2 { padding-left: calc(var(--gap-size) * 2); padding-right: calc(var(--gap-size) * 2); } .grid > *.p-x3 { padding-left: calc(var(--gap-size) * 3); padding-right: calc(var(--gap-size) * 3); } .grid > *.p-y { padding-top: var(--gap-size); padding-bottom: var(--gap-size); } .grid > *.p-y2 { padding-top: calc(var(--gap-size) * 2); padding-bottom: calc(var(--gap-size) * 2); } .grid > *.p-y3 { padding-top: calc(var(--gap-size) * 3); padding-bottom: calc(var(--gap-size) * 3); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .align-items-start { align-items: start; } .align-items-center { align-items: center; } .align-items-end { align-items: end; } .align-self-start { align-self: start; } .align-self-center { align-self: center; } .align-self-end { align-self: end; } /* RESPONSIVE */ /* MOBILE FIRST */ .order--1 { order: 0; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-9 { order: 9; } .order-10 { order: 10; } /* md: Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .text-md-left { text-align: left; } .text-md-center { text-align: center; } .text-md-right { text-align: right; } .order-md--1 { order: 0; } .order-md-0 { order: 0; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } .order-md-3 { order: 3; } .order-md-4 { order: 4; } .order-md-5 { order: 5; } .order-md-6 { order: 6; } .order-md-7 { order: 7; } .order-md-8 { order: 8; } .order-md-9 { order: 9; } .order-md-10 { order: 10; } } /* lg: Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .text-lg-left { text-align: left; } .text-lg-center { text-align: center; } .text-lg-right { text-align: right; } .order-lg--1 { order: 0; } .order-lg-0 { order: 0; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .order-lg-4 { order: 4; } .order-lg-5 { order: 5; } .order-lg-6 { order: 6; } .order-lg-7 { order: 7; } .order-lg-8 { order: 8; } .order-lg-9 { order: 9; } .order-lg-10 { order: 10; } } /* xl: Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { } /* xxl: XXL devices (very large desktops, 1440px and up) */ @media (min-width: 1440px) { }