Why we choose Twitter Bootstrap for our PSD to HTML conversion?

Twitter bootstrap is very popular CSS framework among large set of front end developers all over the world. I have listed several features of the bootstrap framework stating why we select it for our PSD to HTML conversion

twitter bootstrap

Web designers and web agencies would like if we use Twitter Bootstrap framework

You can see there are lot of CSS framework in the web, some framework progress well and they give regular updates, version releases and support too. Some frameworks are far behind to meet the requirements of web technology. But since Twitter Bootstrap hit the scene it seems that all direction changes. Now lot of developers and designers addicted to twitter bootstrap. AS a PSD to HTML conversion team we need to cater this demand now

In these days most of the designers design web site using grid system. Most designers love to get their code done by using Twitter Bootstrap framework. So our development team is doing our all work using the bootstrap. They really enjoy the code and client love that too

Developed by industry experienced developers

There are lots of CSS framework like 960 gs , blueprint, html Biolerplate, foundation for Zrub developers. We have worked with almost all above frameworks to make our PSD to HTML conversion. They are very good and I appreciate the team behind it because they have done very good service to web community. When it comes to Twitter Bootstrap, I would like to say that the effort they have put to develop this framework is quite amazing and it has all most all features which accommodate the today’s web needs and I hope it will serve well for next decade also

Doing Responsive layout is easy

Bootstrap framework has engineered to meet the mobile first approach, so it is very easy for us to develop responsive HTML code from your PSD deign. It has nice grid system which gives you responsive appearance in desktop, tablet and mobile devices

Cross browser compatible code

Bootstrap development team has tested this framework on all major browsers and we do not want to worry about the cross browser compatibility issues. By using the correct guide line you can get cross browser compatible HTML code very easily

You can end up with standard code pattern

Your team can develop solid code and apply all coding standers which Bootstrap team has used. They have got good documentation for each and every components.

Updating the framework files easy

Well documented code

In this bootstrap framework, you can see three major components called Base CSS, components and JavaScript
You can see following components under Base CSS

  • Typography
  • Code
  • Tables
  • Forms
  • Buttons
  • Images
  • Icons

You can see following components under components section

  • Dropdown
  • Button Groups
  • Button Dropdowns
  • Navs
  • Breadcrumbs
  • Pagination
  • Labels and badges
  • Typography
  • Thumbnails
  • Alert
  • Progress bars
  • Media Objects
  • Misc

You can see following components under javascript section

  • Modal
  • Dropdown
  • Scrollspy
  • Tab
  • Tooltip
  • Popover
  • Alert
  • Button
  • Collapse
  • Carousel
  • Affix

You can see that documentation has got good details and some working example code. You can copy and paste the code and apply your design for it

Frontend Development with LESS – Part 3

In the Part 1 of this article series we studied the basic of the LESS and in part 2 you can study the variables, mixing, nested rule and operators

Mixing with arguments
This is the normal way to write the mixing in LESS. You can see that .fonts class has been used as mixing
[code lang=”css”]
.fonts{
font-size: 12px;
font-weight: bold;
}
h1{
.fonts;
}
h2{
.fonts;
border:5px solid blue;
}
[/code]

If you want to change size of the fonts you can use the mixing with arguments as below. @size is the name of the parameter and default value of the parameter is 10px

[code lang=”css”]
.fonts(@size:10px){
font-size: @size;
font-weight: bold;
}

h1{
.fonts;
}
h2{
.fonts(12px);
border:5px solid blue;
}
[/code]

.fonts(12px) in line number 10 has been called with parameter value 12px

You can have the multiple argument too

Mixing with Pattern Matching

You can change the behavior of the mixing based on the parameter which you passed to the mixing

Alert message boxes for success,info and warning can be defined in LESS as shown below
[code lang=”css”]
.alert(success) {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}

.alert(info) {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}

.alert(warning) {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}

.alert(@_) {
border: 1px solid transparent;
border-radius: 4px;
margin-bottom: 20px;
padding: 15px;
}

@type: info;
.message {
.alert(@type);
}
[/code]

This is the normal CSS code of the above LESS code
[code lang=”css”]
.message{
background-color:#d9edf7;
border-color:#bce8f1;
color:#31708f;
border:1px solid transparent;
border-radius:4px;
margin-bottom:20px;
padding:15px
}

[/code]

@type: info;
.message {
.alert(@type);
}

If you want to create a CSS class called .message for info, you can use the above code

Guarded Mixing
You can apply the CSS based on the expression

Frontend Development with LESS – Part 2

In the Part1 of this article series we studied
– What is LESS
– Client side Java Script compilation
– SimpleLESS compilation

In this article we will study the language features of the LESS

Variables:

In programming languages, variables are placeholders to put values and you can change the values on the fly. But in LESS it is bit different although the basic idea is same. Variables in LESS can hold values for color, font-size etc

[code lang=”css”]
@font_size:12px;
@border_color:blue;
@border: 5px solid @border_color;

h1{
font-size: 15px;
}

h2{
font-size: @font_size;
border:@border;
}

[/code]

In this example , you can see that @font_size:12px; is a variable defined to hold the font size. You can use variable inside the variables too @border: 5px solid @border_color;

Mixings

This is a nice feature of the LESS which you can reduce number of lines what you have to write in CSS. Mixing allows you to define common properties and you can reuse the code throughout your less file

[code lang=”css”]
.fonts{
font-size: 12px;
font-weight: bold;
}
h1{
.fonts;
font-size: 15px;
}
h2{
.fonts;
border:5px solid blue;
}
[/code]

Nested Rules

If you are coming from programming background you know what the “nested” means. In LESS code , you can do nested coding to make well structured code and you can organize the code like a tree structure. By looking at the following example you can learn this concept easily

[code]
div{
width: 300px;
.row1{
color: blue;
display: block;
a{
font-size: 12px;
&:hover{
color:yellow;
}
}
}

.row2{
font-size: 20px;
display: block;
}
}
[/code]

In line 9 , you can see &:hover. This will tell LESS compiler to apply hover effect to immediate parent element

Another example

[code lang=”css”]
header {}
header nav {}
header nav ul {}
header nav ul li {}
header nav ul li a {}
[/code]

In LESS you can write:
[code lang=”css”]
header {
nav {
ul {
li {
a {}
}
}
}
}
[/code]

Operators

You can do operations on numbers, colors and variables in LESS

[code lang=”css”]
@font_size:14px;
@font_color:#FF530D;
h1{
font-size: @font_size;
color: @font_color;
}
h2{
font-size: @font_size – 4;
color:@font_color+#FF530D;
}
[/code]

In this example you can see how the operators are used for colors and numbers

Frontend Development with LESS – Part 1

Less Logo

Less is CSS-Preprocessor. What does it mean?
A scripting language that extends the CSS and get compiled to regular CSS syntax

Once you develop CSS with LESS you can have maintainable, themable and extendable CSS code

Why do you need CSS-Preprocessor ?

CSS is a very good language that you can lean easily and it has got very easy syntax to write the code. But CSS has got some drawbacks compare to other programming language. If you are using Java-script or PHP you will figure out that you can not define variable in CSS.

Think of this , You have used rounder corners in your buttons and some of the DIV boxes. Now you can to change the rounders corners of these boxes by 1px. So you have to change the code in several places since same CCS code is repeating for different elements. This is very tedious task if you have got lot changes. With LESS and SASS you can do these kinds of tasks very easily

We can identify the benefits of the CSS preprocessor as below
1 Reusable code
2 Nice and clean code
3 More flexibility to do on the fly
4 Ability to develop cross browser compatible code

In the following section we have have a look it it how to start the LESS coding

How to Start LESS Coding

Some people love LESS over SASS due to the simplicity of the setting up project and easy syntax

You can setup your project easily to work with LESS. If you have already CSS files you can name the CSS files to .less extension and start developing LESS code on top of it. Next you can use client side javascript less.js to compile the LESS code to CSS on page load. This is not recommended for large CSS file due to the performance issue

Other important thing is the syntax. When you learn LESS for the first time you will find how easy it is. You can spend few hours on the documentation of the LESS in http://lesscss.org/

You can do this in two ways

1 Using client side java script code
2 Using LESS compiler

(1) Using Client side java script code
Use Java-script less.js code to render the style.less file when you load the web page. This is not good practice because this will drop the performance of your website. But this is good for some testing and learning. do not use this method for production websites

Two issues with client side
1 Performance issues
2 Problem if Java Script is disabled in the browser

Following example shows how to use LESS coding with client side java script

index.html file
You can see the less.js and styles.less files are added to the head section

 

 

styles.less file
You can see variables @font_size,@border_color,@border defined in the less file. You can get understanding of these in later in this tutorials

What happen when you open the index.html in the browser?
Browser will load the styles.less file and compiled with less.js to generate CSS code

2 Using LESS compiler
Other method of developing the LESS is to use the LESS code compiler. In this method you write the code in LESS syntax and generate the CSS using compiler. So you have the normal CSS code to upload to your web server.

You need only client side library called SimpLESS you can download it from the website http://wearekiss.com/simpless . Please get the latest version of the software

To compile the less code to CSS, you just have to drag and drop the folder to SimpleLESS application as shown in the below diagram
Simple LESS

Next you click the update icon next to the styles.less. It will generate you CSS file to styles.css as below

Bootstrap 4 Alpha released

bs4-alpha-1024x689

Bootstrap has released its 4th version to coincide with its 4th Birthday.

What is new?

According to the Bootstrap they have done lots of changes. We have highlighted some of the important changes here. Although the alpha version is still incomplete we can get a idea of new features and behavior of the framework

Moved from LESS to SASS
They have moved from Less to Sass and you can now compile the code faster with Libsass. Now they have joined the massive community of Sass developers

Improved grid system

Bootstrap 4 have been overhauled its semantic mixing and they have added new grid tier to cater mobile devices properly

Opt-in Flexbox support here
This is the newest trending feature of the CSS. Changing just only a variable, you can recompile your CSS to use flexbox based grid system and its components

Dropped wells, thumbnails, and panels for cards
Cards are new to bootstrap but they do the same tasks which were done by wells, thumbnails and panels, in a better way

Consolidated all our HTML resets into a new module, Reboot
They have introduced new module to deal with CSS reset. Now you have control over the featured offered by the normalize.css. So you can control the CSS reset in a Sass file

Brand new customization options
If you need to change the CSS style like gradient, transitions and shadows of the component, you can simply update the Sass file and recompile it

Dropped IE8 support and moved to rem and em units.
If you need IE8 support you have to use Bootstrap 3. With new version they have dropped the IE 8 support and they have used best part of the CSS without using CSS hacks

Rewrote all our JavaScript plugins.
All Javascript components have been rewritten in ES6

Improved auto-placement of tool tips and popovers
They have used a tool called Tether to improve tool tips and popovers

Improved documentation.
Documentation has been rewritten with example and code snippets

And tons more!
Custom form controls, margin and padding classes, new utility classes, and more have also been included.

Ready to check it out? Then head to the v4 alpha docs!

Web Fonts usage in HTML Pages

What is web safe fonts?

These are the pre installed fonts in your computer system. All operating systems have not have common fonts but there can be some common fonts which are websafe

What is web font?

Web fonts are not pre installed on your computer. Fonts are downloaded when use open the webpage. While downloading the web page, fonts are rendered and applied to text. Major drawback of the web fonts is the reduction of the load time of the webpage

Webfont has different categories as below
1 TrueType
2 WOFF
This is developed by Mozila and other organizations to use on the web. This is the fastest webfont because they have used the compress version of the structure used by Open Type (OTF) and True Type (TTF)
3 EOT
4 SVG

Each one of these types is designed to work on different browser. You should have those four types to build a website.

In these days you can use non web safe fonts with @font-face CSS rule. So what you have to do is convert your font with @font-face generator

If you have non web safe fonts you can use the following font generators to generate them

Font Squirrel
This is one of the famous tools you can find for font generation. This tool already has some fonts and it has the facility to convert your non web safe font to web safe font. You can get @font-face rule for the fonts

Adobe has large collection of font in Adobe Edge Web Fonts which is Free to use for your project

Google Fonts has got large collection of web fonts which you can use for your project

Font Services

There are several hosted services for free fonts and licensed fonts. You can use following services. Since they use CDN you can speed up your website

Cloud Typography
Typekit
Fontdeck
Webtype
Fontspring
Typotheque
Fonts.com
Google Fonts
Font Squirrel

Do Browser Testing with Adobe Edge Inspect

inspect_1400_800-1024x585

What is Adobe Edge Inspect Browser Testing Tool?

When you develop responsive website you find very difficult to test pages in multiple devices. Normally you have to publish the html code to public url and open that url from different devices.

You can not debug the code. What you have to do is do the necessary changes and re-upload the code and refresh the link on those devices. This is very cumbersome process and it takes lot of time too

Adobe Edge Inspect helps to resolve those issues by letting you easily control browsing across multiple devices. It has code inspector and debugging tool to find the issues

How to install Adobe Edge Inspect?

Setting up Adobe Edge Inspect in your computer is super easy and you have to follow the following three steps

    1. Install Edge Inspect on your computer.
      You can do the installation via Creative Cloud
      Install the Chrome Extension.
      Click the Add To Chrome button to add the extension. Notice that the Edge Inspect icon now appears in the top right side of the location bar.
      Install the Edge Inspect app on your iOS and/or Android devices.
  • This is the app for iOS devices https://itunes.apple.com/app/id498621426

    Once the Installation completed in your computer you can pair your mobile devices. You can sync the devices with your computer to do remote inspection and debugging to see HTML/CSS/JS changes in real time on your devices

    Once you have installed the Google Crome Extension and Edge Inspector, follow these steps to get started:
    Ensure that the Adobe Edge Inspect application is open on your computer. In MAC computer you can see the icon like this
    egde-inspector icon

    1 Open Edge Inspect on iPhone or IPad which you installed earlier
    2 All devices should be on the same network as your computer, you should see your computer listed under Connections on each device. See the following screen of the iPhone
    3 When you click the connection, you will be given a password. After initial pairing you do not need to enter the password again

    4 Within Chrome on your computer, you’ll notice that a plus icon now displays on the Edge Inspect extension icon (generally, this extension is to the right of the address bar). Click on the icon, and type the passcode next to that device’s listing (see Figure 1) to complete the authorization process.
    You should begin seeing Edge Inspect on your device follow along with whatever you browse on your computer.

    Browse web pages with Edge Inspect

    Testing webpages with Adobe Edge Inspect is very simple. What you have to do is, just open the your turned Bootstrap html code in Google Crome. You can see the web page in all devices which are attached to Edge Inspect

    Debugging with Edge Inspect

    Screenshots with Edge Inspect

    Features

    • Synchronized Browsing & Refreshing
    • Remote Inspection
    • Screenshots
    • Cache Management
    • Localhost Support
    • Hide/show Edge Inspect UI on devices
    • URL Monitoring
    • HTTPS Support
    • HTTP Authentication Support
    • Amazon Kindle Fire Support

    Conclusion

    You need good cross browser testing tool if you are developing responsive website. Adobe Edge inspect is the right tool that our team is using to test our PSD to Bootstrap code. It is very easy to setup and it is easy to use. We use it with Google Crome extension. You can take the screen shot of the webpage when you test the pages in those devices. This tool will save your time and release your pain too

    Cross Browser Testing Tools for PSD to Responsive Bootstrap

    I have listed popular cross browser testing tools in 2015. These browser testing tools and very good and each of the has got unique features. Based on your requirement you can select the best one for your front-end development work

    There are several good cross browser testing software developed by different companies

    I did not come across any open source cross browser testing tools and to use all those tools you have to pay monthly fee.

    You do not find any free downloadable cross browser testing tool in this list. All these cross browser testing tools work online and you have to pay monthly subscription fee to use it.

    TestingBot


    http://testingbot.com

    TestingBot has manual testing and automated testing methods. They have got nice feature called Tunnel where you can test your website straight from local machine , LAN, on a server via VPN

    Highlighted Features
    -This company is operating in Europe, meaning faster speed for people in Europe
    -Guaranteed an untouched, pristine virtual machine for every test. Some companies share the same virtual machine, leading to people installing virusses
    -Full screen manual testing with responsive resizing, if you resize your browser, the browser in our -virtual machine will also resize so you can test responsive websites.
    -Support for multiple screen-resolutions during manual testing
    -iOS + different flavors of android testing
    -This cross browser testing tool is free for 100 minutes when you sign up – no credit card needed

    Ghostlab


    http://vanamco.com/ghostlab/

    Highlighted Features
    – synchronized browsing (actions performed in one browser are replicated on all the connected clients)
    – remote inspection on mobile devices and browsers; inspection and live-edits are also synchronized
    – debugging JavaScript
    – local files are watched, and the page is reloaded when a file changes. Style injection (soft reloads for CSS) is supported
    – Preprocessors to compile Sass, Less, Stylus, Jade, HAML, CoffeeScript, TypeScript

    CSS Selectors you should know for your HTML coding

    In this article I will discuss several important CSS selectors which can be used when you are doing your PSD to HTML conversion. Now browser vendors have implemented lot of selectors in their latest releases of browsers

    Some of the CSS selectors you can use frequently when to do the PSD to CSS3 conversions

    1 *

    [code lang=”html”]
    * {
    margin: 0;
    padding: 0;
    }
    [/code]

    This will target the every element in the page. But this is not recommend to do because it will add lot of weight to your page

    This another example to apply border CSS rule to all child element of the #container
    [code lang=”html”]
    #container * {
    border: 1px solid black;
    }
    [/code]

    2 #id

    This is well known by lot of developers call this as id selector
    [code lang=”html”]
    <div id=“container”>

    </div>
    [/code]
    You can define the element with id like this way
    [code lang=”html”]
    #container{

    }
    [/code]

    Main disadvantage of this is you can not re use the

    3 .classname

    This is known as the class selector
    [code lang=”html”]
    .errormsg {
    color: red;
    }
    [/code]

    You use the #id to get the same results but in class method you can reuse the css rules if you reuse it

    4 Descendant

    If you need to be more specific with style you can apply this method
    [code lang=”html”]
    <li><a href=""></a></li>
    [/code]

    if you want to style element a you can use the following rule
    [code lang=”html”]
    li a{
    color:#CCC;
    }
    [/code]

    5 Target all given elements on page

    if you want target the element depending on their type you can use this approach
    [code lang=”html”]
    a{
    color:#ccc;
    }
    ul {
    list-style: none;
    }
    [/code]

    6 :visited and :links pseudo-class

    [code lang=”html”]
    a:link{
    color :blue;
    }

    a:visited{
    color : red;
    }
    [/code]

    :link pseudo class is used to select links which are yet to visit
    :visited pseudo class is used to select visited links

    7 Adjacent sibling combinator – X+Y

    if you want to select element which is after specific element you can use adjacent sibling combinator
    [code lang=”html”]
    <div>
    <p> Line 1 </p>
    <p> Line 2 </p>
    </div>
    <p> Line 3 </p>

    div+p {
    font-size:20px;
    }
    [/code]

    You can see the demo

    8 Child combinator – Ul li and Ul>Li

    Nested list is good example to learn the
    [code lang=”html”]
    <ul>
    <li> Line 1 </li>
    <li> Line 2 </li>
    <li> Hello
    <span>
    <ol>
    <li> Line 3.1 </li>
    <li> Line 3.2 </li>
    </ol>
    </span>
    </li>
    </ul>
    [/code]

    Following CSS will select the first children Li of the Ul. It does not select the Li elements of the Ol
    [code lang=”css”]
    ul>li {
    list-style:none;
    }
    [/code]

    You can see the demo

    Form Validation with AngularJs

    Form Validation with Angular Js

    In our PSD to Bootstrap conversion jobs , we do the client side validation too. Wo do client side validation task as separate jobs and we use AngularJs for these validation

    I have written this article if you are interested using AngularJs for your next project. If you know basic javascript you can use AngularJs to validate your form

    novalidate attribute of the form is very important because it will prevent the browser from submitting the form

    You have to give value for name attribute of the form like name="myForm". AngularJs can access your form property by referring the name of the form

    These are the validation options that you can use with input fields

    [code lang=”html”]
    <input type="text" required />
    <input type="text" ng-minlength=5 />
    <input type="text" ng-maxlength=20 />
    <input type="text" ng-pattern="[a-zA-Z]" />
    <input type="email" name="email" ng-model="user.email" />
    <input type="number" name="email" ng-model="user.age" />
    <input type="url" name="homepage" ng-model="user.facebook_url" />
    [/code]

    In addition to above validation method we can use custom validation methods as you required. I will discuss this in separate article

    In addition to above input property, we have some AngularJs properties which need to validate the forms

    $valid – This is a boolean property which indicates the validity of the element based on the roles you apply. The CSS class associated with this is ng-valid

    $invalid – This is a boolean property which indicates the validity of the element based on the roles you apply. The CSS class associated with this is ng-invalid

    $pristine – This is boolean propery which indicate the usage of the element. If the input element has not been used it outputs true. This CSS associated with this is ng-pristine

    $dirty If the input element has been used , it indicate the Boolean true

    $touched if the input element has been blurred this will indicate Boolean true

    We will look the following code. This form has two fields to enter user name and emai

    user name – this is required field
    email – this is required field and email should be valid one

    [code lang=”html”]
    <div ng-app="myApp" ng-controller=’myCtrl’>
    <form method="post" name="myForm" action="" novalidate>
    <div class="field">
    <label> Name </label>
    <input type="input" ng-model="user" name="user" required />
    <span style="color:red" ng-show="myForm.user.$dirty">
    <span ng-show="myForm.user.$error.required">Name is required.</span>
    </div>
    <div class="field">
    <label> Email </label>
    <input type="email" ng-model="email" name="email" required />
    <span ng-show="myForm.email.$error.required">Email is required.</span>
    <span ng-show="myForm.email.$error.email">Invalid email address.</span>
    </div>

    <input type="submit" value="submit" />
    </form>
    </div>
    [/code]

    JS coded needed to run above example
    [code lang=”js”]
    var app = angular.module(‘myApp’, []);
    app.controller(‘myCtrl’, function($scope) {
    $scope.user = ‘John Doe’;
    $scope.email = ‘john@gmail.com’;
    });
    [/code]

    You can see the demo of the above example

    Conclusion

    This article is good starting point to understand the form validation with AngularJS. You can do the validation of form very easily when you understand the concept behind it. You need to write few lines of code to validate input elements. It shows the in line error messages and you can apply CSS to those messages too