Tetragone is an ultra-lightweight Javascript layout library that will automatically arrange your layout in a satisfying way.
Getting started with Tetragone is super fast :
- Download the "dist" folder on GitHub.
- Link the stylesheet and the script file in the head
<head>
<!-- some meta -->
<title>...</title>
<link rel="stylesheet" href="css/tetragone.min.css">
<script src="js/tetragone.min.js"></script>
</head>
...or using CDN :
<link rel="stylesheet" href="https://cdn.rawgit.com/m0wh/tetragone/e409999f/dist/css/tetragone.min.css">
<script src="https://cdn.rawgit.com/m0wh/tetragone/e409999f/dist/js/tetragone.min.js"></script>- Just before the closing
</body>, add the following script
...
<script type="text/javascript">
tetragone("tetragone", 4);
</script>
</body>tetragone([className],[maxColumns])
String className : Class name used for the grid container(s).
Integer maxColumns : Max number (1-10) of columns on a same row.
- Finally, you can add your elements like this
<div class="tetragone">
<div>...</div>
<div>...</div>
<div>...</div>
</div>- Make responsive
- ... You have an idea ?