Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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


```