Nasrul Hazim Bin Mohamad

Laravel: Import Templates into Laravel

Apr
27

Assalamualaikum,

We know, there’s millions of web templates available out there – the clean look, corporate look, modern, minimalist. You name it, either it is free or paid version, usually it come in HTML, JS and CSS format. It’s hard to find template that is ready with Laravel.

Previously, here are some of the approaches I did, to get the template into Laravel application.

  1. Download the template, copy the assets, organise them in public directory. That’s ok, but I need a way to keep everything in resources/assets.
  2. Download the template, mimic / copy the important part of the template – CSS / JavaScript – place it in resources/assets and start writing codes for front-end assets, then compile using Laravel Mix.
  3. Get the list of dependencies used for the theme, manually install using yarn add..., then create scripts – CSS / JavaScripts – in resources/assets, then compile using Laravel Mix.

All these some of my previous approaches in importing templates into Laravel application.

Yesterday, I have a chance experimenting on new method. Here the workflow:

  1. Clone / Download the template into resources/assets/templates/
  2. In terminal, go into resources/assets/templates/the-template/, run npm install && npm run build – depending on your template selection, sometimes it is required to compile the template, but there is templates that did not require you to compile.
  3. Then in webpack.mix.js, copy all assets generated in resources/assets/templates/the-template/ to public/the-template.

Then you are done! You can start use the asset() helper like asset('the-template/js/vendor.js'), and so on in your layouts.

Following an example of the templates I have compile and export to public folders – but I did not implement in the new layout, as it require a lot of efforts to create components and use all the classes from the template.

Template Into Laravel

Hope my explanation will make you guys clear, how to import templates into Laravel projects – 3 main steps: git clone, build(optional), copy compiled assets with mix to public directory.

Thanks!

Bootstrap Studio: 2.0.0 Review

Jan
26
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

Dec
31

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

Dec
17

CSS

.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%);
    }
}

jQuery

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

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});

Reference: Bootstrap Theme “Company”

CSS: Custom Scrollbar

Nov
22

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

May
27

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>
 </div>

The CSS

.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(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

References:

  1. Ajax Events
  2. JsFiddle
  3. FontAwesome

GeoServer – GetFeatureInfo Template Data Model (structure)

Mar
21

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)
	[0]
		- 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
	[n]
	
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;h3&gt;${type.name}&lt;/h3&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;
&lt;p&gt;${attr.someFieldName.value}&lt;/p&gt;

The result may display as below:

This is type name

some field name value

Reference: http://docs.geoserver.org/2.1.4/user/tutorials/freemarker.html

Fullscreen Pageflip Layout | Codrops

Jan
21

Putting CSS Clip to Work: Expanding Overlay Effect | Codrops

Jan
20