Tooling: Consider shipping with Semantic-UI instead of Bootstrap

[danroth27]

Originally posted by @ikourfaln as https://github.com/aspnet/Mvc/issues/2709

Hi,

Im just proposing an enhancement, using Semantic-UI instead of Bootstrap.
I believe that Semantic UI will be the best font-end Framework. check out:
http://beta.semantic-ui.com
SUI v2.0 will be out soon, I think after 2 weeks (the creator said that).

so plz think about that

[ikourfaln]

:+1:

[jlukic]

Hey I'm the author of Semantic UI. Thanks for considering the library.

I'd love to help out with this in any way I can. I can help explain the project and its mission more fully by conference call, Skype, etc. if you guys would like.

[sayedihashimi]

Thanks for the issue.

@jlukic can you give us any usage info? How many users/sites use Semantic UI?

cc @rustd

[jlukic]

@sayedihashimi @rustd

Sorry for the delay. I've set a firm launch date for 2.0 of next tuesday, June 30th. Been a bit of a mad dash to get things together.

Here's some numbers on traction:

What's Better than Bootstrap

• Components are Built with Flexbox and modern JS apis like mutationobservers
• More extensive UI library (50ish components)
• 3000+ theming variables + 3 tiered inheritance system for packaged and ad-hoc theming
• Very active development. The latest version packs 200+ bugfixes, and enhancements, and many new things like multiselect controls

Project Reach

• 17th most popular Javascript project of all time
• 31st most popular project overall on GitHub
• Community maintained integrations for Meteor, Ember, Angular, React, Wordpress, and many others.

Project Involvement

• 861 volunteers have helped translate our docs
• 93 contributors
• 325 closed pull requests
• 4900 commits
• 1900+ closed GitHub Issues
• Maintained for 3 years+
• Used for projects at The New Republic, Quirky, and many other startups.

[xtianus79]

@jlukic A lot of features you propose in semantic UI will be in foundation 6.0 as well. For me, what I always consider in a framework is the ability to utilize it in production for any scenario vs. prototyping mockups which I preach bootstrap is used for. Albeit the grid system. With that said, would you be able to tell me your sass/less setup, if your components are bound by a sass/less system and do you have a mixin structure for each of your components that are grounded by a settings or variables file system?

Moreover, if you do have the above things worked out... do you have a bower setup for the best case use system like that of a bootstrap and or foundation setup?

thanks.

[jlukic]

I just launched 2.0 today.

@xtianus79

The library is built on nearing 4000 LESS variables and a 3 tier inheritance system. Each tier includes site-wide "global" variables and individual component variables, so the system is actually technically 6 levels deep.

Here's some documentation that explains things more thorougly

• What's new in 2.0
• Explanation of theming and inheritance
• Explanation of build tools
• Overview of the grid system
• Additional advanced usage recipes
• Integrations with other js frameworks

[sayedihashimi]

@jlukic thanks for the details. It's a bit late for us to consider switching from bootstrap to a new UI framework for the RTM release, but I think there is some things that we can do to make it easier to use Semantic UI with ASP.NET.

There are two scenarios to consider:

• Users in Visual Studio creating projects
• Users creating projects outside of VS

For the first case, Visual Studio users I think we should create a project template(s) for Sematic UI + ASP.NET. Can be ASP.NET 5 as well as ASP.NET 4. We can add these project templates to SideWaffle so that it's easy for users to discover them. Or we can create a specific VS template pack for Sematic UI.

If you're interested in also targetting the xplat customer then I think the best thing to do is to create a yeoman generator. Once we do we can add that generator to the related generators for yo aspnet.

If we notice that the SideWaffle/yo templates are being used heavily we can consider switching from bootstrap to Sematic UI in a future release.

I can help you get started with either, or both, of these efforts.

Let me know what your thoughts are and we can take the next step.

[jlukic]

@sayedihashimi

I'd love to get Yo generators into the RTM, unfortunately I don't personally have the bandwidth to write them. Maybe @gustavohenrique who's written gulp-angular-semantic-ui yo generators might have some interest.

Whens the cut-off date for getting these in the RTM build? I'll try to get the ball rolling

[gustavohenrique]

Unfortunately I cannot assume this project at the moment but maybe I can contribute with pull requests.
I used the Twitter Bootstrap, the Zurb Foundation and the JQuery UI. In my opinion the Semantic-UI is more beautiful and the documentation and examples are easy to understand and implement.
I really prefer the Semantic-UI instead of the others.

[sayedihashimi]

@jlukic ok sounds good. If you would like to get started with a yo generator I can outline what is needed.

I think the best thing to do is to clone generator-aspnet and publish as a new project named generator-aspnet-semanticui. Don't fork it because forks on github are not indexed.

From there the goal will be to keep that repo in line with releases of generator-aspnet which is updated on every release of the asp.net 5 runtime to nuget.org.

The semantic-ui clone will replace bootstrap with semantic-ui and any other changes you deem necessary.

From there we can us travis to automate the publish of the generated npm package to npmjs.org.

You can do this work in your own repo or we can create a new repo in the OmniSharp org. If you want to do this in OmniSharp I can do the following for you.

• Create a new repo in OmniSharp org that has the existing content from generator-aspnet
• Modify artifacts to use a new name for the npm package to be generator-aspnet-semanticui
• Automate publish from release branch

We can remove the class library, console templates and Web API templates since they are not relevant. You can decided if you want to update the Nancy template or remove it. You can also add other new templates there beside the existing web templates that VS ships.

If you don't have the time to do the work right away then you can create a .zip file with the end result for the web templates and create issues in that repo and hopefully we can find someone who can work on it.

[jjwilliams]

I'm curious what ever happened to this? Did anyone create the generator?

[sayedihashimi]

@jjwilliams I don't think anyone followed up on this. We (Microsoft) don't have any plans currently to change the UI framework at this time.

[jjwilliams]

Sounds like a fun way to learn yeoman, I'll put it on my long list of things-I-want-to-learn.

[sayedihashimi]

@jjwilliams you can base it on https://github.com/OmniSharp/generator-aspnet and then switch out bootstrap. The team there may be able to provide pointers and other info. I work on that project as well. You may want to post an issue letting them know that you are planning to create a related generator. The team there is very helpful. Once the generator is complete we can add a link to it on the Related generators wiki.

[jjwilliams]

Great, thanks for the info @sayedihashimi!

[jlukic]

Thanks @jjwilliams sorry I just didnt have the time to learn how to contribute to this correctly

[jjwilliams]

Another thought: I've looked through the yeoman documentation some, and the generator-aspnet a bit, instead of replacing bootstrap with semantic-ui can we not just use a switch to indicate which UI framework the user wants to start with? Something like yo aspnet --bootstrap or yo aspnet --semantic-ui.

Aside from the initial "yo aspnet", I have not found any "bootstrap specific" View generation. The bootstrap part is really just a custom generator-aspnet/templates/projects/web/bower.json with bootstrap and jQuery dependencies (or maybe there is more to it that I don't see).

Just some thoughts, if this has already been looked at I have no problem with a completely separate project.

Edit
Sorry, all of the primary cshtml files in templates/projects/web are bootstrap specific I see, so it would require some restructuring.

[sayedihashimi]

@jjwilliams we should have this discussion over at https://github.com/OmniSharp/generator-aspnet/issues. There are two high level options as you've stated.

• Update generator-aspnet to have a switch to configure the UI fx
• Create a new generator specifically for this

We need to make sure that we play nice in the yeoman world. I think the preference in the yeoman ecosystem is to create more opinionated/targetted generators. So the team may prefer a seperate generator. We had a similar discussion a few months back at #97 (see my comment https://github.com/OmniSharp/generator-aspnet/issues/97). But let's start the discussion over there so that we can come up with a plan that works for all of us.

[sayedihashimi]

I'm working on a story where we can create templates once and share them across VS/CLI/Yeoman/VS Code with dotnet new. More info at https://github.com/dotnet/cli/issues/2052#issuecomment-207031714. Once we do that I'm hoping that we can enable a good story for getting templates like Sematic UI to be easily acquired by users.

I'm going to go ahead and close this, but let's keep an eye on dotnet new and in the next 6 or so months to see if that solves this issue. I'm just closing this here because I need to clean up the issues here. I'm still very interested in adding choices for ASP.NET developers like outlined here.