add draft initial notes - bootstrap-vs-tailwind

content/posts/bootstrap-vs-tailwind.md

@@ -0,0 +1,70 @@
++++
+draft = true
+date = 2020-02-19T21:30:06Z
+title = "Bootstrap vs. Tailwind"
+description = ""
+slug = "bootstrap-tailwind"
+categories = []
+tags = ["Bootstrap", "Tailwind", "CSS"]
+series = []
++++
+
+## what they are?
+
+
+tailwind - utility first css framework
+  utility first - no automatically styled components
+                - gives utility classes that help with styling, allows to build classes
+                    - basically just bunch of predefined css utility classes
+                - creating a project that has a custom look without writing any css.
+bootstrap - UI kit framework - has a default theme and a number of design decisions.
+
+popularity of both - bootstrap most popular and first, tailwind new and upcoming.
+
+## my experiences with both of them.
+
+what i like about both.
+  tailwind - flexibility - modules - can remoe unused modules(?)
+    e.g., reducing amount of screen sizes used in responsive qureies and only keeping those needed - 5 screens
+    (36.4kb) to 2 (15.4kb) [source](https://blog.logrocket.com/tailwind-css-is-it-tomorrows-bootstrap-ebe560f9d00b/)
+    can also use purgecss to remove unused
+    helps with a lot of little thigs like margins, paddings, etc
+
+bootstrap - better for layouts, has a good grid/flex system for layouts.
+  recent versions also contains utility classes
+  - also has components containing javascript
+
+tailwind - people complain about larger filesize (36.4kb?) vs bootstrap (22.1kb? - is this without js tho?)
+  - is this true? does this include all of bootstrap (js, everything???)
+  - look into properly
+
+## what i don't like about both of them.
+
+bootstrap - sites always look same, even with diffeent colour schemes
+  tailwind - doesn't really push sites rto looking same?
+
+bootstrap - big changes to layout mean a lot of changes to code and a battle - tbf this is not what bootstrap is designed for - designed to get UI up and running quickly
+
+tailwind - amount of classes added to markup - very noisy
+  same problem as with atomic css(which is based on?) - getting close to just applying styles inline(what is term for using style tags - it's not inline)
+  - @apply does help tho
+
+## which i prefer and why.
+
+like tailwind for sites where theme is important and I don't want to fight to override styles set by the framework to make it look unique.
+like bootstrap for sites where theme is not important - just want a nice looking, fully functional theme set up quickly. usually personal projects that aren't meant for public.
+actually prefer not to use either - only like to use them on projects where it's not desirable/practicak to be
+spending any time at all on styling - bootstrap probably better in this regard, but prefer customisability of
+tailwind
+
+really like about tailwind (both of them?) - don't need to think up names for css classes!
+
+## the future of both of them.
+
+tailwind comes with laravel(?)
+
+## Example of both
+
+have a nice little card thing styled purely with bootstrap, and the same styled with tailwind.
+talk about how long it took for each and the results.
+maybe have one with default styling from framework, and then another with some customised bits.