IAMtheIAM / angular-webpack-nodejs-starter

Starter project featuring Angular 4+, (with AOT compilation), TypeScript, Webpack 3 (with Tree Shaking, Hot Module Replacement, and SASS), Debugging Webpack Build, Debugging Angular Application, and Gzip Compression of assets. Integrated with a NodeJS webserver backend with example API routes.
36 stars 5 forks source link

Barebones starter functionality #6

Closed wsloth closed 6 months ago

wsloth commented 7 years ago

For the barebones dotnet starter, what are the features we should include by default?

The following was mentioned in this issue:

  1. Visual Studio build process integration
  2. JWT Authentication
  3. Login Page
  4. Angular 2 Route protection (so users cannot enter the app without getting JWT authentication passed)
  5. Existing helper "services" folder (appstate, authentication, data, route-protection, utility)
  6. AOT Compilation
  7. Some Webpack loaders and config (only necessary for what's left in the project)
  8. SASS compilation
  9. Existing app structure
  10. Existing screen layout
  11. Lazy Loading sub-modules

Personally, I don't know whether it's smart to include any CSS framework by default or not. I can imagine some people want to use SkeletonCSS for example and not deal with anything Bootstrap or Materialize.

IAMtheIAM commented 7 years ago

Very good, I see your point about not including a CSS framework. If we keep SASS compilation, then I can recreate the components with basic SCSS and remove the big framework dependency, such as MaterializeCSS.

Currently, the repo uses Susy 2, which is a math extension for SASS that allows users to create their own custom grid. It is not really a CSS framework, as it has no opinions nor viewable styles. But rather, it allows you to compute SCSS calculations for creating percentage-based column grids. What do you think about keeping this in the barebones branch?

wsloth commented 7 years ago

I hadn't actually heard of Susy before, but I have to say, that's really exciting. I've actually been looking for a standalone grid with lots of flexibility for a while (hence why I mentioned SkeletonCSS, because it's almost just a grid).

I think it's good to keep susy and all the other mixins you defined (unless they are framework specific) and allow the user to use whatever they like.

9 - Existing app structure

What exactly did you mean by this? Namespaces and directory structure? By the way, about namespaces, is it alright if I refactor them to be Starter.Namespace or something like that? Seeing as the namespace in this project is pretty specific (Armls.Helios).

IAMtheIAM commented 7 years ago

9 - Existing app structure

By that, I meant the directory structure.

As for namespaces, yes refactor to Starter.Namespace is fine with me.

About Susy, glad you like the idea ;) When you get to use it, I think you'll really enjoy when you see how powerful, flexible, yet simple it is.

GaryWenneker commented 7 years ago

In regard to a css framework what you could do is provide a minimal layouting:

unoptimized (but tiny) scss flex grid system:

@for $i from 1 through 12 { .col--#{$i} { margin: 0 $gutter $gutter; @media (min-width: 768px) { flex: 0 0 calc(#{100% * $i / 12} - #{$gutter *2}); } } }

All you need to do is put those columns inside a container that has display: flex set on it.