Bootstrap vs Custom CSS

Recently I have this idea to create a small web app to manage list of tasks with sub-tasks. Coming from system programming field to writing web application and looking to dozen web frameworks there was the obvious question – what to use?

Using Flexbox to layout tasks elements

After some time of research and trying things the choice falls on Bootstrap framework, as it’s actively maintained and community is large in case of trouble getting your code to work. Another option is to use pure CSS + JavaScript to style and write logic to make similar components  included in Bootstrap out of the box and much more.

It is tempting to use first option as you see all building blocks in Bootstrap ready to use and imagine how easy it would be building web app using their layout classes and different components. On the other hand you stay alone with a ton of CSS documentation plus your own implementation with additional third-party libraries, not to mention hacking CSS in order to overcome different kind of issues related to specific version of web browser.

Some time ago I’ve chosen Bootstrap over custom development for another project. So far so good until I hit the wall when I needed to do something that was not built-in into Bootstrap classes and components as well as not already answered on blogs/forums. So, extending already existing classes was a nightmare.

This time I’ve tried to do custom CSS and to learn how to do things in a right way. Here is brief summary what you need to learn in order to have base understanding to move further into styling complex web application with large number of components.

  1. First of all to have introduction what CSS is all about. Sure, you’ve read some CSS and know something about it, but this introduction is more to organize your knowledge about selectors, pseudo-classes and elements, box model, units in order to switch from hacking stuff together and make it work to understanding why it works like this and how to fit it to your needs.
  2. CSS Layout – that’s important and the hard one. If you want to arrange elements on webpage in specific order you need to understand how to do this correctly without hard-coding left/right/top/bottom values. I recommend to take a glance at floats, positioning and then invest some time on deep understanding how Flexbox and Grids work. This is powerful concept to grasp as this will decrease the time spent on figuring out why does this element is not positioned correctly or not showing at all.
  3. Media Queries – you need to think about different devices, it’s not only your desktop web browser window anymore. There are different kinds of output devices and media queries is an easy way to remove/replace/add new styles based on different input parameters.


So, after you grind all documentation along with writing simple web applications in JavaScript + CSS, supporting different devices, fixing bugs in different web browser versions – now, you have understanding how Bootstrap or similar web framework works by encapsulating all functionality and allows you to forget about this for some period of time.

Now, after you understood how this works under the hood, the question what to use is resolved by themselves. If you need it fast – you can use Web frameworks, if you need lightweight solutions – no problem, just use custom approach or combine Web framework with custom CSS and JavaScript, but the important part is that you have understating how it works and how to fix it on your own.

Axis Order – What number comes first longitude or latitude?

What number comes first latitude or longitude? The answer is pretty simple – it depends on what software/library you are using.

Here is compiled list of popular desktop/web/formats/programming libraries and the axis order they are using.

This list was compiled after some time of using those packages and of course fixing bugs when you passing tuple of coordinates in latitude, longitude format to package which is using (surprise!) longitude, latitude order, that’s was a fun night!

Latitude, Longitude Longitude, Latitude
Leaflet GeoJSON
Google Maps API KML
Apple MapKit Shapefile
Bing Maps API WKT
OpenStreetMap WKB
HERE maps OpenLayers
Mapbox API
MySQL spatial
Oracle spatial

In case you found something wrong or want to add new entry to the table above, just leave comment and I fix/add entry.