Archive

Posts Tagged ‘Twitter BootStrap’

Angular 2: Adding bootstrap css framework

In my previous post I showed you how to create an Angular 2 application using angular-cli tool. This post is a continuation of that and in this post I am going to show how to use node package manager npm to add bootstrap stylesheet and wire it up in the application.

I am going to open the nodejs command prompt and install the bootstrap css package to the project using the following command.

C:\>npm install ng2-boostrap –save

 

If you browse to the node_modules folder you can see the new folder bootstrap was created which contains all the stylesheets as shown below.

Bootstrap CSS added to the angular 2 project

In order to make the stylesheet available for the page we have to add the path of the file to the styles array which is defined in the .angular-cli.json file. Since it is an array you can add multiple stylesheets and the loader will take care of it.

.angular-cli.json

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]

adding css location to the styles array

Now I am going to add some menu with the search text box and a jumbroton layout to give it a nice look.

<body>
  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">NG Corporationa>
    div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Homea>li>
      <li><a href="#">Abouta>li>
      <li><a href="#">Servicea>li>
      <li><a href="#">Contacta>li>
    ul>
    <form class="navbar-form navbar-right">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search">i>
          button>
        div>
      div>
    form>
  div>
nav>
  <div class="container">
    <div class="row">
      <div class="jumbotron">
        <h1>NG Corporationh1>      
        <p>A place to use your creativity, innovation and passion to build exciting product for the world.p>
      div>
        <app-root>Loading...app-root>
      div>   
  div> 
body>

As you can see pretty standard bootstrap template and at the end we have our angular component with the custom selector “app-root”. Last thing we have to do is to run the following command in order to start the application.

C:\>ng serve

And here is the angular 2 application up and running with bootstrap styling.

bootstrap style applied to the website

Advertisements

Have a toast with toastr.js

February 28, 2014 2 comments

In this post I am going to talk about a very simple notification jQuery plugin call toastr and I believe not many people have heard about it.

It is relatively simple to use and I often use it as debugging tool when I am writing JQuery plugin or trolling through JavaScript code.

Lets get started with a new ASP.NET MVC project and nuget the package with the following command.

PM> Install-Package toastr

 

The nuget package will add the css and the JavaScript file to the Asp.Net MVC project and we need to wire up the toastr.css and the toastr.js in our bundle config as shown below.

BundleConfig.cs

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js","~/Scripts/toastr.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css","~/Content/toastr.css",
                  "~/Content/site.css"));
    }
}

Now I’m going to create a simple page with 4 buttons showing characteristics of toastr notification functionality.

Index.cshtml

    <div class="jumbotron">
        <div class="row">
            <div class="col-md-3">
                <h3>Toastr Success</h3>
                <p><a id="toastr-success" class="btn btn-success">Success</a></p>
            </div>
            <div class="col-md-3">
                <h3>Toastr Information</h3>
                <p><a id="toastr-info" class="btn btn-info">Information</a></p>
            </div>
            <div class="col-md-3">
                <h3>Toastr Warning</h3>
                <p><a id="toastr-warning" class="btn btn-warning ">Warning</a></p>
            </div>
            <div class="col-md-3">
                <h3>Toastr Error</h3>
                <p><a id="toastr-error" class="btn btn-danger">Error</a></p>
            </div>
        </div>

In the below JavaScript code I am setting some of the toastr option like the position of the popup and wiring up the button click to the toastr notification function.

<script type="text/javascript">
    $(document).ready(function () {
        toastr.options = {
            "closeButton": true,
            "positionClass": "toast-bottom-full-width",
            "onclick": null,
            "showDuration": "0",
            "hideDuration": "0",
            "timeOut": "0",
            "showMethod": "fadeIn"
        };
        $('#toastr-success').click(function () {
            toastr.success('This is a success notification from toastr.')
        });

        $('#toastr-info').click(function () {
            toastr.info('This is an information notification provided by toastr.')
        });

        $('#toastr-warning').click(function () {
            toastr.warning('This is a warning notification provided by toastr.')
        });

        $('#toastr-error').click(function () {
            toastr.error('This is an error notification provided by toastr.')
        });
    });
</script>

The JavaScript code is pretty straight forward and there are other options you can set such as whether a user interaction is required or not on the pop-up, do you need to call another function as part of post processing etc.

And here is the final page in action and for demonstration purpose I have taken the screenshot of all the notification in one page.

Have a toast with toastr

and here is what it would look like in a mobile device.

Have a toast with toastr - Mobile View

Happy toasting !!!

Getting started with Azure and Visual Studio 2013

October 13, 2013 7 comments

In this post I am going to talk about how to get started with Windows Azure using Visual studio 2013 RC1 and hope to share some cool stuff of Windows Azure Cloud Services.

First step you have to do before you can start using the Azure Cloud Services is to register your windows live account with Azure Portal. Once you have registered yourself log in using this account into the Windows Management Portal.

Next thing we need to do is to create a website and I am going to create a website name prashantbrall.azurewebsites.net as shown below.

Now the website is ready and let’s have a quick look at the empty website.

Nothing special a simple empty website template.Now in order to get profile of this published website go to the dashboard page of the Azure Management Portal and download the publish profile.

Lets save this profile setting file locally and start with File > New Project in Visual Studio 2013.

The first thing you will notice is that all the different web application types are gone and this is what the One ASP.Net looks like. This also means that there is no differentiation between ASP.NET webforms ,ASP.NET MVC and it won’t sound horrible if you want to build hybrid web application i.e. ASP.NET webform and MVC in the same application.

Lets go ahead create a new web application and I’ll use the MVC template.

Now my solution is set and in order to publish this site on azure I need to import the profile which I download from the dashboard page.Right click on the project and click Publish> Import as shown below.

With this the profile is now imported and all the deployment information is in my solution. Just click “Publish” and the web publishing wizard will work out what are the difference between this deployment and the previous one. Since this is our first deployment it will have all the assemblies and dependencies in the deployment package.

As you can see the deployment has started and the cloud address where it is trying to deploy the package.

Lets make some changes to the content of the sample website and layout and redeploy the package and as I do that the wizard will work out the delta changes to my deployment and shows the differences.

This is pretty cool as you can see it even tells me which view I have changed since the last build.

 

And now my website is up and running and can be viewed at here.

Last thing I wanted to mention is that when I created a new website in Visual Studio 2013 it uses the Twitter BootStrap layout and CSS design for the website which gives a very nice look and has a very nice responsive design.If we view my website on Responsinator it shows how responsive and mobile friendly my website is and how it hides some menu items for mobile friendly look.

Happy Azurring !!!!