Hi Nathan,
Yes, I do agree it might confuse a novice. If someone needs to get into production ASAP, or simply prefers the maximum amount of simplicity, then your approach may be better for them. I found it easy to learn the 12 column fluid grid with the Pluralsight class.
I don't find the media queries difficult to manage. In part that's because I split my CSS code up into different .SCSS files based on the media queries for screen size. I've made my SCSS files available for download in a zipped file here:
http://www.kellycookson.info/docs/scss_files.zip
You can open the SCSS files in any text editor. So, if I want to modify how something looks on a tablet, I just open my _tablet.SCSS file and focus on the CSS in that file. If I want to change my navigation button, I open my _mobileMenu.SCSS file and change the CSS code there. I even have a _columns.SCSS file that handles CSS for the fluid grid layout. This separation of CSS code makes it much easier to manage.
My website was designed with a mobile first approach. The _smallPhone-default.SCSS file contains the most CSS code. This is what the web site defaults to without any media query. That is, this file contains the CSS for the smallest screens. The other SCSS files then do media queries and modify page appearances for progressively larger screens.
My web pages don't load the separate SCSS files. Koala automatically updates a single CSS file whenever I make changes to one of the SCSS files. My web pages just load that single CSS file.
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: Thursday, March 01, 2018 12:52 PM
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]
On Thu, Mar 1, 2018 at 10:41 AM, Kelly Cookson <KCookson@xxxxxxxxxxxx<mailto:KCookson@xxxxxxxxxxxx>>
wrote:
Are you talking about the simple fluid grid page?
http://www.kellycookson.info/fluidgrid/<http://www.kellycookson.info/fluidgrid/>
Yes.
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.
Yes, that's easier to read on mobile devices. It's also more responsive to
screen size.
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.
In regard to your question about assigning various fixed percentage widths
to column classes, that's what caused the compression and tiny font problem
in your "fluidgrid" page. On your main page you resolved that problem by
using a @media rule that overrode all the column widths to 100%, which
enabled them to flow left-to-right, top-to-bottom, on small screens.
Wouldn't you agree that using a @media rule to override and change the
attributes of a base class adds a layer of complexity to your .CSS?
Something that might lead to unexpected behavior in a different
application? Something that might confuse a novice?
--
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>.
midrange.com
