Bundled with

{ topbot }

A minimalistic PHP no-style-theme starter kit.

  • 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.

    If something in topbot doesn't suit your need, simply remove it.
  • 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.

Kit made by @kortekim