As per site description "Simple, composable typographic and layout utilities based on common scales promote faster design and development in the browser and more performant, more readable code with no side effects."
Found their definition[0] of what immutable means. Apparently the idea is that you can trust that the rules in an immutable CSS selector will never change in the future. "Immutable" seems like a pretty confusing term for this.
Multi class patters render faster in the browser than inline styles. And I also think more readable especially with a series of single purpose classes that only target one breakpoint.
I initially thought, hey great that's something you simply include and have a base layout that's a great starting point for any type of project, but after looking through the document I realized that it comes with as many "modules" as bootstrap or other full-blown "css-frameworks". Wish they just made a better and more consize and proven {normalize.css reset.css base.css}
Some of the styles are nice and ready to copy though, ie. the table styles, but not sure what the intention of this project is.
--
→ What lightweight css-starter-kit would you choose for any of your upcoming projects? Other than reset.css or normalize.css of course :)
I don't like bootstrap and similar, because it's just too large and most people end up using all of the classes and the whole javascript instead of only the stuff they need. Bootstrap is absolutely great for projects that quickly need a whole "UI Theme" fix.
That's completely new to me, but it looks nice. Thank you. I only knew about stylus, http://learnboost.github.io/stylus/ but that's just a preprocessor.
Another example of something that's tiny and super fast for prototyping but produces code bloat and non-semantic classes. Looks great otherwise. No SASS version?
When using Bootstrap, I don't like to put the responsive breaks in the markup (non-semantic as you say), but rather use the mixin in my LESS file as it's the detail of its function, not its meaning.
This is what has started putting me off Bootstrap. Container -> Row -> Column - feels like table based design all over again and my HTML is no longer semantic.
Considering how we build HTML from templates anyway, this form might be more useful, especially in something like React components. I.e. you build the full class string in code rather than defining separate CSS classes for each component. Your components are obviously named semantically and all relevant CSS styles / transitions / animations are defined inside the component code.
the ypeface isn't semantic so the name reflecting the typeface isn't either. emphasis has semantic value (think of the latex command \emph), but italics is styling
I really really want to love this. I'm so close to loving it.
I'm a fan of utility classes. I don't think that classes should be named based on their content, or that we should be using stupidly specific and complex selectors so we can keep our markup clean (clean markup has nothing to do with class names or selectors); But I feel like this takes to too far.
What do I gain over inline styles? This doesn't seem to be too much more maintainable than that.
You gain a significant amount of performance. And readability. You would also lose a lot of the benefits of framework level variables with only using inline styles.
31 comments
[ 2.6 ms ] story [ 78.6 ms ] threadNot sure technically how this is immutable..
[0] http://www.basscss.com/docs/reference/principles/#immutable-...
Some of the styles are nice and ready to copy though, ie. the table styles, but not sure what the intention of this project is.
--
→ What lightweight css-starter-kit would you choose for any of your upcoming projects? Other than reset.css or normalize.css of course :)
I don't like bootstrap and similar, because it's just too large and most people end up using all of the classes and the whole javascript instead of only the stuff they need. Bootstrap is absolutely great for projects that quickly need a whole "UI Theme" fix.
http://purecss.io/
Another example of something that's tiny and super fast for prototyping but produces code bloat and non-semantic classes. Looks great otherwise. No SASS version?
- Content-layer semantics are already served by HTML elements and other attributes.
- Class names impart little or no useful semantic information to machines or human visitors.
- The primary purpose of a class name is to be a hook for CSS and JavaScript.
- Class names should communicate useful information to developers.
This is what has started putting me off Bootstrap. Container -> Row -> Column - feels like table based design all over again and my HTML is no longer semantic.
This is certainly odd considering how far we've come in embracing semantic markup and styling.
[0]: http://www.basscss.com/docs/utility-typography/
I'm a fan of utility classes. I don't think that classes should be named based on their content, or that we should be using stupidly specific and complex selectors so we can keep our markup clean (clean markup has nothing to do with class names or selectors); But I feel like this takes to too far.
What do I gain over inline styles? This doesn't seem to be too much more maintainable than that.