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

Hi Henrik,

I am talking about a grid composed of rows and columns. The rows and columns are defined using standard HTML div tags and CSS class selectors. There are no HTML tables involved.

I guess the idea of a grid-list in Angular is the closest comparison. However, the grid-list concept is embedded in the Angular way of doing things, at least in the documentation that you pointed us to. For example, the documentation you pointed us to says “An mat-grid-list must specify a cols attribute which sets the number of columns in the grid. The number of rows will be automatically determined based on the number of columns and the number of items.”

· There is no “mat-grid-list” with a “cols” attribute in my web pages. I am using standard HTML div tags and CSS class selectors to define my grid. All of the links I provided are simple static web pages based solely on HTML and CSS.

· It looks like Angular determines the number of rows in the grid based on the number of columns. In my web pages, I determined how many rows I wanted on each page, and I determined how many columns I wanted in each row. I also determined the width of each column within a row. One row can have multiple columns that each differ in column width.
The concept of a fluid grid layout is broader than how a fluid grid layout is implemented within any particular JS framework/module/library. A fluid grid layout does not require a JS framework/module/library at all.

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 10:40 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]

Kelly

are you talking about grid's or data tables (two different things in modern
design)

Here is part of Google's Material definition and design guides

https://material.io/guidelines/components/data-tables.html#<https://material.io/guidelines/components/data-tables.html#>

https://material.angular.io/components/grid-list/overview<https://material.angular.io/components/grid-list/overview>

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

Thanks for the link, Nathan. I have bookmarked it and will check out the
articles/posts.

You mentioned that developers often fight with complexities and unknowns
using CSS grid systems. I use a responsive 12 column grid for my personal
web development and don't really have problems with it. (Perhaps because my
personal web sites are static?)

I have a very minimal static web page that I use to illustrate it:
http://www.kellycookson.info/fluidgrid/<http://www.kellycookson.info/fluidgrid/>
You can see the CSS style sheet for this page here:
http://www.kellycookson.info/fluidgrid/stylesheet.css<http://www.kellycookson.info/fluidgrid/stylesheet.css>
There is more involved in responsive design than just the fluid grid. You
need to change font size and deal with things like images or embedded
videos. The fluid grid is just one part of developing a responsive design.

Here is a page on my personal web site with 6 rows (including the fixed
top row with navigation) that have columns of various sizes:
http://www.kellycookson.info/service/index.html<http://www.kellycookson.info/service/index.html>
Here are two pages on my personal site with images and embedded YouTube
videos:
http://www.kellycookson.info/leisure/art.html<http://www.kellycookson.info/leisure/art.html>
http://www.kellycookson.info/leisure/music.html<http://www.kellycookson.info/leisure/music.html>

For my web site, I use SASS to separate out the CSS for different screen
sizes. I only use ordinary CSS code without any of the extra features that
SASS brings. The SASS style sheets are merely to separate out CSS for
phones versus tablets versus desktops (or however you want to break down
screen sizes). I use Koala as a GUI for working with SASS. Koala "compiles"
the individual SASS style sheets into a single CSS style sheet for use in
my website.

Here's the location of the single CSS style sheet for my website:
http://www.kellycookson.info/css/screen.css<http://www.kellycookson.info/css/screen.css>
Remember, I never directly change the single CSS style sheet at the link
above. I change much smaller SASS style sheets, depending on which screen
size I want to modify, and then Koala automatically updates the single CSS
style sheet for me.

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: Wednesday, February 28, 2018 11:02 PM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: [EXTERNAL] Re: [WEB400] Express, React, Node.JS

On Wed, Feb 28, 2018 at 3:12 PM, Don Brown <DBrown@xxxxxxxxxx<mailto:DBro

<mailto:DBrown@xxxxxxxxxx%3cmailto:DBro%0b>> wn@xxxxxxxxxx<mailto:wn@xxxxxxxxxx>>> wrote:

I would be interested in any suggestions or recommendations that you may
think would help us in putting a good foundation in place.

I agree that a good foundation makes a world of difference. I've begun
writing about UI modernization at:

https://rd.radile.com/rdweb/info2/ibmiuix.html<https://rd.radile.com/rdweb/info2/ibmiuix.html><https://rd.
radile.com/rdweb/info2/ibmiuix.html<http://radile.com/rdweb/info2/ibmiuix.html>>

You may find something useful there.
--
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<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<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>.