Using simple flat-icons in your webapps

You might have started working on web pages, web apps etc and might felt the need to use brand icons, accessibility icons, different domain related icons in your project. I found an amazing set of icons Font Awesome Icons with a collection of 600+ icons at free of charge and the website comes with a search bar which you could use to find the best suitable icon as per your need.

Font awesome icons are

  1. Easy to install and use
  2. Easy to customize
  3. Easy to search for the required icon

fa-icons

How to use?

  • Get your cdn from here or customize with the steps given here and include it in your html page.
  • You can use the icon using inline tags <i> or <span> with a class name “fa fa-iconname”.
eg: <i class="fa fa-facebook"></i> or <span class="fa fa-facebook"></span>

you can add another class “fa-2x”, “fa-3x”, “fa-4x” and “fa-5x” to increase the size of the icon.

eg: <span class="fa fa-facebook fa-4x"></span>

icon-x

Want to have an icon inside your button? try this

<button> <span class="fa fa-facebook"></span> Test Button</button>

Customizing your icon

Want a circle around your icon? Try “fa-stack”

<span class="fa-stack fa-lg">
 <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
 </span>

But if you want a white circle around a black icon then you will have to hack few css. I wrote a basic style but I’m sure you could do better than this.

i.fa, span.fa
 {
 padding: 5px 10px;
 display: inline-block;
 border-radius: 50%;
 border: 1px solid black;
 }

Hope this helps in using better/affordable/amazing icons for your projects.

Using CSS Preprocessors

I have been writing a lot of CSS these days, when it comes to a project with 20+ responsive components it is obvious to write tons of CSS code. I started to use CSS preprocessors for a while now and it reduced my css code and the time I spend with css a lot than before. So I thought to share few basic tips in getting started with SASS preprocessor.

Here you will write your css in .scss(stands for sassy CSS) files and then use sass (Syntactically Awesome Stylesheets) to generate your css file (say main.css?)

sass

First you need to install sass on your machine. You can find the installation steps here.  I use a mac machine and since Ruby is already installed, I simply run the following command to install it

$sudo gem install sass

Now create a component.scss file in your ‘ProjectFolder/styles/’.

Note: Make sure you save the file as ‘.scss’ instead of ‘.scss.txt’ file.

You can convert this preprocessed file to the final ‘css’ file to use in a website using sass command.

$sass component.scss main.css
  • Lets write our component.scss file now
//component.scss
.main{
  h1{
    color: red;
  }
  h2{
    color: yellow;
    &.heading2{
      background-color: black;
    } 
  }
}

when you run ‘sass component.scss main.css’ your file is processed and the generated ‘main.css’ looks like

//main.css
.main h1{
  color: red;
}
.main h2{
  color: yellow;
}
.main h2.heading2{
  background-color: black;
}
  • You can also use variables if you want a value to be used across the page.
//component.scss
$primary-color: #ff0000;
$secondary-color: #00ff00;
$default-color: #0000ff;

button{
  &.primary{
    background-color: $primary-color;
  }
  &.secondary{
    background-color: $secondary-color;
  }
  &.default{
    background-color: $default-color;
  }
}

when you sass the above code, you will get

//main.css
button.primary{
  background-color: #ff0000;
}
button.secondary{
  background-color: #00ff00;
}
button.default{
  background-color: #0000ff;
}
  • You can also include one scss file into another scss.
//variable.scss

$primary-color: #ff0000;
$secondary-color: #00ff00;
$default-color: #0000ff;
//component.scss

@import 'variable';

button{
  &.primary{
    background-color: $primary-color;
  }
  &.secondary{
    background-color: $secondary-color;
  }
  &.default{
    background-color: $default-color;
  }
}

when you sass it, you will get

//main.css
button.primary{
  background-color: #ff0000;
}
button.secondary{
  background-color: #00ff00;
}
button.default{
  background-color: #0000ff;
}
  • When you are developing a web application to use across different platforms then you will have to use prefixes such as ‘-webkit’ , ‘-moz’ , ‘-ms’. You can simply use mixins to make it easy.
//component.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

When you sass it, the below css code is generated

//main.css
.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px; }

If you are writing multiple components with multiple ‘.scss’ files then you can create a master ‘.scss’ file( say main.scss) and import all other ‘.scss’ file into it and sass it to generate your final ‘main.css’ file which you could include in your html page.

I gave only few examples about how you can use CSS preprocessors such as SASS to make it simple working on CSS. You can read more about SASS here.

Thank you for reading.

CSS ‘display’ property

Imagine you have a parent ‘div’ with 200px*200px and 4 child ‘div’ elements with 50px*50px then how do you fit these child ‘div’ elements in the parent div? If you started working with css and you have a little knowledge about ‘display’ then you would suggest to use ‘inline’ property.

Few important and basic ‘display’ property values are inline, block, inline-block.

‘block’ will make the element appear as a block element which means it starts on new line and takes the full width of the available. eg: h1-h6, p, div elements.

‘inline’ will allow other elements to occupy in the same line if any space is left. eg: span, a elements etc.

‘inline-block’ elements are inline elements but they have width and height.

Now lets get back to our question, We cannot use ‘inline’ since the div elements have no content so we will use ‘inline-block’ to solve it. Hopefully it should work since ‘inline’ property will enable them to be beside each other and ‘block’ gives them width and height. Here is what we get.< https://embed.plnkr.co/5M7Qgp3o4YkrTunwxdLd/ >

display-demo-2

You will see a white space between the div’s and you will find many explanations for this gap. It is the general white space between the elements. To remove this space we will use the ‘float’ property and let the elements float to the left. and Yipee it works. Here goes the final code.< https://embed.plnkr.co/6PKsgDBTkvP1UloM7tt0/ >

display-demo-2

Thats how CSS ‘display’ property works.