Wednesday, 4 March 2015

Get inspired to Design


Css styling examples




You can browse unlimited number of Css Designs on http://www.csszengarden.com/. All the Css designs follow the same html. It's just the designing that differs.












If you want to use the design go to their Github link and you can browse the repository for your choice of design.
                 


Github: https://github.com/mezzoblue/csszengarden.com

Bootstrap Tutorials


Learn Bootstrap Quickly in an Hour

Bootstrap is a very powerful Css Framework which is used by many of the sites nowadays.


Why you need bootstrap? 

When you build a website. HTML provides a structure to our page. Then, we add up Css to style that page. At last you might wanna add javascript to set a page behaviour i.e. how your page behaves including animations, button click responses etc. 

To add Css and Javascript to html you have to again and again navigate between the files which is not at all a proper way of working to big project. Bootstrap lets you overcome this headache and with bootstrap now you can add all the Css and Javascript to the HTML file itself. 


To start with bootstrap go this link: http://getbootstrap.com/getting-started/#download. Then click on the download button.


You can also download the Sass Version of bootstrap if you are familiar with Sass. But you aren't then go with the default one.


Once you have downloaded the .zip file unzip that file. You'll get the disp folder. Now, Add the index.html file to that disp folder. As shown below.


Now, i'll quickly add little bit of html code to index.html. But before that i'll tell you what these folder contains. 

1) From css folder i'll be using bootstrap.css and will import that inside of my index.html. 

2) From js folder i'll import bootstrap.js inside of my index.html. One thing to keep in mind bootstrap.js is dependent on Jquery so you'll need to import that first.

To import Jquery add the below line between your <body></body> tags

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>


A Bootstrap class that will both responsively wrap content to fixed and update margins based on the current windoize is called 


updating ......... wait i'll add more to it. Soooon.


Monday, 2 March 2015

adding Google Drive Download Button to your site


Get the Link of your file from Google Drive. Suppose, in my case its

drive.google.com/file.txt . Then add following to your html/javascript to your site.


<!DOCTYPE html>
<html>

<head>
<script src= "https://apis.google.com/js/platform.js></script>
<!--This script include google drive api-->

</head>

<body>
    <div class= "g-savetodrive"  <!--This class name is needed-->
         data-src = "drive.google.com/file.txt"
         <!--remember this is the link to our file.-->  
         data-filename="file.txt"
         <!--default file name or any other file name                        with which you want to save the file-->
         data-sitename= "yoursitename"> 
   </div> 
  

</body>

</html>