Start with the below to begin working with a minimal Kathamo document.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- Kathamo --> <link href="kathamo/kathamo.css" rel="stylesheet"> </head> <body></body> </html>
Kathamo includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Grid systems are used for creating page layouts through a series of rows and columns that house your content. In Kathamo, all the columns should be wrapped inside a .container. Otherwise the columns will occupy full viewport width. The Kathamo .container is self clearing. The column classes follows the syntax col-*-** where the * indicates lg, md and sm and ** indicates the size of the column, ranging from 1 to 11. Here's how the Kathamo grid system works:
<!-- `.container` is the main wrapper for the grid. --> <div class="container"> <!-- Grid columns are created by specifying the number of 12 available columns you wish to span. --> <div class="col-lg-3 col-md-5 col-sm-12"></div> <div class="col-lg-9 col-md-7 col-sm-12"></div> </div>
The base typeface of Kathamo is Helvetica Neue, Helvetica, sans-serif
, set at default font size i.e. font-size: 100% over line-height: 1.75 with a font-weight: 400. The default font color is color: #333. The <small> has font-size: .618em and color: #95a5a6.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec mollis enim, ac convallis mauris. Vestibulum tincidunt dolor quis neque rutrum, quis tincidunt mauris vehicula. Suspendisse vel dolor orci. Mauris dictum, dui a aliquam sollicitudin, ligula eros gravida magna, sit amet faucibus risus dolor non dui. Sed aliquam efficitur viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum vitae augue vitae odio suscipit pretium non in est. Ut metus nibh, dictum eget purus id, eleifend porta leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec mollis enim, ac convallis mauris. Vestibulum tincidunt dolor quis neque rutrum, quis tincidunt mauris vehicula. Suspendisse vel dolor orci. Mauris dictum, dui a aliquam sollicitudin, ligula eros gravida magna, sit amet faucibus risus dolor non dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum vitae augue vitae odio suscipit pretium non in est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt dolor, quis tincidunt mauris vehicula. Suspendisse vel dolor orci. Debashis Barman
<!-- Standard Headings --> <h1>Kathamo <small>Framework</small></h1> <h2>Kathamo <small>Framwork</small></h2> <h3>Kathamo <small>Framwork</small></h3> <h4>Kathamo <small>Framwork</small></h4> <h5>Kathamo <small>Framwork</small></h5> <h6>Kathamo <small>Framwork</small></h6> <!-- Body Text --> <p>Kathamo <small>Framework</small></p> <!-- Other styled text tags --> <strong>Bolded</strong> <em>Italicized</em> <a>Colored</a> <u>Underlined</u> <!-- Blockquote --> <blockquote> Kathamo is an Assamese word, literary meaning "structure" or "frame"; thus the name itself suggests a framework. <cite>Debashis Barman, Kathamo Creator</cite> </blockquote>
Use standard HTML tags for <label>, <input>, <select> and <textarea>. Kathamo provides custom style for different form elements viz. inputs, textarea, select, checkbox and radio. Always use attribute data-role="button" to any HTML button to add custom style to it. Similarly <a> can also be converted to a HTML button by adding attribute data-role="button" to it.
<!-- Label --> <label> ... </label> <!-- Text Inputs --> <input name="..." type="..." placeholder="..."> <!-- Selection List --> <select> ... </select> <!-- Textarea --> <textarea name="..." placeholder="..."></textarea> <!-- Checkbox --> <input name="..." type="checkbox"> <!-- Radio --> <input name="..." type="radio"> <!-- Buttons --> <input data-role="button" type="submit" value="Submit"> <button data-role="button" type="button">Submit</button> <a data-role="button" type="button" href="">Submit</a>
Use <table> to add basic styling to any HTML table. Wrap the <table> inside .table-responsive to make it responsive. Also use the attribute data-prefix in <caption> to add some prefix to <caption> content. Similarly add data-position="top" or data-position="bottom" to define the position of the <caption>. By default <caption> is positioned at the top.
| Character | Actor/Actress | Age | Movies/TV |
|---|---|---|---|
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Character | Actor/Actress | Age | Movies/TV |
|---|---|---|---|
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Character | Actor/Actress | Age | Movies/TV |
|---|---|---|---|
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Character | Actor/Actress | Age | Movies/TV |
|---|---|---|---|
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
| Batman | Test | Test | Test |
<!-- Default Table --> <table> <caption data-prefix="Default Table : " data-position="top">...</caption> ... </table> <!-- Hovered Table --> <table class="table-hover"> <caption data-prefix="Hovered Table : " data-position="top">...</caption> ... </table> <!-- Borderless Table --> <table class="table-no-border"> <caption data-prefix="Borderless Table : " data-position="top">...</caption> ... </table> <!-- Striped Table --> <table class="table-striped"> <caption data-prefix="Striped Table : " data-position="top">...</caption> ... </table> <!-- Responsive Table --> <div class="responsive-table"> <table ... > ... </table> </div>
Use standard HTML tags for <li>, <ul> and <dl>. Kathamo provides custom style for unordered list, ordered list and description list. Use .li-inline to create an inline list. .li-inline does not work with <dl>.
<!-- Unordered List --> <ul> ... </ul> <!-- Ordered List --> <ol> ... </ol> <!-- Description List --> <dl> ... </dl> <!-- Inline List --> <ul class="li-inline"> ... </ul>
Kathamo also provides scope to remove styles from lists. Use .li-unstyled to remove all styles from the list. .li-unstyled does not work with <dl>.
<!-- Unstyled unordered List --> <ul class="li-unstyled"> ... </ul> <!-- Unstyled ordered List --> <ol class="li-unstyled"> ... </ol>
Kathamo provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Use .alert any standard HTML block to make it an alert box.
Alert Info : Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Alert Success : Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Alert Danger : Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Add .alert-info, .alert-success and .alert-danger for different alert messages.
<!-- Alerts --> <div class="alert alert-info"> ... </div> <div class="alert alert-success"> ... </div> <div class="alert alert-danger"> ... </div>
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component. Use .panel any standard HTML block to make it a panel box. Always wrap the panel title inside .panel-head and panel content inside panel-body.
Panel Body : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec mollis enim, ac convallis mauris. Vestibulum tincidunt dolor quis neque rutrum, quis tincidunt mauris vehicula.
<!-- Panel --> <div class="panel"> <div class="panel-head"> ... </div> <div class="panel-body"> ... </div> </div>