6 ms·

If you are looking for light-weight (no Jquery) and flexible alternatives to Bootstrap, you might also like utility toolkit (combine classes for flexible desig

by mcbetz 8y ago

If you are looking for light-weight (no Jquery) and flexible alternatives to Bootstrap, you might also like utility toolkit (combine classes for flexible design systems) like Tachyon (http://tachyons.io/ http://tachyons.io/) or TailwindCSS (https://tailwindcss.com/ https://tailwindcss.com/). These toolkits have sped up my webdev while make me feel like really controlling what I do (Bootstrap always felt like working against the system when customizing stuff)

petepete 8y ago
Also Milligram. Super minimal, so much so even I can understand how it all works. https://milligram.io https://milligram.io
- mcrittenden 8y ago
  Milligram looks neat but it's not the same idea as utility first CSS framework like Tailwind and Tachyons.
  - petepete 8y ago
    Yeah that's definitely the case. I tend to use it as a minimal foundation and build on top. I haven't used Tachyons but like Tailwind. My problem with utility-first frameworks is that I prefer to do my styling in Sass than by adding loads of classes to elements in the template. Both are valid approaches though and I can see why people prefer both.
    - nedp 8y ago
      You can also apply TailwindCSS classes into any stylesheet preprocessor of your choice such as SASS[0] (@apply) then style it to your liking which is why I'm very delighted to use this instead of Tachyons. [0] - https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
krat0sprakhar 8y ago
+1. Recently read this awesome article on using Tailwind (https://frontendnews.io/editions/2018-08-08-tailwind-css-tutorial https://frontendnews.io/editions/2018-08-08-tailwind-css-tut...) and it seems utility-first CSS is a really interesting idea. Would definitely try it on my next project.
cygned 8y ago
I tried like every CSS framework/library out there and eventually I always come back to Tachyons. If you don’t know it, try it out! With all its great aspects, I still want to point two things that constantly annoy me; the default breakpoints are - imho - not enough for complicated responsive layouts; and when you start to use custom classes, you will find yourself in situations where breakpoint overrides don’t work properly anymore. I have yet to find a scalable solution for both.
- mcrittenden 8y ago
  I'm curious why you don't use Tailwind, which seems basically like Tachyons except with configuration for things like breakpoints?
  - cygned 8y ago
    Basically because I haven’t looked that much into Tailwind yet. Maybe I should do so.
- Kagerjay 8y ago
  Here you go, these are IMO the best 3 sass mixins everyone should know for responsive web queries. I didn't find any articles on it its just the ones I found to be most useful. Use the mixins I defined below, I usually compact them, and use a macro to automatically paste it. mixin# is what I type. Add your custom classes needed for responsive layouts. My breakpoint defaults are based on bootstrap 4, with some added ones for larger desktop screens. 320px, 576px, 768px, 992px, 1200px, 1400px, 1600px You can pick any breakpoint you want, it largely depends on what content your dealing with. Sometimes I swap 576px for 600px, just be consistent. If you use tachyons, continue using tachyons first and foremost. But when it doesn't give you everything you need, put a custom CSS class on those HTML element(s) and define your own custom CSS as outlined below. ------------------------------------------------------------------ These mixins are for specifying the following - Anything above a certain screen width mobile-first-design - Anything below a certain screen width desktop-first-design - Anything inbetween two values hybrid I pick one approach for each component I work with, but generally speaking I use almost all mobile-first-designs media queries and maybe 1 desktop-first-design media query per given CSS class. I rarely use the hybrid approach, because it just means you should have used CSS grid over flexbox etc ------------------------------------------------------------------ @mixin screen-min($min) { @media (min-width: $min) { @content } }; @mixin screen-max($max) { @media (max-width: $max - 1) { @content } }; @mixin screen-minmax($min, $max){ @media (min-width: $min) and (max-width: $max - 1){ @content } }; ------------------------------------------------------------------ // USING THE MIXINS // Example - Writing a custom bootstrap-like container from scratch ------------------------------------------------------------------ .container { margin: 0 auto; width: 100%; @include screen-min(768px){max-width: 750px;} @include screen-min(992px){max-width: 970px;} @include screen-min(1200px){max-width: 1170px;} @include screen-min(1400px){max-width: 1370px;} @include screen-min(1600px){max-width: 1570px;} }
wishinghand 8y ago
I’m always surprised by the enthusiasm for Tailwind. Tailwind feels like only a step above writing inline styles, trading flexibility for nicer syntax.

by mcbetz 8y ago

petepete 8y ago

Also Milligram. Super minimal, so much so even I can understand how it all works. https://milligram.io https://milligram.io

mcrittenden 8y ago
Milligram looks neat but it's not the same idea as utility first CSS framework like Tailwind and Tachyons.
- petepete 8y ago
  Yeah that's definitely the case. I tend to use it as a minimal foundation and build on top. I haven't used Tachyons but like Tailwind. My problem with utility-first frameworks is that I prefer to do my styling in Sass than by adding loads of classes to elements in the template. Both are valid approaches though and I can see why people prefer both.
  - nedp 8y ago
    You can also apply TailwindCSS classes into any stylesheet preprocessor of your choice such as SASS[0] (@apply) then style it to your liking which is why I'm very delighted to use this instead of Tachyons. [0] - https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components

krat0sprakhar 8y ago

+1. Recently read this awesome article on using Tailwind (https://frontendnews.io/editions/2018-08-08-tailwind-css-tutorial https://frontendnews.io/editions/2018-08-08-tailwind-css-tut...) and it seems utility-first CSS is a really interesting idea. Would definitely try it on my next project.

cygned 8y ago

I tried like every CSS framework/library out there and eventually I always come back to Tachyons. If you don’t know it, try it out! With all its great aspects, I still want to point two things that constantly annoy me; the default breakpoints are - imho - not enough for complicated responsive layouts; and when you start to use custom classes, you will find yourself in situations where breakpoint overrides don’t work properly anymore. I have yet to find a scalable solution for both.

mcrittenden 8y ago
I'm curious why you don't use Tailwind, which seems basically like Tachyons except with configuration for things like breakpoints?
- cygned 8y ago
  Basically because I haven’t looked that much into Tailwind yet. Maybe I should do so.
Kagerjay 8y ago
Here you go, these are IMO the best 3 sass mixins everyone should know for responsive web queries. I didn't find any articles on it its just the ones I found to be most useful. Use the mixins I defined below, I usually compact them, and use a macro to automatically paste it. mixin# is what I type. Add your custom classes needed for responsive layouts. My breakpoint defaults are based on bootstrap 4, with some added ones for larger desktop screens. 320px, 576px, 768px, 992px, 1200px, 1400px, 1600px You can pick any breakpoint you want, it largely depends on what content your dealing with. Sometimes I swap 576px for 600px, just be consistent. If you use tachyons, continue using tachyons first and foremost. But when it doesn't give you everything you need, put a custom CSS class on those HTML element(s) and define your own custom CSS as outlined below. ------------------------------------------------------------------ These mixins are for specifying the following - Anything above a certain screen width mobile-first-design - Anything below a certain screen width desktop-first-design - Anything inbetween two values hybrid I pick one approach for each component I work with, but generally speaking I use almost all mobile-first-designs media queries and maybe 1 desktop-first-design media query per given CSS class. I rarely use the hybrid approach, because it just means you should have used CSS grid over flexbox etc ------------------------------------------------------------------ @mixin screen-min($min) { @media (min-width: $min) { @content } }; @mixin screen-max($max) { @media (max-width: $max - 1) { @content } }; @mixin screen-minmax($min, $max){ @media (min-width: $min) and (max-width: $max - 1){ @content } }; ------------------------------------------------------------------ // USING THE MIXINS // Example - Writing a custom bootstrap-like container from scratch ------------------------------------------------------------------ .container { margin: 0 auto; width: 100%; @include screen-min(768px){max-width: 750px;} @include screen-min(992px){max-width: 970px;} @include screen-min(1200px){max-width: 1170px;} @include screen-min(1400px){max-width: 1370px;} @include screen-min(1600px){max-width: 1570px;} }

wishinghand 8y ago

I’m always surprised by the enthusiasm for Tailwind. Tailwind feels like only a step above writing inline styles, trading flexibility for nicer syntax.