INK Framework | Design a Basic Template

Published in

mddanishyusuf

3 min readSep 1, 2016

INK is a framework of html and css to built responsive and light weight web pages quickly with little knowledge of html and css. there are many similar framework as Bootstrap, Zurb Foundation, Semantic UI, YAML etc and all these framework based on grid System.

What you need to design basic template with INK

Basic Knowledge of HTML and CSS ( if you have’t learn basic from here ).
INK Framework Files.
Text editor ( Sublime, Notepad++, Brackets etc ).
Web Browser.

Step 1 : Config INK files

Download INK files from here or from official website here

You can use cdn hosted files of INK no need to download locally

<link rel="stylesheet" type="text/css" href="http://fastly.ink.sapo.pt/3.1.10/css/ink.css">  
<script type="text/javascript" src="http://fastly.ink.sapo.pt/3.1.10/js/ink-all.js"></script>

Step 2 : Create index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Basic INK Template</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <!-- load Ink CSS -->
        <link rel="stylesheet" type="text/css" href="css/ink.min.css">
        <!-- load Ink javascript files -->
        <script type="text/javascript" src="js/ink-all.min.js"></script>
    </head><body>
        <h1>Hello World!</h1>
    </body>
</html>Step 3 : Design Header Navbar<body>
<nav class="ink-navigation">
    <ul class="menu horizontal black">
        <li><a href="./">India's Historical Places</a></li>
    </ul>
</nav>
</body>

ink-navigation : nav root class name.
menu : define nav type.
black : define nav background-color.

Step 3 : Design Home Page

We are going to design home page for some India's historical place with a image and a introduction paragraph.<body>
<div class="all-60 push-center small-100">
    <nav class="ink-navigation">
        <ul class="menu horizontal black">
            <li><a href="./">India's Historical Places</a></li>
        </ul>
    </nav>
    <br/>
    <!--put carousel code here-->
    <div class="ink-grid">
		<div class="column-group gutters">
		<h3>Taj Mahal</h3>
		<div class="all-50 small-100">
		    <figure class="ink-image">
		      <img src="img/taj_mahal.jpg">
		      <figcaption>
		        Taj Mahal
		      </figcaption>
		    </figure>
		</div>
		<div class="all-50 small-100">
		    <p>The Taj Mahal is an ivory-white marble mausoleum on the south bank of the Yamuna river in the Indian city of Agra. It was commissioned in 1632 by the Mughal emperor, Shah Jahan (reigned 1628–1658), to house the tomb of his favourite wife, Mumtaz Mahal. The tomb is the centrepiece of a 42-acre complex, which includes a mosque and a guest house, and is set in formal gardens bounded on three sides by a crenellated wall. <a href="https://en.wikipedia.org/wiki/Taj_Mahal" target="_blank">Read more at wikipedia</a></p>
		</div>
		</div>
    </div>
    <!-- Put footer code here -->
</div>
</body>In INK there are breakpoints which define layout.

tiny : width>=320 px.
small : 321px < width < 640 px.
medium : 641px < width < 960 px.
large : 961 px < width < 1260 px.
xlarge : width > 1261 px.

In above code some classes which i used :

all-60 : layout for all platform will be 60%.
push-center : layout push to center other classes push-right, push-left.
small-100 : for small platform layout will be 100%.
column-group : layout of div in this class div will be in column and this field is mandatory.
gutters : used for padding.

Step 4 : Design footer section

<footer>
    <div class="ink-grid align-center">
        <p class="note">&copy; INK Basic Template by iamnewbie.com</p>
    </div>
</footer>

Step 5 : Config Carousel on top

place font-awesome cdn hosted file in <head> tag.<link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.10/css/font-awesome.min.css">add this code snippet after top header<div id="carousel" class="ink-carousel" data-autoload="false">
    <ul class="stage column-group half-gutters unstyled">
        <li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
            <img src="http://i.imgur.com/evN4oCY.jpg">
        </li>
        <li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
            <img src="http://i.imgur.com/R1AiTcR.jpg">
        </li>
        <li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
            <img src="http://i.imgur.com/mOz3sUa.jpg">
        </li>
        <li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
            <img src="http://i.imgur.com/9Z6ygFq.jpg">
        </li>
        <li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
            <img src="http://i.imgur.com/xXsoPzY.jpg">
        </li>
        <li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
            <img src="http://i.imgur.com/d4yhHJ9.jpg">
        </li>
    </ul><nav id="p3" class="ink-navigation" data-previous-label="" data-next-label="">
        <ul class="pagination chevron"></ul>
    </nav>
</div>
put this script code before </html><script>
    Ink.requireModules(['Ink.UI.Carousel_1'], function(InkCarousel) {
        new InkCarousel('#carousel', { pagination: '#p3', nextLabel: '', previousLabel: ''});
    });
</script>