Goofy Admin is a WebApp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3.3.7 stable version. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Goofy Admin is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.
Use of these tools are completely optional.
npm install -g grunt-cliand npm install grunt --save-dev
After installing all the required frameworks, components and dependencies, go to the root folder of and run the following commands from the command line:
If everything was installed correctly, you should see the jQuery version of Goofy running in http://localhost:9000/
Above all procedures are optional you can directly use the compiled file(dist/) which we provided you.
HTML ├── │ └── Goofy/ │ └── dist │ └── Distribution pkg(Ready to Use) │ └── src │ └── Source pkg │ └── vendors │ └── bower_components │ └── All Required plugins files │ └── All Html Pages │ └── .bowerrc │ └── .bowerrc │ └── .jshintrc │ └── bower.json │ └── package.json └──
<body> <!-- Preloader --> <div class="preloader-it"> <div class="la-anim-1"></div> </div> !-- /Preloader --><!-- Wrapper --> <div id="wrapper"> <!-- Top Menu Items --> <nav class="navbar navbar-inverse navbar-fixed-top"> ------ <!-- Left Sidebar Menu --> <div class="fixed-sidebar-left"> ------ <!-- Right Sidebar Menu --> <div class="fixed-sidebar-right"> ------ <!-- Right Sidebar Backdrop --> <div class="right-sidebar-backdrop"> ------ <!-- Main Content --> <div class="page-wrapper"> <!-- Title --> <div class="row heading-bg"> ------ <!-- Breadcrumb --> <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12"> ------ --content-- <!-- Footer --> <footer class="footer container-fluid pl-30 pr-30"> </body> </html>
please use below classes bg colors:
bg-greenbg-bluebg-redbg-pinkbg-yellowbg-lightbg-dark
please use below classes for text colors:
For green use .txt-successFor blue use .txt-primaryFor pink use .txt-infoFor yellow use .txt-warningFor red use .txt-dangerFor white use .txt-lightFor black use .txt-darkFor grey use .txt-grey
main scss file in present in src folder.
| File | Description |
|---|---|
style.scss
|
you can update main style using this scss file. |
style-dark.scss
|
you can update main style for dark version using this scss file. |
_bourbon.scss
|
for all styles of bourbon css. |
mixins.sess
|
for all preset mixins. |
custom js file in present in dist/js folder.
| File | Description |
|---|---|
init.js
|
all custom js required for Goofy. |
**-data.scss
|
all js with **-data are releted with individual pages. |
All index files represent that how can you use all the widgets,tables,charts etc. Other html files are created using there original names like dropzone.html, chartist.html etc. You can easily edit them.
all js which are present in dist/js folder with **-data are releted to individual pages. We used nomenclature related to inividual html page like chartjs-data.js for chats.html, bootstrap-wysuhtml5-data.js for bootstrap-wysihtml5.html etc.
You can change the logo by either replace it from img folder or you can edit it from HTML file.
<div class="logo-wrap"> <a href="index.html"> <img class="brand-img" src="../img/logo.png" alt="brand"/> <span class="brand-text">Goofy</span> </a> </div>
We provided 6 header styles which you can use, you have to add below classes with .wrapperclass.
.theme-1-active.theme-2-active.theme-3-active.theme-4-active.theme-5-active.theme-6-active
<div class="wrapper box-layout theme-1-active pimary-color-blue">
Add class .carousel-caption.
<!-- START carousel--> <div id="carousel-example-captions" data-ride="carousel" class="carousel slide mt-40"> <ol class="carousel-indicators"> <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-captions" data-slide-to="1"></li> <li data-target="#carousel-example-captions" data-slide-to="2"></li> </ol> <div role="listbox" class="carousel-inner"> <div class="item active"> <img src="dist/img/big/img1.jpg" alt="First slide image"> <div class="carousel-caption"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> <div class="item"> <img src="dist/img/big/img2.jpg" alt="Second slide image"> <div class="carousel-caption"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> <div class="item"> <img src="dist/img/big/img3.jpg" alt="Third slide image"> <div class="carousel-caption"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> <a href="#carousel-example-captions" role="button" data-slide="prev" class="left carousel-control"> <span aria-hidden="true" class="fa fa-angle-left"></span> <span class="sr-only">Previous</span> </a> <a href="#carousel-example-captions" role="button" data-slide="next" class="right carousel-control"> <span aria-hidden="true" class="fa fa-angle-right"></span> <span class="sr-only">Next</span> </a> </div> <!-- END carousel-->
Default version of tab add tab-struct custom-tab-1class.
<div class="tab-struct custom-tab-1 mt-40"> <ul role="tablist" class="nav nav-tabs" id="myTabs_7"> <li class="active" role="presentation"><a aria-expanded="true" data-toggle="tab" role="tab" id="home_tab_7" href="#home_7">active</a></li> <li role="presentation" class=""><a data-toggle="tab" id="profile_tab_7" role="tab" href="#profile_7" aria-expanded="false">inactive</a></li> <li class="dropdown" role="presentation"> <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop_7" href="#" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul id="myTabDrop_7_contents" class="dropdown-menu"> <li class=""><a data-toggle="tab" id="dropdown_13_tab" role="tab" href="#dropdown_13" aria-expanded="true">@fat</a></li> <li class=""><a data-toggle="tab" id="dropdown_14_tab" role="tab" href="#dropdown_14" aria-expanded="false">@mdo</a></li> </ul> </li> </ul> <div class="tab-content" id="myTabContent_7"> <div id="home_7" class="tab-pane fade active in" role="tabpanel"> <p>Lorem ipsum dolor sit amet, et pertinax ocurreret scribentur sit, eum euripidis assentior ei. In qui quodsi maiorum, dicta clita duo ut. Fugit sonet quo te. Ad vel quando causae signiferumque. Aperiam luptatum senserit eu vis, eu ius purto torquatos vituperatoribus.An nec fastidii eligendi molestiae.</p> </div> <div id="profile_7" class="tab-pane fade" role="tabpanel"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p> </div> <div id="dropdown_13" class="tab-pane fade " role="tabpanel"> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p> </div> <div id="dropdown_14" class="tab-pane fade" role="tabpanel"> <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p> </div> </div> </div>
Default version of accordions.
<div class="panel-group accordion-struct" id="accordion_1" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading activestate" role="tab" id="heading_1"> <a role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse_1" aria-expanded="true">collapse one</a> </div> <div id="collapse_1" class="panel-collapse collapse in" role="tabpanel"> <div class="panel-body pa-15"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading_2"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse_2" aria-expanded="false">collapse two </a> </div> <div id="collapse_2" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body pa-15"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading_3"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse_3" aria-expanded="false" >collapse three</a> </div> <div id="collapse_3" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body pa-15"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, inable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading_4"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse_4" aria-expanded="false"> collapse four</a> </div> <div id="collapse_4" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body pa-15"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, inable VHS. </div> </div> </div> </div>
For all the layout you have to add below classes with .wrapperclass.
For boxed layout add .box-layoutFor dark version use grunt sass-darkFor rtl version use grunt sass-rtlFor scrollable header add .scrollable-nav
We provide 8 primary color scheme which you can use, you have to add below classes with .wrapperclass.
.pimary-color-red.pimary-color-blue.pimary-color-green.pimary-color-yellow.pimary-color-pink.pimary-color-orange.pimary-color-gold.pimary-color-silver
We provided working weather app with the help of yahoo API.
For editing the app first open simpleweather-data.js file,If you want to use weather app with forcast of seven day use
/*With Forcast*/
$.simpleWeather({...
If you want to use weather app withot forcastuse
/*Without Forcast*/
$.simpleWeather({...
Note : Images are not included in downloaded version source.
If you have any questions that aren’t covered in this article, please mail us at contact@hencework.com