JarCasting
JarCasting JarCasting

griddle

WebJar for griddle

License

License

MIT
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

griddle
Last Version

Last Version

0.3.0
Release Date

Release Date
Type

Type

jar
Description

Description

griddle
WebJar for griddle
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/necolas/griddle

Download griddle

Filename Size
griddle-0.3.0.pom
griddle-0.3.0.jar 7 KB
griddle-0.3.0-sources.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/griddle/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>griddle</artifactId>
    <version>0.3.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/griddle/
implementation 'org.webjars.bower:griddle:0.3.0'
// https://jarcasting.com/artifacts/org.webjars.bower/griddle/
implementation ("org.webjars.bower:griddle:0.3.0")
'org.webjars.bower:griddle:jar:0.3.0'
<dependency org="org.webjars.bower" name="griddle" rev="0.3.0">
  <artifact name="griddle" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='griddle', version='0.3.0')
)
libraryDependencies += "org.webjars.bower" % "griddle" % "0.3.0"
[org.webjars.bower/griddle "0.3.0"]

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.

Griddle

unmaintained

Griddle is a CSS grid system for modern browsers. It is generated from a set of Sass functions and mixins. The grid uses inline-block and box-sizing to provide features that float-based layouts cannot.

Project page

Contribution guidelines

Installation

  • Download: zip
  • Bower: bower install --save griddle
  • Git: git clone https://github.com/necolas/griddle.git

Features

  • Fluid layout.
  • Intelligent cell wrapping.
  • Horizontal centering of cells.
  • Custom vertical alignment of cells (top, bottom, or middle).
  • Cell width is controlled independently of grid gutter.
  • Infinite nesting.
  • Built-in redundancy coupled with automatic consolidation of rules in compiled CSS.
  • Modify the grid at different breakpoints for responsive layouts.
  • RTL support.

How to use it

The grid system is suitable whether or not you choose to develop "mobile first". Import griddle to "initialize" the grid at a given breakpoint.

The griddle-build() mixin handles the generation of styles for grids. It can accept a space-separated list of integers, each of which results in the creation of a grid with that many parts. For example:

@import "griddle";
// Create 2, 3, and 4 column grids
@include griddle-build(2 3 4);

The mixin also accepts a string as a second (optional) argument. This can be used to generate modified selectors to override the width of a cell at different breakpoints. For example:

@media (min-width: 40em) {
    // Create 2, 3, 4, 5, 6, and 12 column grids (wider screens)
    @include griddle-build(2 3 4 5 6 12, '--desktop');
}

Each grid cell is created in the same way, using HTML classes. You can have a cell that is 50% wide at narrow viewports, but 25% wide at wider viewports when the styles are applied to the modifier class:

<div class="grid__cell unit-1-2 unit-1-4--desktop">
    ...
</div>

Feel free to customize the default class name pattern to suit your personal preferences.

Browser support

  • Google Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 8+

License

MIT License

Versions

Version
0.3.0