gridlex

WebJar for gridlex

License	MIT
Categories	Github Development Tools Version Controls
GroupId	org.webjars.npm
ArtifactId	github-com-devlint-gridlex
Last Version	2.7.1
Release Date	Jul 1, 2020
Type	jar
Description	gridlex WebJar for gridlex
Project URL	https://www.webjars.org
Source Code Management	https://github.com/devlint/gridlex

Download github-com-devlint-gridlex

Filename	Size
github-com-devlint-gridlex-2.7.1.pom
github-com-devlint-gridlex-2.7.1.jar	152 KB
github-com-devlint-gridlex-2.7.1-sources.jar	22 bytes
github-com-devlint-gridlex-2.7.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-devlint-gridlex/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-devlint-gridlex</artifactId>
    <version>2.7.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-devlint-gridlex/
implementation 'org.webjars.npm:github-com-devlint-gridlex:2.7.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-devlint-gridlex/
implementation ("org.webjars.npm:github-com-devlint-gridlex:2.7.1")

Apache Buildr

'org.webjars.npm:github-com-devlint-gridlex:jar:2.7.1'

Apache Ivy

<dependency org="org.webjars.npm" name="github-com-devlint-gridlex" rev="2.7.1">
  <artifact name="github-com-devlint-gridlex" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='github-com-devlint-gridlex', version='2.7.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "github-com-devlint-gridlex" % "2.7.1"

Leiningen

[org.webjars.npm/github-com-devlint-gridlex "2.7.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Gridlex

Just a Flexbox Grid System

v. 2.7.1

Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.

The concept is simple: you need to wrap your .col in a .grid.

What can we expect?

• Basically each column is the same width as every other cell in the grid.
• But you can add sizing classes to individual columns.
• For responsive designs, you can add classes based on media-queries.
• Top, bottom, or middle. For the grid. And for the columns.
• Grids can be nested. Always. Directly in a column.

Sass, CSS?

I just wanna use it in my page!

To use Gridlex out of the box, call the gridlex.min.css file in your project :

Via CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridlex.min.css" integrity="sha256-z8OrWCce0gDjwavCHKqxiPIo74u8go25fRiqW6jefXk=" crossorigin="anonymous">

I want to include it in my source files!

Just include gridlex/src/gridlex.scss and update the $gl- vars:

Variable names	Default value
$gl-colCount:	12
$gl-gridName:	grid
$gl-colName:	col
$gl-attributeName:	class
$gl-gutter:	1rem
$gl-gutter-vertical:	1rem
$gl-mq-width:	'max-width'
$gl-mq-list:	( lg: 80em, // max 1280px md: 64em, // max 1024px sm: 48em, // max 768px xs: 36em // up to 576px )

Install via Npm

npm install gridlex --save

Install via Bower

bower install gridlex --save

3 ways to use Gridlex

1- The basic. Just add a class .grid-* (from -1 to -12)

<div class="grid-1">
	<div class="col">...</div>
</div>

2- The precise. Compose cell by cell (with class like .col-*)

<div class="grid">
	<div class="col-12">...</div>
</div>

3- The automatic. Just add number of cells you want in the grid (.grid > .col)

<div class="grid">
		<div class="col">...</div>
		<div class="col">...</div>
</div>

Gridlex and media-queries

Because of responsive, you sometimes need to change the size of columns: with this keys as classes you can control your layout by media-queries.

Columns can be hidden at breakpoints using _*-0 (e.g. col-4_md-6_sm-0)

CSS Media Query	Applies	Usage
@media screen and (max-width: 36rem)	Max 576px	_xs-*
@media screen and (max-width: 48em)	Max 768px	_sm-*
@media screen and (max-width: 64em)	Max 1024px	_md-*
@media screen and (max-width: 80em)	Max 1280px	_lg-*

See more : http://gridlex.devlint.fr

Versions

Version
2.7.1 Jul 1, 2020