Download the PHP package wbrowar/craft-little-layout without Composer
On this page you can find all versions of the php package wbrowar/craft-little-layout. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download wbrowar/craft-little-layout
More information about wbrowar/craft-little-layout
Files in wbrowar/craft-little-layout
Package craft-little-layout
Short Description A compact, visual way to lay out fields, elements, and Matrix blocks.
License proprietary
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package craft-little-layout
Little Layout for Craft CMS 4
A compact, visual way to lay out fields, elements, and Matrix blocks.
Requirements
This plugin requires Craft CMS 4.0 or later.
Installation
To install the plugin, follow these instructions.
-
Open your terminal and go to your Craft project:
-
Then tell Composer to load the plugin:
-
In the Control Panel, go to Settings → Plugins and click the “Install” button for Little Layout.
- Create and configure new Little Layout fields for your elements.
Little Layout Overview
Little Layout is a compact field that makes it easy for content authors to adjust the layout of their content or UI and other design elements. It gives developers values that make it easy to move content around CSS grid layouts or around a set of coordinates. Little Layout fields are accessible and mobile-friendly.
Configuring Little Layout
When setting up a new Little Layout field, you will need to define how many columns and rows are available in your field. A preview of your field will appear and will get updated as you adjust your settings.
After your columns and rows are set, you can set a default value in your field preview. It works just like the field does during the author experience:
- Click on a box to select it
- Click on another box to draw a rectangle between the two selected points, selecting all points within the rectangle
- Once a value is added, click on the "x" icon to the right to clear the field
Use the Empty Layout setting to determine if authors can clear out the layouts they have set. NOTE: setting your field to required also removes the author’s ability to clear field layouts, regardless of this setting.
Using Little Layout
The following data can be retrieved in your Twig- or GraphQL-based templates:
| Property | Description |
|---|---|
| empty | Determine if field has a value. |
| gridColumnStart | Value for CSS Grid’s grid-column-start and grid-column properties. |
| gridColumnEnd | Value for CSS Grid’s grid-column-end and grid-column properties. |
| gridRowStart | Value for CSS Grid’s grid-row-start and grid-row properties. |
| gridRowEnd | Value for CSS Grid’s grid-row-end and grid-row properties. |
| gridColumnSpan | Value for CSS Grid’s grid-column property. |
| gridRowSpan | Value for CSS Grid’s grid-row property. |
| selectedColumns | Array of columns selected in the layout field. |
| selectedRows | Array of rows selected in the layout field. |
| selectedCoordinates | Array of coordinates* selected in the layout field. |
| totalColumns | The columns setting for this field. |
| totalRows | The rows setting for this field. |
*Coordinates are formatted in 'x|y' format.
Accessing Little Layout Values in Twig
Use element.fieldHandle.empty like this to check to see if a Little Layout field has a value:
Using Twig to Lay Out Elements in a CSS Grid
To lay out an element in a CSS grid layout you could do something like this to specify exact grid columns and rows:
Or you could use the shorthand grid-column and grid-row properties and provide starting and span values.
Even better, consider using CSS Custom Properties:
With CSS that looks like this:
If you use a CSS framework, like Tailwind CSS, you could do something like this:
If your Twig template files are included in your Tailwind confguration’s content patterns, you may prefer to preserve full class names using logic and a lookup table:
Get CSS Grid values in GraphQL
The same values can be retrieved in GraphQl, like this:
Example: Simple Text Align Field
You can also use the values selected in a Little Layout field for other purposes. For example, you use a Little Layout field as a visual way to select between text left, center, and right alignment.
To set this up, you could do something like this:
- Set up a new field with
3columns and1row. - Set Empty Layout to
Layouts cannot be reset(or set this field torequiredin the field layout designer). - Select the single box that you would like to use as a default.
- Save your field and add it to your elements.
Then on the front-end, (assuming LTR reading order in this case), you can do something like this (NOTE: this example uses Twig and Tailwind, but the logic is the same in other setups):
In this case element.fieldHandle.selectedColumns gives us an array with the numbers 1, 2, or 3 as the value.
Releases
Release notes can be found at CHANGELOG.md
Supported Versions
Here is a general goal for adding and supporting features for Little Layout going forward:
- New features for the plugin will be added to the current major plugin version that targets the current released version of Craft CMS.
- The latest major plugin version that targets the previous released major version of Craft CMS will be supported with bug fixes intruduced in updates to that version of Craft CMS.
- Previous major plugin versions will only get security-related updates—when necessary.
Brought to you by Will Browar
