HOMER Documentation - HTML/jQuery

HOMER
ASP MVC5 Responsive WebApp

Thank you for purchasing HOMER admin theme. If you have any questions about the template, please feel free to contact us via email: support@webapplayers.com.

Documentation created: 10/04/2015
Latest update: 26/07/2015
By: WebAppLayers Team

This documentation is focused on HOMER ASP MVC5 version. It assumes a minimum knowledge of html/css/js language. It describe mainly files and structure in project.

Please note that this documentation is dedicated to the main element of the template. With each version, we will try to develop it.

But if you have any questions going beyond what is described here don't hesitate to write to us on support email. We would love to help.

support@webapplayers.com

Technology and structure

Tool and Technologies used:

Visual Studio 2013
.Net Framework 4.5.1.
MVC 5
Bootstrap 3 UI Framework.
HOMER resources

Structure

Folders and files

HOMER ASP.NET MVC theme consists project files for Visual Studio 2013 with below structure:

Homer_MVC/
    ├── App_Data/
    ├── App_Start/
    ├── bin/
    ├── Content/
    ├── Controllers/
    ├── Helpers/
    ├── Icons/
    ├── Images/
    ├── Models/
    ├── obj/
    ├── Properties/
    ├── Scripts/
    ├── Vendor/
    ├── Views/
    ├── Global.asax
    ├── Global.asax.cs
    ├── Homer_MVC.csproj
    ├── Homer_MVC.csproj.user
    ├── package.config
    ├── Web.config
    ├── Web.Debug.config
    ├── Web.Release.config

Layout structure

Main index layout are created with few main elements:

_Header top header.
_Navigation left sidebar navigation.
@RenderBody main container for page elements.
_Right_Sidebar additional right sidebar.
_Footer bottom footer.

Layout structure - file

This is example of basic (minimal version) layout structure.


   <!-- Header -->
    <div id="header">
        @Html.Partial("_Header")
    </div>

    <!-- Navigation -->
    <aside id="menu">
        @Html.Partial("_Navigation")
    </aside>

    <!-- Main view  -->
    <div id="wrapper">
        @RenderBody()

        <!-- Right Sidebar -->
        @Html.Partial("Right_Sidebar")

        <!-- Footer -->
        @Html.Partial("_Footer")


    </div>

Layout structure

Page <head /> contains Metadata and CSS bundle files for theme. We use special section @RenderSection, to import styles for specific plugins on pages that need it.


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>HOMER | @ViewBag.Title</title>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

    <!-- Primary vendor style -->
    @Styles.Render("~/bundles/font-awesome/css")
    @Styles.Render("~/bundles/animate/css")
    @Styles.Render("~/bundles/bootstrap/css")
    @Styles.Render("~/bundles/peicon7stroke/css")

    <!-- Add local styles, mostly for plugins css file -->
    @if (IsSectionDefined("Styles"))
    {@RenderSection("Styles", required: false)}

    <!-- Primary HOMER style -->
    @Styles.Render("~/bundles/homer/css")
</head>

Page Script

On bottom of file are bundle script located. _Layout.cshtml contains all major plugin scripts and Homer scripts. In section @RenderSection, will be import scripts for specific plugins on pages that need it.


    <!-- Section for main scripts render -->
    @Scripts.Render("~/bundles/jquery/js")
    @Scripts.Render("~/bundles/bootstrap/js")
    @Scripts.Render("~/bundles/homer/js")

    <!-- Handler for local scripts -->
    @RenderSection("scripts", required: false)

Adding Plugin (special styles file and scripts)

To add for example bootstrapTour plugin at the bottom of page (view) you have to specifie Styles and Scripts with name plugin as example below. Or if you want to add it to entire app you can add it to _Layout file.


@section Styles {
    @Styles.Render("~/bundles/bootstrapTour/css")
}

@section Scripts {
    @Scripts.Render("~/bundles/bootstrapTour/js")

    <script type="text/javascript">
        $(function () {

            // Local scripts

        });
    </script>
}

Option - fixed sidebar

Fixed sidebar is a (left menu) sidebar that is sticked on screen.

To add fixed sidebar you need to add .fixed-sidebar class to body.


<body class="fixed-sidebar">

Option - fixed navbar

Fixed navbar is a top navbar that is sticked on screen.

To add fixed sidebar you need to add .fixed-navbar class to body.


<body class="fixed-navbar">

BundleConfig.cs

Bundle contains all neccesery scripts and style. You can add it to any part of your app. With convention:

CSS styles: @Styles.Render("~/bundles/{PluginName}/css")
JS scripts: @Scripts.Render("~/bundles/{PluginName}/js")

Please note that some plugin have own images so path to the bundle has to be relative for example starRating plugins.

            // Homer style
            bundles.Add(new StyleBundle("~/bundles/homer/css").Include(
                      "~/Content/style.css", new CssRewriteUrlTransform()));

            // Homer script
            bundles.Add(new ScriptBundle("~/bundles/homer/js").Include(
                      "~/Vendor/metisMenu/dist/metisMenu.min.js",
                      "~/Vendor/iCheck/icheck.min.js",
                      "~/Vendor/peity/jquery.peity.min.js",
                      "~/Vendor/sparkline/index.js",
                      "~/Scripts/homer.js",
                      "~/Scripts/charts.js"));

            // Animate.css
            bundles.Add(new StyleBundle("~/bundles/animate/css").Include(
                      "~/Vendor/animate.css/animate.min.css"));

            // Pe-icon-7-stroke
            bundles.Add(new StyleBundle("~/bundles/peicon7stroke/css").Include(
                      "~/Icons/pe-icon-7-stroke/css/pe-icon-7-stroke.css", new CssRewriteUrlTransform()));

            // Font Awesome icons style
            bundles.Add(new StyleBundle("~/bundles/font-awesome/css").Include(
                      "~/Vendor/fontawesome/css/font-awesome.min.css", new CssRewriteUrlTransform()));

            // Bootstrap style
            bundles.Add(new StyleBundle("~/bundles/bootstrap/css").Include(
                      "~/Vendor/bootstrap/dist/css/bootstrap.min.css", new CssRewriteUrlTransform()));

            // Bootstrap
            bundles.Add(new ScriptBundle("~/bundles/bootstrap/js").Include(
                      "~/Vendor/bootstrap/dist/js/bootstrap.min.js"));

            // jQuery
            bundles.Add(new ScriptBundle("~/bundles/jquery/js").Include(
                      "~/Vendor/jquery/dist/jquery.min.js"));

            // jQuery UI
            bundles.Add(new ScriptBundle("~/bundles/jqueryui/js").Include(
                      "~/Vendor/jquery-ui/jquery-ui.min.js"));

            // Flot chart
            bundles.Add(new ScriptBundle("~/bundles/flot/js").Include(
                      "~/Vendor/flot/jquery.flot.js",
                      "~/Vendor/flot/jquery.flot.tooltip.min.js",
                      "~/Vendor/flot/jquery.flot.resize.js",
                      "~/Vendor/flot/jquery.flot.pie.js",
                      "~/Vendor/flot.curvedlines/curvedLines.js",
                      "~/Vendor/jquery.flot.spline/index.js"));

            // Star rating
            bundles.Add(new ScriptBundle("~/bundles/starRating/js").Include(
                      "~/Vendor/bootstrap-star-rating/js/star-rating.min.js"));

            // Star rating style
            bundles.Add(new StyleBundle("~/bundles/starRating/css").Include(
                      "~/Vendor/bootstrap-star-rating/css/star-rating.min.css", new CssRewriteUrlTransform()));

            // Sweetalert
            bundles.Add(new ScriptBundle("~/bundles/sweetAlert/js").Include(
                      "~/Vendor/sweetalert/lib/sweet-alert.min.js"));

            // Sweetalert style
            bundles.Add(new StyleBundle("~/bundles/sweetAlert/css").Include(
                      "~/Vendor/sweetalert/lib/sweet-alert.css"));

            // Toastr
            bundles.Add(new ScriptBundle("~/bundles/toastr/js").Include(
                      "~/Vendor/toastr/build/toastr.min.js"));

            // Toastr style
            bundles.Add(new StyleBundle("~/bundles/toastr/css").Include(
                      "~/Vendor/toastr/build/toastr.min.css"));

            // Nestable
            bundles.Add(new ScriptBundle("~/bundles/nestable/js").Include(
                      "~/Vendor/nestable/jquery.nestable.js"));

            // Toastr
            bundles.Add(new ScriptBundle("~/bundles/bootstrapTour/js").Include(
                      "~/Vendor/bootstrap-tour/build/js/bootstrap-tour.min.js"));

            // Toastr style
            bundles.Add(new StyleBundle("~/bundles/bootstrapTour/css").Include(
                      "~/Vendor/bootstrap-tour/build/css/bootstrap-tour.min.css"));

            // Moment
            bundles.Add(new ScriptBundle("~/bundles/moment/js").Include(
                      "~/Vendor/moment/moment.js"));

            // Full Calendar
            bundles.Add(new ScriptBundle("~/bundles/fullCalendar/js").Include(
                      "~/Vendor/fullcalendar/dist/fullcalendar.min.js"));

            // Full Calendar style
            bundles.Add(new StyleBundle("~/bundles/fullCalendar/css").Include(
                      "~/Vendor/fullcalendar/dist/fullcalendar.min.css"));

            // Chart JS
            bundles.Add(new ScriptBundle("~/bundles/chartjs/js").Include(
                      "~/Vendor/chartjs/Chart.min.js"));

            // Datatables
            bundles.Add(new ScriptBundle("~/bundles/datatables/js").Include(
                      "~/Vendor/datatables/media/js/jquery.dataTables.min.js"));

            // Datatables bootstrap
            bundles.Add(new ScriptBundle("~/bundles/datatablesBootstrap/js").Include(
                      "~/Vendor/datatables_plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"));

            // Datatables style
            bundles.Add(new StyleBundle("~/bundles/datatables/css").Include(
                      "~/Vendor/datatables_plugins/integration/bootstrap/3/dataTables.bootstrap.css"));

            // Xeditable
            bundles.Add(new ScriptBundle("~/bundles/xeditable/js").Include(
                      "~/Vendor/xeditable/bootstrap3-editable/js/bootstrap-editable.min.js"));

            // Xeditable style
            bundles.Add(new StyleBundle("~/bundles/xeditable/css").Include(
                      "~/Vendor/xeditable/bootstrap3-editable/css/bootstrap-editable.css", new CssRewriteUrlTransform()));

            // Select 2
            bundles.Add(new ScriptBundle("~/bundles/select2/js").Include(
                      "~/Vendor/select2-3.5.2/select2.min.js"));

            // Select 2 style
            bundles.Add(new StyleBundle("~/bundles/select2/css").Include(
                      "~/Vendor/select2-3.5.2/select2.css",
                      "~/Vendor/select2-bootstrap/select2-bootstrap.css"));

            // Touchspin
            bundles.Add(new ScriptBundle("~/bundles/touchspin/js").Include(
                      "~/Vendor/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"));

            // Touchspin style
            bundles.Add(new StyleBundle("~/bundles/touchspin/css").Include(
                      "~/Vendor/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css"));

            // Datepicker
            bundles.Add(new ScriptBundle("~/bundles/datepicker/js").Include(
                      "~/Vendor/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.min.js"));

            // Datepicker style
            bundles.Add(new StyleBundle("~/bundles/datepicker/css").Include(
                      "~/Vendor/bootstrap-datepicker-master/dist/css/bootstrap-datepicker3.min.css"));

            // Datepicker
            bundles.Add(new ScriptBundle("~/bundles/summernote/js").Include(
                      "~/Vendor/summernote/dist/summernote.min.js"));

            // Datepicker style
            bundles.Add(new StyleBundle("~/bundles/summernote/css").Include(
                      "~/Vendor/summernote/dist/summernote.css",
                      "~/Vendor/summernote/dist/summernote-bs3.css"));

            // Bootstrap checkbox style
            bundles.Add(new StyleBundle("~/bundles/bootstrapCheckbox/css").Include(
                      "~/Vendor/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"));

            // Blueimp gallery
            bundles.Add(new ScriptBundle("~/bundles/blueimp/js").Include(
                      "~/Vendor/blueimp-gallery/js/jquery.blueimp-gallery.min.js"));

            // Blueimp gallery style
            bundles.Add(new StyleBundle("~/bundles/blueimp/css").Include(
                      "~/Vendor/blueimp-gallery/css/blueimp-gallery.min.css", new CssRewriteUrlTransform()));

Contact

If you have any question or find some issue feel free to contact with us on

support@webapplayers.com

HOMER ASP MVC5 Responsive WebApp

Technology and structure

Structure

Folders and files

Layout structure

Layout structure - file

Layout structure

Page Script

Adding Plugin (special styles file and scripts)

Option - fixed sidebar

Option - fixed navbar

BundleConfig.cs

Contact

HOMER
ASP MVC5 Responsive WebApp