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

..ah no worries!

As I mentioned, Angular (and as far as I know, React et al) don't provide or compel you to use any CSS framework and it sounds like your CSS is far better than mine so you might as well carry on with your existing way. We chose Bootstrap because we had neither the time or the skill to start making a CSS library of our own from the ground up, and learning the minutia of CSS well enough to make a cross-browser, responsive, mobile-first framework isn't my idea or fun either 😊! I think if you choose a CSS framework like Bootstrap, it will be opinionated about layout, but you can change anything and everything you wish in the SASS source code.

By the way, the library I mentioned before, ng-bootstrap replaces entirely the Javascript dependencies in Bootstrap with native Angular code. Angular Material is slightly different as far as I understand it, I'm not completely au-fait with it but from what I understand there are two parts to the library, the Angular CDK and the Angular material component library implemented on top of that. The idea is that the CDK provides a layout/styling agnostic platform with which styled parts can be created (for example, the CDK provides the basic functionality of a pop-up dialog, which you can use to make a styled dialog with whatever CSS you like) This article explains it better than me of course https://blog.thoughtram.io/angular/2017/11/20/custom-overlays-with-angulars-cdk.html. This is part of the Angular project and so is likely to become the de-facto way of creating custom styled component with Angular I would imagine.
[http://blog.thoughtram.io/images/banner/custom_overlays.jpg]<https://blog.thoughtram.io/angular/2017/11/20/custom-overlays-with-angulars-cdk.html>

Custom Overlays with Angular's CDK by thoughtram<https://blog.thoughtram.io/angular/2017/11/20/custom-overlays-with-angulars-cdk.html>
The Angular Material CDK provides us with tools to build awesome and high-quality Angular components without adopting the Material Design visual language. Its goal is ...
blog.thoughtram.io

________________________________
From: WEB400 <web400-bounces@xxxxxxxxxxxx> on behalf of Kelly Cookson <KCookson@xxxxxxxxxxxx>
Sent: 01 March 2018 21:15
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]

Sorry Tim, our emails are going to cross.

Again, I appreciate knowing this about Bootstrap. It seems like the JS frameworks and libraries are pretty flexible in letting you do responsive layouts your own way.

Thanks,

Kelly Cookson
IT Project Leader
Dot Foods, Inc.
217-773-4486 ext. 12676
https://nam02.safelinks.protection.outlook.com/?url=www.dotfoods.com&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=K3k8heMNIwtR33tMTWv7iVS6KGalyAiYAPJYWWSwzf8%3D&reserved=0<https://nam02.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.dotfoods.com&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=l2n0G6Z3iyy3yBNYor9IYNwahoe4pdaHaMiWbhX30LI%3D&reserved=0>

From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Tim Fathers
Sent: Thursday, March 01, 2018 2:13 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]

The responsive layout doesn't, but there are other parts of the library that do require Javascript https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgetbootstrap.com%2Fdocs%2F4.0%2Fgetting-started%2Fintroduction%2F&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=C05XLjSBLN2i2TShwIX4OAo%2B0CbGBahzCztfxxzPgMo%3D&reserved=0<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgetbootstrap.com%2Fdocs%2F4.0%2Fgetting-started%2Fintroduction%2F&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=C05XLjSBLN2i2TShwIX4OAo%2B0CbGBahzCztfxxzPgMo%3D&reserved=0>

[https://nam02.safelinks.protection.outlook.com/?url=http%3A%2F%2Fgetbootstrap.com%2Fassets%2Fbrand%2Fbootstrap-social.png&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=8g2%2BV3h2985xS05PG9BdbRK3DUM6dY%2FPdtX%2Bl8cinA8%3D&reserved=0<https://nam02.safelinks.protection.outlook.com/?url=http%3A%2F%2Fgetbootstrap.com%2Fassets%2Fbrand%2Fbootstrap-social.png&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=8g2%2BV3h2985xS05PG9BdbRK3DUM6dY%2FPdtX%2Bl8cinA8%3D&reserved=0>]<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgetbootstrap.com%2Fdocs%2F4.0%2Fgetting-started%2Fintroduction%2F&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=C05XLjSBLN2i2TShwIX4OAo%2B0CbGBahzCztfxxzPgMo%3D&reserved=0<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgetbootstrap.com%2Fdocs%2F4.0%2Fgetting-started%2Fintroduction%2F&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=C05XLjSBLN2i2TShwIX4OAo%2B0CbGBahzCztfxxzPgMo%3D&reserved=0>>

Introduction * Bootstrap<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgetbootstrap.com%2Fdocs%2F4.0%2Fgetting-started%2Fintroduction%2F&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=C05XLjSBLN2i2TShwIX4OAo%2B0CbGBahzCztfxxzPgMo%3D&reserved=0<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgetbootstrap.com%2Fdocs%2F4.0%2Fgetting-started%2Fintroduction%2F&data=02%7C01%7C%7C9f3b948300e54b39280808d57fb127e9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555321205611576&sdata=C05XLjSBLN2i2TShwIX4OAo%2B0CbGBahzCztfxxzPgMo%3D&reserved=0>>
Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
getbootstrap.com

________________________________
From: WEB400 <web400-bounces@xxxxxxxxxxxx<mailto:web400-bounces@xxxxxxxxxxxx>> on behalf of Nathan Andelin <nandelin@xxxxxxxxx<mailto:nandelin@xxxxxxxxx>>
Sent: 01 March 2018 21:06
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 12:30 PM, Tim Fathers <X700-IX2J@xxxxxxxxxxx<mailto:X700-IX2J@xxxxxxxxxxx>> wrote:

We use Bootstrap (https://nam01.safelinks.protection.outlook.com/?url=www.getbootstrap.com&data=02%7C01%7C%7C1d0e2faff45f4a41bda508d57fafe382%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555315761484752&sdata=sfDwYgNAWNzBfjrYFkZjhbscZ3H12oMxoH40kK3%2BKx4%3D&reserved=0<https://nam01.safelinks.protection.outlook.com/?url=www.getbootstrap.com&data=02%7C01%7C%7C1d0e2faff45f4a41bda508d57fafe382%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636555315761484752&sdata=sfDwYgNAWNzBfjrYFkZjhbscZ3H12oMxoH40kK3%2BKx4%3D&reserved=0>) which doesn't need any Javascript
...