Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

#1 03-10-2016 17:13:45

lgt
Member
Registered: 11-21-2010
Posts: 272
Website

Responsive Design

Thought this was interesting.  Notice the banner for the full desktop mode.

Minimizing the browser (to simulate a tablet or phone) will consolidate the menu & change the banner to the mid-size version.

Shrinking it further will display a third, different banner & the Specials Banner below the navbar will be displayed at the bottom.  In addition, the top header information to the far right will disappear totally.

So, responsive design can change the layout for best results automatically.   COOL!


https://855sheller.com/V9/Desktop.jpg

***** NEW BANNER ********

https://855sheller.com/V9/Tablet.jpg

***** NEW BANNER *********

https://855sheller.com/V9/Phone.jpg









Offline

 

#2 03-11-2016 06:58:49

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19715
Website

Re: Responsive Design

Thanks for pointing this out, especially with images.  You've brought light to something that I considered critical in the responsive design used in V9 - moving elements around to suit the browser, trying to get as much content above the fold on each device as possible.

This is accomplished with the *flex* elements in the skin.  If you look at the source on your pages, you will see that all your main page content is right after the <body> tag, all the top menus are actually printed right above the footer in the source.  We use flexing a lot throughout the skin to give the most bang for your buck when responding, as well as when being crawled by SEs.


Nick Hendler

Offline

 

#3 04-05-2016 09:45:21

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Responsive Design

Is it possible to use responsive columns within tab content? And if so, what would an example be to have 3 columns?

Offline

 

#4 04-06-2016 06:37:36

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19715
Website

Re: Responsive Design

Sure.  You can use them anywhere.  The Flex skin uses the grid for layout, but internally the system uses the grid all over the place.  Doing a three column grid that collapses to one column when you reduce browser width to 600px would be designed as:

Code:

<div class="kgridsep kgrid3">
<div class="kgridbox">Box 1 Content</div>
<div class="kgridbox">Box 2 Content</div>
<div class="kgridbox">Box 3 Content</div>
</div>

The 'kgridsep' class puts a 1em separation between the grid boxes.  Use 'kgridcol' to eliminate the separation (collapse it).  Further, if you wanted this to go to two columns in tablet view (600px-900px), you could wrap the grid with a div classed as 'kgridmidhalf':

Code:

<div class="kgridmidhalf"><div class="kgridsep kgrid3">
<div class="kgridbox">Box 1 Content</div>
<div class="kgridbox">Box 2 Content</div>
<div class="kgridbox">Box 3 Content</div>
</div></div>

Going further, making those boxes shaded and padded:

Code:

<div class="kgridmidhalf"><div class="kgridsep kgrid3">
<div class="kgridbox kpadded kfilled">Box 1 Content</div>
<div class="kgridbox kpadded kfilled">Box 2 Content</div>
<div class="kgridbox kpadded kfilled">Box 3 Content</div>
</div></div>

There is some CSS and grid documentation coming with the release which is way more detailed than anything we've provided previously.  All this kind of stuff is outlined in developer docs, which are being worked on right now (release is pending while this happens).


Nick Hendler

Offline

 

#5 04-06-2016 07:22:26

timberguy
Member
Registered: 01-14-2008
Posts: 142

Re: Responsive Design

Awesome!

Offline

 

Board footer