From 1216a10f0b719ed359e9cdd88626e425932ce7ee Mon Sep 17 00:00:00 2001 From: ray Date: Mon, 24 Feb 2020 13:18:11 +0000 Subject: [PATCH] add draft initial notes - bootstrap-vs-tailwind --- content/posts/bootstrap-vs-tailwind.md | 70 ++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 content/posts/bootstrap-vs-tailwind.md diff --git a/content/posts/bootstrap-vs-tailwind.md b/content/posts/bootstrap-vs-tailwind.md new file mode 100644 index 0000000..2261842 --- /dev/null +++ b/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.