Adding a UI framework

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

+1 Angular Material

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

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

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

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

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

Official Angular guidance doc for ng-material 2.

I vote for angular2 material

Thanks for adding Wiki on Bootstrap 4 integration

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

+1 for Angular material :)

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

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

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

+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
#199 (comment)
.

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

How about PrimeNG?

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

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

@alvipeo

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

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

@gdi2290

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.

@cagataycivici

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

Sooo where did Material2 go It's gone from the project?

there's a material2 branch that is always up-to-date
https://github.com/AngularClass/angular2-webpack-starter/tree/material2

So Just to confirm we need to clone the material2 branch to use the material UI?

@VivekWisdom

@VivekWisdom - You need to checkout the material2 branch. The modifications you need to use @angular-material2 exist there.

Anyone PLEASE can tell me where the hell is material2 branch???

Looks to me that material 2 is integrated in default branch :)

@holms

@holms it was deleted #1199 , To add material see this gist: https://gist.github.com/romelgomez/106625de08bbf68a2ca2b5c8aa93dcc8

Navigation Menu

Repository navigation

Adding a UI framework #199

Philippe Léger

7 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Adding a UI framework #199

Description

Activity

RainingNight commented on Jan 5, 2016

PatrickJS commented on Jan 5, 2016

manavsehgal commented on Jan 5, 2016

quanterion commented on Jan 6, 2016

manavsehgal commented on Jan 6, 2016

fesor commented on Jan 6, 2016

manavsehgal commented on Jan 7, 2016

MurhafSousli commented on Jan 11, 2016

manavsehgal commented on Jan 12, 2016

manavsehgal commented on Jan 20, 2016

dsebastien commented on Jan 21, 2016

manavsehgal commented on Jan 22, 2016

PatrickJS commented on Jan 22, 2016

ollwenjones commented on Jan 22, 2016

phil-lgr commented on Jan 22, 2016

Philippe Léger

7 remaining items

cagataycivici commented on Apr 9, 2016

alvipeo commented on Apr 9, 2016

fesor commented on Apr 9, 2016

alvipeo commented on Apr 9, 2016

joshwiens commented on Apr 10, 2016

MurhafSousli commented on Apr 14, 2016

msegers commented on May 27, 2016

PatrickJS commented on May 29, 2016

VivekWisdom commented on Aug 9, 2016

joshwiens commented on Aug 9, 2016

holms commented on Dec 11, 2016

VivekWisdom commented on Dec 11, 2016

romelgomez commented on Dec 11, 2016

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions