Re: [EXTERNAL] Re: Fluid Grid for Responsive Design [WAS: Re: Express, React, Node.JS]

Hi Henrik,

My point was that one doesn’t need a JavaScript framework at all to
implement a fluid grid layout.

Thanks,

Kelly Cookson
IT Project Leader
Dot Foods, Inc.
217-773-4486 ext. 12676
www.dotfoods.com<http://www.dotfoods.com>

From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Henrik
Rützou
Sent: Thursday, March 01, 2018 11:50 AM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] [EXTERNAL] Re: Fluid Grid for Responsive Design
[WAS: Re: Express, React, Node.JS]

Kelly,

You seems to be looking after cards in a grid, try to look at what these
guy's offers running on any major
javascript framework ...

http://md-pro-angular.creative-tim.com/dashboard<htt
p://md-pro-angular.creative-tim.com/dashboard>



On Thu, Mar 1, 2018 at 6:41 PM, Kelly Cookson <KCookson@xxxxxxxxxxxx
<mailto:KCookson@xxxxxxxxxxxx>> wrote:

Hi Nathan,

Are you talking about the simple fluid grid page?
http://www.kellycookson.info/fluidgrid/<http://www.

kellycookson.info/fluidgrid/>

I mentioned that this was just a fluid grid, and that a responsive design
also required you to deal with things like font sizes, images, and

embedded

videos. Perhaps I should have stressed that more in my previous email.

I have bad eyesight, so I try to make my fonts readable on smartphones

and

tablets. I do change my font sizes for my personal website:
http://www.kellycookson.info/<http://www.kellycookson.info/> The fonts

on this page and the pages in the

navigation drop-down should be easier to read on mobile devices.

I agree that a fluid grid design is not necessary. I'm sure the way you
describe here works, too:
https://rd.radile.com/rdweb/info2/ibmiui10.html<https://

rd.radile.com/rdweb/info2/ibmiui10.html>

I have a question, though. In the CSS code, you set the .w2 class to a
specific width.

* Suppose I want a row where the first column takes up 25 percent
of the page and the second column takes up 75 percent of the page.

* Then, in the next row, I want three columns that each take up 33
percent of the page.

* Then I want another row with two columns, where each column takes
up 50 percent of the page.
One of my web pages actually does this: http://www.kellycookson.info/<

http://www.kellycookson.info/>

service/index.html. Using your system, wouldn't I have to define a number
of CSS classes, not just the single .w2 class set at a specific width?
Right now that seems like the advantage of a fluid grid framework. But

I'm

not very familiar with your approach. Maybe I am missing something.

Thanks,

Kelly Cookson
IT Project Leader
Dot Foods, Inc.
217-773-4486 ext. 12676
www.dotfoods.com<http://www.dotfoods.com><http://www.dotfoods.com<

http://www.dotfoods.com>>

From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Nathan
Andelin
Sent: Thursday, March 01, 2018 10:54 AM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: [EXTERNAL] Re: [WEB400] Fluid Grid for Responsive Design [WAS:
Re: Express, React, Node.JS]

On Thu, Mar 1, 2018 at 8:55 AM, Kelly Cookson <KCookson@xxxxxxxxxxxx

<mailto:KCookson@xxxxxxxxxxxx%0b>> <mailto:KCookson@xxxxxxxxxxxx>> wrote:

I use a responsive 12 column grid for my personal web development and
don't really have problems with it.

I just viewed the link you provided using the iPhone 4 emulator in

Chrome,

then viewed it with my iPhone 6. The text in the boxes are highly
compressed, with varying font sizes, depending on the number of columns
displayed in your grid. People shouldn't need to pull out a magnifying
glass to read tiny text. Your grid system doesn't allow column content to
flow left-to-right, top-to-bottom. Were you aware of these problems?

Your CSS-based grid system is very simple, and may not have the

complexity

that I referred to in my article. But it doesn't do what needs to be

done,

in my opinion.
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx<mailto:WEB400@xxxxxxxxxxxx

<mailto:WEB400@xxxxxxxxxxxx%3cmailto:WEB400@xxxxxxxxxxxx>>

To subscribe, unsubscribe, or change list options,
visit: https://lists.midrange.com/mailman/listinfo/web400<https:

//lists.midrange.com/mailman/listinfo/web400><https:

//lists.midrange.com/mailman/listinfo/web400<http:////lists

.midrange.com/mailman/listinfo/web400>>

or email: WEB400-request@xxxxxxxxxxxx<mailto:WEB400-request@xxxxxxxxxxxx

<mailto:WEB400-request@xxxxxxxxxxxx%3cmailto:WEB400-request@xxxxxxxxxxxx>>

Before posting, please take a moment to review the archives
at https://archive.midrange.com/web400<https://archive.

midrange.com/web400><https://archive.midrange.com/web400<ht
tps://archive.midrange.com/web400>

.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx<mailto:WEB400@xxxxxxxxxxxx>
To subscribe, unsubscribe, or change list options,
visit: https://lists.midrange.com/mailman/listinfo/web400<https:

//lists.midrange.com/mailman/listinfo/web400>

or email: WEB400-request@xxxxxxxxxxxx<mailto:WEB400-request@xxxxxxxxxxxx

Before posting, please take a moment to review the archives
at https://archive.midrange.com/web400<https://archive.

midrange.com/web400>.

--
Regards,
Henrik Rützou

http://powerEXT.org<http://powerEXT.org> <http://powerext.org/<http://
powerext.org/>>
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx<mailto:WEB400@xxxxxxxxxxxx>
To subscribe, unsubscribe, or change list options,
visit: https://lists.midrange.com/mailman/listinfo/web400<https:
//lists.midrange.com/mailman/listinfo/web400>
or email: WEB400-request@xxxxxxxxxxxx<mailto:WEB400-request@xxxxxxxxxxxx>
Before posting, please take a moment to review the archives
at https://archive.midrange.com/web400<https://archive.midrange.com/web400

.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: https://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at https://archive.midrange.com/web400.