Adding a UI framework - Githubissues

manavsehgal commented 8 years ago

This issue combines several prior issues around Scss/jQuery/Bootstrap integration.

Angular community has a choice of UI frameworks to consider. Bootstrap, Semantic UI, Ionic, Material UI... among others. Can we showcase (with sample components, webpack integration...) integration of one UI framework using best practices followed by the starter...

Using Scss in modular way - selective UI framework components for minimal payload.
Integrating UI framework JS modules honoring Angular and Webpack requirements.

We need to vote on one such framework for integration, before considering the implementation.

Bootstrap, Material will most likely be implemented in a project similar to Angular Bootstrap or Angular Material...
Ionic is self-contained and already implementing Angular 2 + Ionic 2 integration on their own...
Among the UI frameworks I find Semantic UI to be most comprehensive and flexible in terms of integration and customization surface...

+1 Semantic UI

RainingNight commented 8 years ago

+1 Angular Material

PatrickJS commented 8 years ago

I have a version of the repo with ng2-material working. I ended up not merging it since there was a lot of overhead. I probably need to write a how to extend wiki

manavsehgal commented 8 years ago

Writing a wiki to explain integration with various UI frameworks seems a good idea as well.

quanterion commented 8 years ago

I vote for Material Design. Also It would very helpful to add authentication with UI. IMHO it is very useful in starter kits.

manavsehgal commented 8 years ago

@RemKolomna Thanks for voting. Auth seems to be a separate thread, I agree an important one.

fesor commented 8 years ago

I agree, there is not so many examples of how to implement it with angular. At least some strategies should be described in wiki.

manavsehgal commented 8 years ago

Official Angular guidance doc for ng-material 2.

MurhafSousli commented 8 years ago

I vote for angular2 material

manavsehgal commented 8 years ago

Thanks for adding Wiki on Bootstrap 4 integration

manavsehgal commented 8 years ago

Just started coding a sample app forking this starter. Demo use of sass/scss at app level and component level (see feature component). Simple example introducing theming and flexbox layouts using scss. https://github.com/manavsehgal/AngularPages

dsebastien commented 8 years ago

+1 for Angular material :)

manavsehgal commented 8 years ago

Quick count on votes, wiki and issues:

Angular Material = 5 votes > Bootstrap 4 = 1 wiki, 2 issues > Semantic UI = 1 vote Sass/Scss = 5 issues > Less = 1 issue

PatrickJS commented 8 years ago

I rather include instructions on how to install either one than force developers to start off with one

ollwenjones commented 8 years ago

+1 for instructions / example to add either one. A good starter project shouldn't be saddled with too many dependencies a dev may or may not need for his/her next project.

phil-lgr commented 8 years ago

+1 for instructions / example to add either one, I think it is better to show example on how to install sass css, fonts (as new to Webpack, it was not so easy to load fonts) and let devs decide :)

On Fri, Jan 22, 2016 at 9:23 AM, Sam Jones notifications@github.com wrote:

+1 for instructions / example to add either one. A good starter project shouldn't be saddled with too many dependencies a dev may or may not need for his/her next project.

— Reply to this email directly or view it on GitHub https://github.com/AngularClass/angular2-webpack-starter/issues/199#issuecomment-173933175 .

Philippe Léger

Programmer (front-end) | [image: LinkedIn] https://ca.linkedin.com/pub/philippe-l%C3%A9ger/29/57/14b| pleger2@gmail.com | 514-799-8461

phil-lgr commented 8 years ago

@manavsehgal thank you for https://github.com/manavsehgal/AngularPages, really helped me figure out how to generate style for components! Potentially a great addition to the boilerplate..

manavsehgal commented 8 years ago

@phil-lgr cheers for the note. I will discuss with @gdi2290 for inclusion into core (smiles).

clouless commented 8 years ago

regarding boostrap 4. I think there is a little mistake in the doc: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

You should not use bootstrap-sass package since it is bootstrap 3. And use config file .bootstraprc to tell bootstrap-loader that it is bootstrap v4 (which already contains scss files): https://github.com/shakacode/bootstrap-loader/blob/master/.bootstraprc-4-default

I will try to figure it out myself but it will take some time.

UPDATE: :white_check_mark: I got it working without bootstrap-sass by adding the following to main.ts

import 'zone.js';
import 'reflect-metadata';
import 'jquery';
import 'bootstrap-loader';

Without zone and reflect-metadata angular won't run. With the two lines included it runs but I got some other weird errors which I will ignore for now.

I used:

  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "bootstrap": "^4.0.0-alpha.2",
    "bootstrap-loader": "^1.0.8",
    "es7-reflect-metadata": "^1.5.5",
    "zone.js": "0.5.14"
...

NickClark commented 8 years ago

My biggest issue right now with styles, is keeping the source maps. Otherwise, I've been opting for the following config:

{ test: /\.scss$/,  loaders: ['to-string', 'css?sourceMap', 'sass?sourceMap'] },

This allows me to keep using the css-loader to resolve url()s.

cagataycivici commented 8 years ago

How about PrimeNG?

http://www.primefaces.org/primeng/

alvipeo commented 8 years ago

Let's add every UI lib to the project! ;)

fesor commented 8 years ago

@alvipeo this is actually good idea, it just means that we should make yoman generator.

alvipeo commented 8 years ago

Exactly. Let's leave the project alone and not make it fat.

joshwiens commented 8 years ago

Having done quite a bit of this lately and I would suggest going the route @gdi2290 suggested.

Fork it and create a walkthrough on how to add, material2/ng2-bootstrap/sass/whatever Open a PR for the readme and have the repo added to a list of projects that have been extended.

It simplifies pulling in updates from the upstream repository ( this one ) and still provides value to the community using it without bloating upstream.

MurhafSousli commented 8 years ago

@cagataycivici did you find a way to integrate it? I can't get it to work