Tag: vertical

Ionic grid system

Today lets play with Ionic grid system – it’s built with CSS Flexible Box Layout Module standard, hence it supports all the devices which ionic supports.

Topics Covered
1. Basics of row, column
2. even spacing of column
3. explicit column sizing
4. column offset
5. column positioning
6. row positioning – Going vertical
7. responsive grid

Getting started
To get started from scratch, please visit Getting Started With IONIC APP. Get your IONIC app template ready and continue with this video tutorial.

Software Versions used for the demo
1. Node: v4.2.6
2. Cordova: 6.0.0
3. Ionic: 1.7.14
4. android: Android 6.0 (API level 23)
5. OS: Demo showed on Windows 10 Operating System.

I’ve installed ionic tabs template and am editing tab-dash.html file inside www/templates folder.


[youtube https://www.youtube.com/watch?v=IYw0n9hEqMg]

YouTube Link: https://www.youtube.com/watch?v=IYw0n9hEqMg [Watch the Video In Full Screen.]



Basics of row and column

    <span class="row">
       <div class="col">.col</div>
       <div class="col">.col</div>  
    </span>

rows are specified with class row and columns with class name col

Even spacing of columns

    <span class="row">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

In above example all columns take up 20% of space depending on the screen width of the device. i.e., 100/5 = 20. There are 5 columns.

Explicit column spacing

    <span class="row">
       <div class="col col-50">.col-50</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

Here the first column takes 50% of the width and the other 2 columns share the width equally i.e., 25% each.

Column offset

    <span class="row">
       <div class="col col-offset-25 col-25">.col-25</div>
       <div class="col col-25">.col-25</div>  
       <div class="col col-25">.col-25</div>  
    </span>

Above code leaves 25% offset at the beginning, then a column of width 25% followed by 2 more columns of 25% width.

Column positioning

    <span class="row">
       <div class="col col-top">.col-top</div>
       <div class="col col-center">.col-center</div>  
       <div class="col col-bottom">.col-bottom</div>  
       <div class="col">
        1 <br />2 <br />3 <br />4
       </div>
    </span>

The first column aligns itself to the top, the second one to the center and the last one to the bottom.

Row positioning – Going vertical

    <span class="row row-center">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">
        1 <br />2 <br />3 <br />4
       </div>
    </span>

row-center class makes the row align itself to the center, row-top makes it align itself to the top and row-bottom makes row to align itself to the bottom.

responsive grid

    <span class="row responsive-sm">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

You can see its effect only on real devices. You must test it with real devices having different screen size.

responsive-sm for devices smaller than landscape.
responsive-md for devices smaller portrait tablet.
responsive-lg for devices smaller than landscape tablet.

UI
Using this simple ionic grid system we can make our applications User Interface to suit our applications needs.

Further ..
For further configuration, each class uses a Sass variable that can be changed to your liking. There’s also a responsive-grid-break mixin you can use to create your own grid classes.

Custom Transformation in Canvas: HTML5

Today lets learn how to apply custom transformation to our drawings on canvas.

custom transformation canvas html5

In this video tutorial, we draw 3 rectangles and show you how scale, skew and move properties of custom transform methods work.

Custom Transformation Methods
transform(a, b, c, d, e, f);
setTransform(a, b, c, d, e, f);

custom transformation matrix canvas html5

Custom transformation takes the form of a square matrix, as shown above.

a – Scales drawing horizontally
b – Skews drawing horizontally
c – Skews drawing vertically
d – Scales drawing vertically
e – Moves drawing horizontally
f – Moves drawing vertically

Recommended Read:
Translate Transformation in Canvas: HTML5
Scale Transformation in Canvas: HTML5
Rotate Transformation in Canvas: HTML5

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Transform method
myScript.js

1
2
3
4
5
6
7

context.fillStyle = "blue";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0.5, 0.5, 1, 10, 10);
 
context.fillStyle = "red";
context.fillRect(5, 5, 150, 75);

transform() method changes the origin of the canvas to (x, y) = (10, 10) and scale horizontally and vertically, so that we can see it drawn on the canvas. Also skews by 0.5 both horizontally and vertically.

JavaScript file: Transform method is Additive
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12

context.fillStyle = "blue";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0.5, 0.5, 1, 10, 10);
 
context.fillStyle = "red";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0, 0, 1, 20, 200);
 
context.fillStyle = "gray";
context.fillRect(5, 5, 150, 75);

Using transform() method we draw third rectangle at (x, y) = (20, 200); And horizontal and vertical skew is made 0, but still a skew of 0.5 is applied both in horizontal and vertical direction, since the transform() method written before for second rectangle is influencing it.

JavaScript file: setTransform method is not Additive
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12

context.fillStyle = "blue";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0.5, 0.5, 1, 10, 10);
 
context.fillStyle = "red";
context.fillRect(5, 5, 150, 75);
 
context.setTransform(1, -0.5, 0, 1, 20, 200);
 
context.fillStyle = "gray";
context.fillRect(5, 5, 150, 75);

setTransform() method is non-additive in nature. It is independent of its previous transformation matrix. All other parameter and behavior are same with respect to transform() and setTransform() methods.

Custom Transformation in Canvas: HTML5


[youtube https://www.youtube.com/watch?v=9eyr9MQNAuM]

YouTube Link: https://www.youtube.com/watch?v=9eyr9MQNAuM [Watch the Video In Full Screen.]



JavaScript file: Full Free Code
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.fillStyle   = "blue";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0.5, 0.5, 1, 10, 10);
 
context.fillStyle   = "red";
context.fillRect(5, 5, 150, 75);
 
context.setTransform(1, -0.5, 0, 1, 20, 200);
 
context.fillStyle   = "gray";
context.fillRect(5, 5, 150, 75);
}
}

Skewing can be done both in positive and negative direction, as shown in the video. If you previously used scale() and/or rotate() transformations that will be additive to transform() method, and will have no influence on setTransform() method.