Using Flexbox CSS Part 2

Flexbox CSS in part 1 discusses about its use in aligning boxes inside a container. It further discusses arranging boxes vertically or horizontally. Another part discusses widths of the boxes and how we order the boxes inside the container.

In this article, we are going to discuss:

  • aligning boxes inside the container
  • justifying contents
  • making flexbox css responsive and mobile friendly
  • flex wrapping

Aligning Boxes Inside the Container

To align boxes inside container needs to add the align-items property to the container selector. Such that:

<style>
  .box-container {
    display:flex;
    align-items:flex-start;
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin:0px 2px;
  }
  .box-1 {
    flex:2; 
  }
  .box-2 {
    flex:1;
  }
  .box-3 {
    flex:1;
  }
</style>
<div class="box-container">
  <div class="box-1">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-2">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-3">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

There are three possible values of the align-items property. Namely, they are flex-start, flex-end or center. When a flex-start is used like the code above, the resulting boxes would look like:

align-items:flex-start
Flexbox align-items:flex-start

To learn further, you may just experiment with the other values and see what happens.

Justifying Contents

Another feature of Flexbox CSS, is justifying contents. This is done inside the container by adding justify-content property to the container selector.

<style>
  .box-container {
    display:flex;
    justify-content:center;
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin: 0 2px; 
  }
  .box {
    flex-basis:20%;
  }
</style>
<div class="box-container">
  <div class="box">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

The code above has all the boxes having flex-basis equal to 20%. This property (flex-basis) is equivalent to width. In fact, some implementations use the width property. Furthermore, the boxes are enclosed in a container that has a property justify-content. And this property is set to center. The resulting HTML when rendered may look something like this:

justify-content: center
Flex boxes justified center.

Other possible values of justify-content are: flex-start, flex-end and space-between and space-around. You may experiment with these values by replacing the above code.

A particular value that is very much useful is space-around. If you use space-around, you may not have the margin property of the boxes anymore. Unlike space-between, this will also add a space on the start and end part.

Making Flexbox Reponsive and Mobile Friendly

If we’re going to resize our browser to simulate responsiveness, we will see that flexbox by default isn’t really responsive. To remedy this, we need to enclose our container selector inside a media query. For example:

@media(min-width:768px){
    .box-container {
      display:flex;
      justify-content:space-around;
    }
  }

The media query will implement only flexbox if the screen is wider than 768 pixels. You may even add another media query such that if the screen width is lesser than that, it will flex vertically. That is, we use flex-direction: column for the container selector.

Content Wrapping

What about if we have a lot of boxes inside the container? Comes now the flex-wrap property. If we set it to wrap, a new row of boxes will be created if the current row is filled up. For example:

<style>
  .box-container {
    display:flex;
    justify-content:space-around;
    flex-wrap: wrap;
  }
  
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin: 5px 0px
  }
  .box {
    flex-basis:20%;
  }
</style>
<div class="box-container">
  <div class="box">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 4</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 5</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 6</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 7</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 8</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

When implemented, the above code will look like:

flexbox wrapping
Flexbox CSS wrapping

So, there you have it: our two part notes for Flexbox.

Please follow and like us:
error

Using Flexbox CSS Part 1

Flexbox or Flexible Box is a layout model in CSS used to easily align and order elements in an HTML page. To visualize it, flexbox is used to arrange boxes (components) inside a box (container). So you don’t have to code much in your CSS.

In previous styling models, designers use floats and design percentages to style inside boxes. But, gone are the days with Flexbox.

We could say that with Flexbox we:

  • say goodbye to floats
  • have a model that is responsive and mobile friendly
  • positioning children elements is now very easy
  • ordering elements would not require changes on HTML anymore

Let us dive in to some coding to see how Flexbox works. You can go over the code in scratchpad.

The basic Flexbox

<style>
  .box-container {
    display:flex;   
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
  }
  .box-1 {
      
  }  
</style>
<div class="box-container">
  <div class="box-1">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-1">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-1">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

The code above will produce 3 boxes each having a 1 pixel border arranged horizontally.

Three boxes arranged horizontally.
3 boxes arranged horizontally

The Column Arranged Flexbox

If we alter the css such that we add the property flex-direction and set its value to column like for example:

.box-container {
    display:flex;   
    flex-direction:column;
  }

The result is:

Three boxes arranged in column
3 boxes arranged in column

Flexbox widths

<style>
  .box-container {
    display:flex;
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin:0px 2px;
  }
  .box-1 {
    flex:2; 
  }
  .box-2 {
    flex:1 
  }
  .box-3 {
    flex:1 
  }
</style>
<div class="box-container">
  <div class="box-1">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-2">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-3">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

In the code above, we changed classes on two boxes such that they are now box-2 and box-3 respectively. After that, we style each div inside .box-container to have a 2 pixel margin on the left and right side. We then alter the styling by adding a flex property to the selectors box-1, box-2 and box-3 to 2, 1 and 1 respectively.

The result is:

Three boxes with a wider first box

So this goes to say that using the flex property we can set widths to our boxes. In our case, the whole container is now divided into 4 spaces (sum of the flex values) with the first box occupying two spaces (as set in it flex value of 2). The rest occupies only one space each since each has flex equal to 1.

Flexbox Ordering

We’ll try to alter the code above by setting the CSS styling for the 3 boxes to:

.box-1 {
    flex:2; 
    order: 2;
  }
  .box-2 {
    flex:1;
    order: 1;
  }
  .box-3 {
    flex:1;
    order: 3;
  }

The result would be

The boxes reordered

What we did is to add the order property to 2, 1, 3 to the selectors .box-1, .box-2 and box-3 respectively. In the result, we see that box 2 comes first. This is because, box-2 has order property equal to 1.

To recap, in this article we:

  • have the basic flexbox that has boxes arranged horizontally by adding display:flex to the CSS of the container’s selector
  • then we have the boxes arranged vertically by adding flex-direction property to the container’s selector and setting it to column
  • after that, we changed the box widths with the property flex and setting it to different integer values
  • we then changed the order of the boxes using the order property

So, there you go. A followup to this article will discuss more properties of Flexbox.

Please follow and like us:
error

AngularJS – How to Code from Scratch

AngularJS  or Angular JS is a front-end application framework based on Javascript. It adheres to the MVC (Model View Controller) architecture as well as MVVM (Model View View Model). Google is the main developer for AngularJS. However, it is also maintained by a lot of other developers. This makes AngularJS one of the most active open-source development frameworks.

To keep me abreast with this framework, I am planning to make a series of posts as tutorials. This will be the first part. Other parts are here:

On this tutorial, we are going to go through a development of a common app. To start off, we need NPM installed.

Installing AngularJS CLI

Once you have NPM, you can install a global instance of Angular CLI:

> npm install -g @angular/cli

The above command may take a while to do its thing. Just be patient. This will install a global angular CLI (command line interface) that we can call to create our project. After that, you may now start.

First, let us confirm whether it is properly installed by checking its version. The appropriate command is

> ng --version

As of this writing, I’m using Angular 7.1.3. On your command line you should expect to see something like this:

AngularJS CLI version
Fig. 1. AngularJS CLI Version information

Creating a AngularJS New Project

Now, lets go to creating a new project. Creating a project on our desired project folder is simply done with just one command. So, if you want to call your project my-app we can just do:

> ng new my-app

When we call this command, it will show us a dialog asking us whether we 1. use routes, 2. what css format we are going to use. For number 1, I answer yes because I’m going to use Angular routing. On the second dialog, I answer SCSS since I’m familiar with SASS or Syntactically Awesome Style Sheets.

As a result, we will see inside the my-app folder the following directory structure as shown:

AngularJS directory Structure
Fig 2. AngularJS Directory Structure.

Serving your Application

Once you verified that you get similar directory structure as above, you can now start your server. To start the server, we just do the command:

> ng serve

You can now open a browser and point it to http://localhost:4200. You may also add a switch -o to the command to open your default browser to that address.

Fig. 3. What you’ll see on your AngularJS App

If you see this image, you successfully created your AngularJS application. So, there you have it – Congratulations!

Please follow and like us:
error

Javascript Rest Operators and the “arguments” Variable

javascript rest operator and the argument variable
read about javascript rest operator and the argument variable

This article is all about javascript rest operators and how it could be used in javascript programming. A little discussion is also included for the arguments variable and how to process it inside a function.

Have you ever thought of how some Javascript built-in functions like Math.max() contain multiple arguments? Yes, it is possible – javascript functions may have an arbitrary number of arguments.

This is made possible with the javascript rest operators and it looks like this:

function getSum(...addends) {
  let sum = 0;
  for (let addend of addends) sum += addend;
  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

As you see in the function’s argument, we added three dots before our argument: addends. The three dots (…) also called the rest operator tells the function to merge the arguments in the function into an array.

In the function, we can then process the inputs similar to how we process arrays.

We must follow some rules though when we use rest operators. For example, it is not possible to place the rest operator at the first or middle part if your function has multiple arguments.

function person(...arguments, firstname, lastname) {
//the argument arrangement above does not make sense...
}

The above function does not make sense. So we must arrange the arguments like this:

function person(firstname, surname, ...args){
//this is clearer and this will work
}

Simply put: we must place the rest operator as the last argument.

The arguments variable

Another useful javascript trick is not placing arguments in the function. We may then process all inputs though with the argument variable. The argument variable is an array and we can process it like how we treat arrays. For example:

function testing(){
  for(var args of arguments){
    //arguments is the variable fed to testing function
    console.log(arg); //lets just output each argument
  }
}

testing('a','b');
testing('a','b','c');

However, creating functions like this would result in readability problems. The reason is that we don’t know what inputs we’re feeding our function. The arguments variable though is NOT really an array such that Array.map() may not work.

Another problem is: arguments can not be used with arrow functions. This will NOT work:

const arrowfunc = () => {
  for(var arg of arguments){
    console.log(arg);
  }
}

Take note that arrow functions cannot have their own this. They can not have their own arguments variable also.

Please follow and like us:
error

Laravel Notes

Laravel is a PHP development framework that adheres to the MVC (Model, View and Controller) paradigm. The framework was intended to be a better alternative to Codeigniter which is a different framework. It surpassed Codeigniter though in a lot of areas. These areas include but not limited to: built-in support for authentication, localisation, models, views, sessions, routing and other mechanisms.

Furthermore, Codeigniter development has ceased to evolved. New features are non existence making this framework obsolete. As a result, Laravel is now the goto framework for PHP developers.

Here are my notes to guide me when developing web applications using Laravel. Take note however, that you need to have PHP and Composer installed.

Creating a project

> composer create-project laravel/laravel project-folder #create project.

Invoking this command will create a project with project-folder as the folder of the project. This may take a while so you need to be patient on this. Once this is done, we may now start development of our PHP web application.

 

Basic Routing

Routing is essential to applications. We may set our routes on routes/web.php:

Route::get('/', function(){
 return "Hello World.";
});

Route::get('/about', function(){
 return view('pages.about');
});

To render our view, we may have the following code on resources/views/pages/about.blade.php

This is the about page.

We may call routes pointing to some information. These are called dynamic routes. For example, to view a certain person’s information, you may add the following code to your route.

Route::get('/person/{id}', function($id){
 return "this is person: " . $id;
});

The $id parameter here is a key to identify the person. We may use this variable to access information saved to the database.

Creating Controllers

> php artisan make:controller PagesController

PascalCase on the controller name. This will create a file under: app/Http/Controllers/PagesController.php

php artisan make:controller PostsController --resource

The above command will add a controller and CRUD placeholder functions (Create, Retrieve, Update and Delete) to it.

Creating a Model

> php artisan make:model Posts -m #when you want a migration script included
php artisan tinker

 

 

 

Please follow and like us:
error