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

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/
You can see the CSS style sheet for this page here:
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
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/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
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>

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
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>

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>
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.