9

GitHub - BMSVieira/EasyGrid: EasyGrid - VanillaJS Responsive Grid

 3 years ago
source link: https://github.com/BMSVieira/EasyGrid
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

easy_small.png

Features black_small_squareDemo black_small_squareInstallation black_small_squareMethods black_small_squareSettings

black_medium_square Features:

  • wrench Fully Customizable
  • muscle No Dependencies, built with VanillaJS
  • earth_americas Tested in All Modern Browsers
  • computer Responsive
  • card_index_dividers Filtering
  • chart_with_upwards_trend Fast & Reliable
  • books Does not need CSS or any CSS Framework

black_medium_square Demo:

https://bmsvieira.github.io/EasyGrid/

black_medium_square Installation:

1 - Include JavaScript Source.

<script src="path/to/easygrid.js"></script>

2 - Include Styles.

<link rel="stylesheet" href="path/to/easygrid.css">

4 - Set HTML.

 <div id="grid" style="width:100%;"></div>

3 - Initilize.

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"
     });
});

black_medium_square Methods:

Refresh: Refresh Grid Positioning

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 
// 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 = '<div class="egfilter_red egfilter_orange"><img style="width:100%;" src="demo-template/images/orange.png"></div>';

demo1.AddItem({
   items: Elements,
   onComplete: function(){
     console.log("Completed!");
   } 
});

Change: Applies changes to current Grid

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

demo1.Clear();

SetupEasyGrid: Add responsive columns. After use of SetupEasyGrid() it can be added new items again.

demo1.SetupEasyGrid();

Filter: Filter all elements that match specific class.

demo1.Filter();

black_medium_square 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:

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

<!--  Main Div -->
<div id="grid" class="easygrid_bvgrid">

    <!-- This item will be fetched to EasyGrid and then removed -->
    <div class="easygrid_fetch" style="display:none;">
        <!-- HTML Elements -->
    </div>
    <!-- This item will be fetched to EasyGrid and then removed -->
    <div class="easygrid_fetch" style="display:none;">
        <!-- HTML Elements -->
    </div>
 
</div>

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.

<!--  Main Div -->
<div id="grid" class="easygrid_bvgrid"> 

     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_blue egfilter_red egfilter_purple"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_blue egfilter_red"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_blue"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_green egfilter_blue"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_green egfilter_blue"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_green"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_purple"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_red"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_red"> HTML CODE HERE </div>
     <!-- This item will be fetched to EasyGrid and then removed -->
     <div class="easygrid_fetch egfilter_red"> HTML CODE HERE </div>

</div>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK