How to make responsive visualforce pages without using design frameworks

Clearly, crafting sites for optimal viewing and interaction experience is must. In salesforce (not lightning) I see there is big need fo...

Clearly, crafting sites for optimal viewing and interaction experience is must. In salesforce (not lightning) I see there is big need for responsive pages. Quite often people use material design and bootstrap to achieve powerful UX/UI, but I do come across scenarios where people still want Salesforce layout on top of page and still want content to be quite responsive.



What is the problem in keeping header and sidebar active?


Leaving header and sidebar is old fashioned, yet you still need to meet many business case. Adding design framework makes it fairly easy to add responsiveness but other stylesheet override classes and you mess up side bar and header fairly easily.



Responsive Style Sheet 

Lets write our own css to add responsiveness and then design the style for our custom grid-pattern
In here, I added a wrapper class with row and defined coloumn of 10px to segregate the columns in the grid layout. Also I imported, material Roboto Font for my grid-content.


Media Support 


Now you notice here that

@media all and ( min-width: 300px)
This is the minimum width are placing for our media device width size, in other words if you device width is lower, you may break responsive behavior.

Defining Grid 


Grid is how you want to partition the page, very similar to material design and bootstrap and I simply breaking down page into 12 grid layout and defining styles to each grid layout


Resulting responsiveness (shown in codepen)

Now lets combine and style in a page see how it reflects in codepen, just shrink this codepen or blog page to see content in action

See the Pen Responsive Grid in HTML by Harshit Pandey (@oyecode) on CodePen.

Responsive Visualforce Template

Lets finish it up and responsiveness to Visualforce Page.


Download the code from here

Caveat with Sidebar/Header

Remember Salesforce standard-layout had @media responsive block size of width-600px. Once you squeeze your screen below 600px with sidebar/header on, you content will be in potential risk to break responsiveness.


What Others Are Reading