6 ms·

Basscss – Low-level CSS toolkit

71 points by achairapart 12y ago

tobr 12y ago
What does "immutable" mean in the context of CSS?
- itsbits 12y ago
  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." Not sure technically how this is immutable..
- tobr 12y ago
  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. [0] http://www.basscss.com/docs/reference/principles/#immutable-utilities http://www.basscss.com/docs/reference/principles/#immutable-...
  - bshimmin 12y ago
    I guess after "Object-oriented CSS" it was inevitable we would get Functional CSS...
- danieldisu 12y ago
  I think that it means that if you put a class called .block it will ONLY add the attribute display: block;
  - gcz92 12y ago
    After doing that enough times, won't it basically look like a smaller version of inline css?
    - mrmrs 12y ago
      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.
mthq 12y ago
Looks nice! But I wonder, what is the reason to use this over something like bootstrap?
- FractalNerve 12y ago
  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.
  - jonahx 12y ago
    If you're looking for a simple, lightweight alternative to bootstrap, check out PureCSS by Yahoo: http://purecss.io/ http://purecss.io/
  - bshimmin 12y ago
    Skeleton (http://getskeleton.com http://getskeleton.com) is pretty nice, as lightweight CSS frameworks go.
  - sumbumble 12y ago
    I like Nicolas Gallagher's SUIT CSS style foundation, utilities and components. https://suitcss.github.io/ https://suitcss.github.io/
    - FractalNerve 12y ago
      That's completely new to me, but it looks nice. Thank you. I only knew about stylus, http://learnboost.github.io/stylus/ http://learnboost.github.io/stylus/ but that's just a preprocessor.
nkhodyunya 12y ago
The page looks like someone left too much whitespace in it.
antidaily 12y ago
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">... 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?
- ebiester 12y ago
  I get the non-semantic classes argument, but I've never seen a solution that is generic, responsive, and semantic. Any leads?
  - cobalt 12y ago
    The idea is more to write it for each site, so you have site specific design
    - antidaily 12y ago
      Right. I use mixins to apply these declarations to classes. Which has its own drawbacks.
- simple10 12y ago
  A common pattern is to use low level libraries like basscss to build custom sass or less libraries per project.
- mrzool 12y ago
  Non-semantic classes are totally fine: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a... - 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.
- martin-adams 12y ago
  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.
daturkel 12y ago
.italic { font-style: italic } from [0] This is certainly odd considering how far we've come in embracing semantic markup and styling. [0]: http://www.basscss.com/docs/utility-typography/ http://www.basscss.com/docs/utility-typography/
- Geee 12y ago
  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.
  - musername 12y ago
    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
- vinspee 12y ago
  Classes have no semantic value.
tshadwell 12y ago
"low level" CSS? It's a sad day when a collection of CSS classes is referred to as "low level". Lower level than bootstrap, I assume?
- simple10 12y ago
  Yeah, confusing. "Low level" CSS at best seems to refer to composable and minimal.
vinspee 12y ago
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.
- mrmrs 12y ago
  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.

71 points by achairapart 12y ago

tobr 12y ago

What does "immutable" mean in the context of CSS?

itsbits 12y ago
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." Not sure technically how this is immutable..
tobr 12y ago
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. [0] http://www.basscss.com/docs/reference/principles/#immutable-utilities http://www.basscss.com/docs/reference/principles/#immutable-...
- bshimmin 12y ago
  I guess after "Object-oriented CSS" it was inevitable we would get Functional CSS...
danieldisu 12y ago
I think that it means that if you put a class called .block it will ONLY add the attribute display: block;
- gcz92 12y ago
  After doing that enough times, won't it basically look like a smaller version of inline css?
  - mrmrs 12y ago
    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.

mthq 12y ago

Looks nice! But I wonder, what is the reason to use this over something like bootstrap?

FractalNerve 12y ago
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.
- jonahx 12y ago
  If you're looking for a simple, lightweight alternative to bootstrap, check out PureCSS by Yahoo: http://purecss.io/ http://purecss.io/
- bshimmin 12y ago
  Skeleton (http://getskeleton.com http://getskeleton.com) is pretty nice, as lightweight CSS frameworks go.
- sumbumble 12y ago
  I like Nicolas Gallagher's SUIT CSS style foundation, utilities and components. https://suitcss.github.io/ https://suitcss.github.io/
  - FractalNerve 12y ago
    That's completely new to me, but it looks nice. Thank you. I only knew about stylus, http://learnboost.github.io/stylus/ http://learnboost.github.io/stylus/ but that's just a preprocessor.

nkhodyunya 12y ago

The page looks like someone left too much whitespace in it.

antidaily 12y ago

<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">... 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?

ebiester 12y ago
I get the non-semantic classes argument, but I've never seen a solution that is generic, responsive, and semantic. Any leads?
- cobalt 12y ago
  The idea is more to write it for each site, so you have site specific design
  - antidaily 12y ago
    Right. I use mixins to apply these declarations to classes. Which has its own drawbacks.
simple10 12y ago
A common pattern is to use low level libraries like basscss to build custom sass or less libraries per project.
mrzool 12y ago
Non-semantic classes are totally fine: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a... - 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.
martin-adams 12y ago
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.

daturkel 12y ago

.italic { font-style: italic } from [0] This is certainly odd considering how far we've come in embracing semantic markup and styling. [0]: http://www.basscss.com/docs/utility-typography/ http://www.basscss.com/docs/utility-typography/

Geee 12y ago
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.
- musername 12y ago
  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
vinspee 12y ago
Classes have no semantic value.

tshadwell 12y ago

"low level" CSS? It's a sad day when a collection of CSS classes is referred to as "low level". Lower level than bootstrap, I assume?

simple10 12y ago
Yeah, confusing. "Low level" CSS at best seems to refer to composable and minimal.

vinspee 12y ago

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.

mrmrs 12y ago
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.