-
Short introduction
What is topbot? Why should I use topbot? These are two questions you may ask yourself. Topbot started as a small CSS project which solved the problem with a real sticky footer.
During years of web development I found myself coming back to grab what topbot has to offer. Over time, small additions has been made to topbot. The idea is not to push your project in any direction, but to offer the lowest common denominator for all web projects -
JS
Minimal amount of JS. Basically what you want and need for every web project. Write ES6, compile to ES5.
-
CSS
Minimal amount of CSS. Basically what you want and need for every web project. Write LESS/SASS/Stylus, compile to CSS.
-
Device and orientation detection JS
Topbot bundles a smart solution to media queries.
Utils.getDevice() currently is {{ device }}
Utils.getOrientation() currently is {{ orientation }} -
Device and orientation detection CSS
The JS-detection goes hand-in-hand with the CSS.@media @tablet { color: red; }for LESS@media $tablet { color: blue; }for Stylus.@media ($tablet) { color: green; }for SASS. -
Vue.js
I use Vuejs as my frontend framework of choice. This is totally optional but highly recommended. Check it out here.
-
Gulp
Topbot is built using gulp. It comes with a nice structure and is already set up to deal with ES6 using babelify and browserify.
-
Crow Grid Framework
is a smart CSS grid framework. You can check it out here.
-
App.php
Hand crafted library for smart project variables. You can read more about it here.
-
Compile.php - PHP-to-HTML
Visit myurl.localhost/?compile to compile your PHP project into HTML. Try it here.
-
.htaccess
Smart .htaccess. Requires PHP and a virtual host to be set up for your local domain.
-
Markup img's
Put a <img /> tag anywhere and a placeholder image will pop up, like so.
-
Real sticky footer
{ bot } has dynamic height and sticks. It just works.