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 :
First Half
Second Half
ForceGrid with Visualforce
Simply import css in your project or use this cdn or import from Github Project
Source Code
To learn more go to ForceGrid Homepage or use Github repository to fork code.
0 comments:
Post a Comment