Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BMSVieira/EasyGrid
EasyGrid - VanillaJS Responsive Grid
https://github.com/BMSVieira/EasyGrid
css dependency-free easygrid filter filtering frontend grid html javascript javascript-library layout library masonry-layout pure-javascript responsive responsive-design vanillajs
Last synced: about 2 months ago
JSON representation
EasyGrid - VanillaJS Responsive Grid
- Host: GitHub
- URL: https://github.com/BMSVieira/EasyGrid
- Owner: BMSVieira
- License: mit
- Created: 2020-12-04T01:00:32.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2020-12-15T15:21:41.000Z (almost 4 years ago)
- Last Synced: 2024-10-16T13:11:05.846Z (about 2 months ago)
- Topics: css, dependency-free, easygrid, filter, filtering, frontend, grid, html, javascript, javascript-library, layout, library, masonry-layout, pure-javascript, responsive, responsive-design, vanillajs
- Language: HTML
- Homepage:
- Size: 1.03 MB
- Stars: 93
- Watchers: 5
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - BMSVieira/EasyGrid - EasyGrid - VanillaJS Responsive Grid (library)
README
Features ▪️ Demo ▪️ Installation ▪️ Methods ▪️ Settings
◼️ Features:
-
- 🔧 Fully Customizable
- 💪 No Dependencies, built with VanillaJS
- 🌎 Tested in All Modern Browsers
- 💻 Responsive
- 🗂 Filtering
- 📈 Fast & Reliable
- 📚 Does not need CSS or any CSS Framework
◼️ Demo:
-
https://bmsvieira.github.io/EasyGrid/
◼️ Installation:
-
1 - Include JavaScript Source.
```javascript
```
2 - Include Styles.
```javascript
```
4 - Set HTML.
```javascript
```
3 - Initilize.
```javascript
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new EasyGrid({
selector: "#grid",
dimensions: {
width: "150",
height: "270",
margin: "5",
minHeight: "20", // if height is "random"
maxHeight: "40" // if height is "random"
},
animations: {
fadeInSpeed: "100",
addItemSpeed: "100"
},
style: {
background: "transparent",
borderRadius: "5"
}
});
// Add items to Grid
demo1.AddItem({
items: "HTML Element"
});
});
```
◼️ Methods:
-
Refresh:
Refresh Grid Positioning
```javascript
demo1.Refresh();
```
AddItem:
Add a new item to grid
If `filter` is enabled, it will automatically add to all classes that match the existing filters, otherwise, all filters starting with `egfilter_` will be added and available for use.
| Value | Description |
| --- | --- |
| `String` | Add a new item |
| `Array` / `Object` | Add multiple items at once |
```javascript
// Single
var Elements = "HTML Element";
// Array
var Elements = ["HTML Element 1", "HTML Element 2", "HTML Element 3", "HTML Element 4"];
// Filter
// In this example, it will add a new item to existing "egfilter_red" filter and a new filter called "egfilter_orange" ready to be used.
var Elements = '
';
demo1.AddItem({
items: Elements,
onComplete: function(){
console.log("Completed!");
}
});
```
Change:
Applies changes to current Grid
```javascript
demo1.Change({
dimensions: {
width: "150",
height: "random",
margin: "15",
minHeight: "100", // if height is "random"
maxHeight: "300" // if height is "random"
},
style: {
background: "random",
borderRadius: "5"
}
});
```
Clear:
Removes all items and all columns
```javascript
demo1.Clear();
```
SetupEasyGrid:
Add responsive columns.
After use of `SetupEasyGrid()` it can be added new items again.
```javascript
demo1.SetupEasyGrid();
```
Filter:
Filter all elements that match specific class.
```javascript
demo1.Filter();
```
◼️ Settings:
-
| Option | Type | Options Available | Description |
| --- | --- | --- | --- |
| `selector` | `String` | `---` | Specify ID of the element|
| `dimensions` > `width` | `Integer` | `Integer` | Width (px) of the elements|
| `dimensions` > `height` | `Integer` | `random` or `Integer` | Height (px) of the elements|
| `dimensions` > `margin` | `Integer` | `Integer` | Margin (px) between elements|
| `dimensions` > `minHeight` | `Integer` | `Integer` | Min. Height (px) of the elements if height is `random`|
| `dimensions` > `maxHeight` | `Integer` | `Integer` | Max. Height (px) of the elements if height is `random`|
| `config` > `fetchFromHTML` | `Boolean` | --- | Fetch elements inside main div to EasyGrid|
| `config` > `filter` | `Boolean` | --- | Enables filter, fetchFromHTML is automatically enabled when using filters|
| `animations` > `fadeInSpeed` | `Integer` | `Integer` | Speed(ms) that the item takes to appear completely after being added|
| `animations` > `addItemSpeed` | `Integer` | `Integer` | Speed(ms) at which each item is added|
| `style` > `background` | `String` | `random`, `shadesOfGrey`, `HEX`, `RGBA` | Item's Background color|
| `style` > `borderRadius` | `Integer` | `Integer` | Item's Border Radius|
| `responsive` > `breakpoint` | `Integer` | `Integer` | Responsive breakpoint, interrupts natural flow of EasyGrid and adds desired columns|
| `responsive` > `columns` | `Integer` | `Integer` | Number of columns after breakpoint|
Full Example:
```javascript
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new EasyGrid({
selector: "#grid",
dimensions: {
width: "150",
height: "270",
margin: "5",
minHeight: "20", // if height is "random"
maxHeight: "40" // if height is "random"
},
config: {
fetchFromHTML: true, // FetchFromHTML is automatically Enabled when using filters
filter: true
},
animations: {
fadeInSpeed: "100",
addItemSpeed: "100"
},
style: {
background: "random",
borderRadius: "5"
},
responsive: [
{
breakpoint: 500,
columns: 2
},
{
breakpoint: 300,
columns: 1
}
]
});
});
```
FetchFromHTML Example:
To fetch elements from html, it has to be placed inside main div with a specific class called: `easygrid_fetch`
```html
```
Filters Example:
All classes that will serve as a filter, must begin with `egfilter_`
Whenever you want to show all items use `egfilter_all`, it is created automatically and contains all elements, does not need to be specified in each item.
```html
HTML CODE HERE
HTML CODE HERE
HTML CODE HERE
HTML CODE HERE
HTML CODE HERE
HTML CODE HERE
HTML CODE HERE
HTML CODE HERE
HTML CODE HERE
HTML CODE HERE
```