ForceGrid is a responsive CSS grid micro framework. It is tiny, have no dependencies,it comes with fluid columns with fixed gutters, supports infinite nesting, and doesn't constrain you to any column sets or media query breakpoints. It embraces concepts of progressive enhancement and mobile first, serving one-column mobile layout to older browsers (IE 6-7-8-9-10 and new Microsoft Edge IE-11).
Most of the clients have not moved to Salesforce Lighting UX, so in classic model quite often you have to keep header and sidebar of Salesforce open. Adding Twitter Bootstrap/Material Design fancy framework over-ride css and mess up standard Salesforce look-feel.
Why you need this for Salesforce Projects ?
Most of the clients have not moved to Salesforce Lighting UX, so in classic model quite often you have to keep header and sidebar of Salesforce open. Adding Twitter Bootstrap/Material Design fancy framework over-ride css and mess up standard Salesforce look-feel.
So I wrote a very lightweight and simple grid system which make sure that your content is responsive. I started with writing a basic css as shown here in my last post explaining how to write a responsive grid. Then later formulated into library called ForceGrid.
How to use ForceGrid ?
Define your layout by assigning dimension like 2-by-2 or 3-by-3 for dividing the page into simple two equal or three equal halves respective and wrap responsive content in wrapper div, and ForceGrid takes care of the rest.
Dividing Page in Two Equal Halves :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrap"> | |
| <!-- Dividing Page in two halves --> | |
| <div class="sfgrid sfgrid__col sfgrid__col--2-by-2"> | |
| <div class='sfgrid__col sfgrid__col--1-by-2' style="background-color: cadetblue;"> | |
| First Half Content | |
| </div> | |
| <div class='sfgrid__col sfgrid__col--1-by-2 ' style="background-color: indianred;"> | |
| Second Half Content | |
| </div> | |
| </div> | |
| </div> |
First Half
Second Half
ForceGrid with Visualforce
Simply import css in your project or use this cdn or import from Github Project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page standardStylesheets="false" showHeader="false" sidebar="false" applyHtmlTag="true" docType="html-5.0"> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <link rel="stylesheet" href="https://cdn.rawgit.com/mailtoharshit/ForceGrid/master/source/forcegrid.css" /> | |
| <link href='https://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css' /> | |
| <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" /> --> | |
| </head> | |
| <body onload='DML(10);'> | |
| <div class="wrap"> | |
| <div class="sfgrid sfgrid__col sfgrid__col--2-by-2" > | |
| <div class='sfgrid__col sfgrid__col--1-by-2' style="background-color: cadetblue;"> | |
| <h2 style="font-family : verdana; text-align: center;">Account Records</h2> | |
| <div id="accountList" style="font-family : verdana; text-align: center;"></div> | |
| </div> | |
| <div class='sfgrid__col sfgrid__col--1-by-2 ' style="background-color: indianred;"> | |
| <h2 style="font-family : verdana; text-align: center;">Contact Records</h2> | |
| <div id="contactList" style="font-family : verdana; text-align: center;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <apex:remoteObjects > | |
| <apex:remoteObjectModel name="Account" jsShorthand="acc" fields="Name"/> | |
| </apex:remoteObjects> | |
| <apex:remoteObjects > | |
| <apex:remoteObjectModel name="Contact" jsShorthand="con" fields="FirstName"/> | |
| </apex:remoteObjects> | |
| </html> | |
| <apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"/> | |
| <script type="text/javascript"> | |
| var DML = function(limitRecords){ | |
| new SObjectModel.acc().retrieve({ limit: limitRecords } ,function(err, records){ | |
| if(err) alert(err.message); | |
| else {populate(records,"Name","accountList");}}); | |
| new SObjectModel.con().retrieve({ limit: limitRecords } ,function(err, records){ | |
| if(err) alert(err.message); | |
| else {populate(records,"FirstName","contactList");}}); | |
| //Method to Pouplate Records | |
| function populate(records, type, divId) | |
| { | |
| var ul = document.getElementById(divId); | |
| $(ul).addClass("collection"); | |
| records.forEach(function(record) { | |
| var toAdd = record.get(type); | |
| var rule = document.createElement("br"); | |
| var li = document.createElement("li"); | |
| $(li).addClass("collection-item"); | |
| li.appendChild(document.createTextNode(toAdd)); | |
| ul.appendChild(li); | |
| }); | |
| } | |
| } | |
| </script> | |
| </apex:page> |
Source Code
To learn more go to ForceGrid Homepage or use Github repository to fork code.
0 comments:
Post a Comment