0

I created a new ASP .NET MVC 5 project in Microsoft Visual Studio 2013. I chose some Bootstrap template (based on 3.2.0 version) on the internet, which I want to use in my project. I purchased the license for using that template and downloaded the appropriate package with sources, docs and so on. There is several sections inside this package:

  • dist - production files (merged .html files, .css merged into 1 files, .js merged into 2 files, etc.)
  • dev - development files (divided into several layouts .html files, divided .less, divided .js and so on)
  • docs - documentation

Because I am not very experienced web developer, I feel a lack of information inside on how to import this template into my project and how to continue the further development using this template in a good way.

There is a development setup guide section:

To work with the included development files you need to install the following: You need to install Node.js, Bower, Grunt, Jekyll.

After Node is Installed open command line/terminal and go to your app folder inside the dev folder:

npm install
// Will install all packages set in dev/package.json
// Important! On windows you need to create the npm/ folder as for the path shown in the error

bower install
// Will install bower components set in dev/bower.json
// Important! On windows you need to install msysgit.github.io and add it to your environment path this is for having access to bower in the command line.

To generate production files (demo) run:

grunt
// Will compile all assets and create the dist/dev at the same level(outside) of /dev

To compile less files without processing HTML with Jekyll run:

grunt less

And, finally, the questions:

  1. What are these technologies/tools (Node.js, Bower, Grunt, Jekyll) used for, how they are connected between each other?
  2. What are the tools/extensions for development inside Visual Studio 2013, which will help to import development sources of chosen Bootstrap template (Node.js, Bower, Grunt, Jekyll as said in the development setup guide) into ASP .NET MVC 5 project and to continue further development?
  3. What are the ways/guidelines/patterns/practices about how to import and continue further development of a Bootstrap template in ASP. NET MVC 5 project inside Visual Studio 2013?
Community
  • 1
  • 1
Deilan
  • 4,740
  • 3
  • 39
  • 52
  • Question 1: It's primarily opinion based. Question 2: It's also primarily opinion based. Question 3: Is to broad, SO is designed to answer specific programming questions. – Erik Philips Oct 10 '14 at 15:41
  • "What are these technologies/tools (Node.js, Bower, Grunt, Jekyll) used for" Try using Google. – cvrebert Oct 11 '14 at 01:44

1 Answers1

2

1: This is a pretty loaded technical question, and probably deserves it's own SO entry. That being said, there is a somewhat similar existing SO question which may give you some insight here: Difference between Grunt, NPM and Bower ( package.json vs bower.json )

2: There is an excellent free online course available from Microsoft which covers this. Check out Microsoft Virtual Academy, and look for the course named "Building Responsive UI with Bootstrap". You'll learn about Web Essentials, working with Visual Studio and much, much more.

3: See the very detailed Answer from this SO on how to implement a theme in an MVC 5 project: Is there a walkthrough for implementing a theme from bootswatch or wrapbootstrap in an MVC 5 project?

Community
  • 1
  • 1
khilley
  • 577
  • 3
  • 8