Nasrul Hazim Bin Mohamad

Bootstrap Studio: 2.0.0 Review

Bootstrap Studio 2.0.0

Bootstrap Studio 2.0.0


Bootstrap Studio 2.0.0 has been released. New features have been added – as per screen shot below.

So, I’ve tested some of the new features – multiple CSS, pages and JavaScript. I’m trying to use Animate.css & WOW.js.

Here my review:

  1. PAGES – The pages are working great! with Duplicate features, that’s awesome! Except one thing – if one of your menu(for example) change, you need to update all the pages – workaround make sure you use custom components so that you can pull / push any changes to the component.
  2. STYLES – as what it mentioned – yes you can have multiple CSS! But I’m looking for to be able to import external CSS perfectly(currently I just copy-paste the animate.css, but it’s not working – have to export & update my animate.css)
  3. JavaScript – Again, importing JavaScript will be good(currently I’m copy-paste the WOW.js into new JavaScript) and the scripts is in alphabetical order! I hope I can manage my JavaScript position.

Below are some screenshots of the new Bootstrap Studio 2.0.0 and here the demo (with a little tweak to ensure animate.css & WOW.js are working) 🙂

Bootstrap Studio 2.0.0: Design Features

Bootstrap Studio 2.0.0: Design Features

Bootstrap Studio 2.0.0: Pages

Bootstrap Studio 2.0.0: Pages

WordPress: Using Bootstrap In WordPress Admin


First of all – you need LESS compiler – for Windows, I use winless – please download & install it.

Next, grab the Bootstrap ( I use version 3.3.4, newer version broken when compiling the LESS ).

Extract the Bootstrap to a folder and then create a LESS file called bootstrap.less and paste in the following code:

.bs-wrapper {
   @import (less) url('bootstrap.css');

Now open up winless, and add folder where your Bootstrap CSS directory, and then on file bootstrap.less output file, you may name it as wp-admin-bootstrap.css.

Winless - Choosing the output

Winless – Choosing the output

Next, you just need to use wp_enqueue_style() to include the generated CSS – wp-admin-bootstrap.css

Slide in Elements



.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);


$(window).scroll(function() {
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {

Reference: Bootstrap Theme “Company”

CSS: Custom Scrollbar



/* Let's get this party started */
::-webkit-scrollbar {
    width: 9px;
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background: rgba(242,242,242,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    cursor: pointer !important;
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(242,242,242,0.3); 
::-webkit-scrollbar-thumb:hover {
  background: rgba(242,242,242,0.5); 

Reference: Custom Scrollbar

jQuery: Create Loading Indicator with ajaxSend & ajaxComplete


Referring to my earlier post jQuery: Show Loading…, a better way to show & hide loading icon – by binding to ajaxSend and ajaxComplete event.

The Html Markup

 <div id="loading" class="overlay-loading">
    <i class="loading-icon fa fa-5x fa-circle-o-notch fa-spin"></i>


.overlay-loading {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 2000;
.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;

The JavaScript

$(document).bind("ajaxSend", function(){
 }).bind("ajaxComplete", function(){


  1. Ajax Events
  2. JsFiddle
  3. FontAwesome

GeoServer – GetFeatureInfo Template Data Model (structure)


Extend from this GeoServer – Custom Get Feature Info Display

Knowledge requirement – Freemaker

The standard template files is header.tpl, content.tpl, footer.tpl.

header.tpl usually where JavaScript, CSS, meta tag, title placed here.

footer.tpl where you put your HTML page footer, Copyright, etc.

content.tpl where we going to iterate through all the features to display interactive UI. But here, I’m going to explain the structure of all available variables.

features (array of Feature)
		- fid
		- typeName
		- attributes
			-&gt; name
			-&gt; type
			-&gt; isGeometry
			-&gt; value
		- type
			-&gt; name
			-&gt; title
			-&gt; abstract
			-&gt; description
			-&gt; keywords
			-&gt; metadataLinks
			-&gt; SRS
			-&gt; nativeCRS
type (object of Feature Map)
	- name
	- attributes
		-&gt; name
		-&gt; type
		-&gt; isGeometry

Accessing the variables as following:

&lt;!-- Accessing Feature Type Name --&gt;

&lt;!-- Accessing Features at index 0 and assign to a variable named feature --&gt;
&lt;#assign feature = features[0]&gt;

&lt;!-- Get feature's attributes values and assign to a variable named attrs --&gt;
&lt;#assign attrs = feature.attributes&gt;

&lt;!-- Display an attribute --&gt;

The result may display as below:

This is type name

some field name value


Fullscreen Pageflip Layout | Codrops


Putting CSS Clip to Work: Expanding Overlay Effect | Codrops