
Shoelace.css – A back to the basics CSS starter kit - nicc
https://shoelace.style/
======
tga
May I suggest another great back to basics CSS framework:
[http://bootstrapdocs.com/v1.4.0/docs/](http://bootstrapdocs.com/v1.4.0/docs/)

It's only 12K minified and it includes everything you've come to expect from
Bootstrap (that's now 120K minified). As a bonus, you get full _IE7_ support
for all your friendly third world enterprise customers -- and no worries about
responsive design because that's not supported at all!

~~~
nrjames
Use the term "third world" with your clients and they may wish to no longer be
your clients. It's pretty outdated and almost never used in a professional
context any longer.
[http://www.npr.org/sections/goatsandsoda/2015/01/04/37268443...](http://www.npr.org/sections/goatsandsoda/2015/01/04/372684438/if-
you-shouldnt-call-it-the-third-world-what-should-you-call-it)

~~~
unit91
The conclusion of the article you cited is that the authors can't find a way
to conversationally distinguish between wealthy and poor nations without
_somebody_ being offended.

I think this is a great illustration of the fact that, although some people
intend to be derisive in their speech, we shouldn't assume that any
designation whatsoever is intended as derision. That is, everybody needs to
chill and assume the other person is making a good-faith attempt to be
reasonably polite until proven otherwise.

~~~
nrjames
Fair enough. As somebody who has spent the past 15 years working in global
health and international development, I can tell you that "third world" is
considered pretty pejorative these days. While there might not be a convenient
way to linguistically group together all those "friendly third world
countries," I suggest you avoid using the term "third world."

~~~
richardwhiuk
Can you suggest an alternative? LEDCs? Developing countries? Newly
industrialized countries? TPLACs (in jest)?

~~~
nrjames
I think your best bet is just to refer to regions or specific countries. The
"developing" part of developing countries creates a false dichotomy. The World
Bank doesn't even use it anymore ([https://qz.com/685626/the-world-bank-is-
eliminating-the-term...](https://qz.com/685626/the-world-bank-is-eliminating-
the-term-developing-country-from-its-data-vocabulary/)). Just say South East
Asia or Sub-Saharan Africa, or whatever you mean.

------
adrianN
And here I thought that
[http://motherfuckingwebsite.com](http://motherfuckingwebsite.com) was the
basics and
[http://bettermotherfuckingwebsite.com](http://bettermotherfuckingwebsite.com)
was a more "advanced" starting kit for styling.

~~~
philbarr
bettermotherfuckingwebsite makes some good points, whilst completely avoiding
the rather large elephant in the room - pictures.

~~~
Datyedyeguy
[https://thebestmotherfucking.website/](https://thebestmotherfucking.website/)
covers having images, among a few other tweaks on the motherfuckingwebsite and
bettermotherfuckingwebsite formula.

~~~
Radle
What really annoys me is that the says his total site has a size of 34.97 KB +
27.83KB in an image, but JQuery with 32kB is to much.

I wouldn't really believe that 60kb vs 90 makes a huge difference. Website get
bloated at a different place.

~~~
Radle
Bootstrap gzipped is also only 20kb.

------
hardwaresofton
"Back to basics":

> css variables

> 32KB (unzipped)

That said, I do love it though -- I have yet to dig into the CSS variables
spec but I like that it offers near-bootstrap level functionality for a lot
less size.

Compared to my usual go-to, [https://purecss.io/](https://purecss.io/) though,
it's super duper heavy, a factor of 10. Then again, pure doesn't have as many
nice-to-haves.

Also, I really like the height utilities... I find myself writing these two
utility classes ALL the time:

    
    
      .full-height { height: 100%; }
      .full-min-height { min-height: 100%; }

~~~
Kiro
I used Pure in one project and this thing drove me insane:

[https://purecss.io/grids/#using-grids-with-custom-
fonts](https://purecss.io/grids/#using-grids-with-custom-fonts)

Am I really the only one who want to use another font than sans-serif with
Pure? I had to hard-override the font on so many places just because sans-
serif had such high specificity already.

~~~
harrygeez
When it comes to css frameworks you're not supposed to override the styles.
Most of them give you an option to customize the setup or can be modified
easily by changing a few SASS variables.

~~~
hardwaresofton
While that might be true, I do take it as a dis-advantage that the frameworks
can't be easily overridden. I can just imagine the wasted minutes now, setting
a font on the page only to watch it not change and wondering why pure would
pick such specificity only to set the font to sans-serif. Imagine if they'd
done that with the other bits? Made the styling so specific that you couldn't
easily style on top of it.

Also I believe that Pure doesn't do the whole configure-with-sass thing --
though it can be customized, it's CSS only
([https://github.com/yahoo/pure](https://github.com/yahoo/pure)).

I wasn't aware of this shortcoming of Pure (maybe because I haven't used so
many custom fonts), but I'm going to be keeping it in mind for the future.

------
yoshuaw
I'm not sure about this one. Got my doubts how well it'll hold up after 4
months of development, under deadlines, with multiple people on the team.

My gut tells me you'll end up not using half the components that are included,
and bend over backwards to make the config do what you want it to.

I much rather subscribe to the thinking in
[http://tachyons.io/](http://tachyons.io/) \- just enough helper classes to
create any layout you desire, and doesn't mess with defaults which means you
can extend it to cover all edge cases.

------
cornedor
A lot of styles are being applied without you having to set a class. For
example, all tables are styled. This can get in the way really fast if you
want to do your own styles for a element.

~~~
claviska
Someone else asked this so figured I'd share my response:
[https://github.com/claviska/shoelace-
css/issues/12#issuecomm...](https://github.com/claviska/shoelace-
css/issues/12#issuecomment-319352472)

~~~
SippinLean
>I've never used a <table> without <table class="table">. It's redundant.

It's not redundant, an element selector has a different specificity than a
class selector. Much easier to maintain when Everything Is A Class (especially
when paired with BEM, for very flat selectors). It's the reason Bootstrap
stopped doing this.

Who cares if it's redundant? Classes are cheap and repeated strings cost you
almost nothing after Gzip.

~~~
claviska
So should we use <h1 class="h1"> and <a class="a">? It's redundant. Shoelace
provides a reset + minimal, default, and _customizable_ styles. You can use
variables and also modifiers to change those styles. It's not Bootstrap.
Different paradigm.

~~~
SippinLean
Yes! First I should point out that "reset"-style element selectors are usually
ok. But for component CSS classes are king. It's why BS4 styles naked <table>
tags with reset styles, but offers the .table class as an _option_ if you want
the look and feel of their Table component.

BS has actually has an .h1 class. Eventually a design calls for an <h2> that
needs to have the visual appearance of an h1 but for SEO or HTML semantics
reasons needs to be an h2.

Maintaining any site of a certain size it spirals into a nightmare quite
quickly. Look at how Bootstrap 4 can add a dropdown to a <div> _or_ a <nav>.
If your rule was just `nav {}` you wouldn't have that portability, `.dropdown`
is clearly superior. On sites of scale modular CSS wins every time.

>It's not Bootstrap. Different paradigm.

Could have fooled me as a lot of the class names and styling are identical. If
the m-* and p-* spacing utilities are identical, is it really a different
paradigm? BS has (Sass) variables as well.

~~~
claviska
This is certainly true for components, and Shoelace does style components this
way (look at switches and tabs, for example). But for basic elements (non-
components) IMO a clean reset is reasonable to expect.

~~~
SippinLean
Agreed, it's inconsistent. What if I want a <table> without borders?

Should I expect an <a> with `.text-success` to overwrite `.tab-group a`? Or do
I need a new class for `.tab-group .text-success`?

Look at how BS4 broke up Navs from being `.navbar > li > a` to being .navbar,
.navbar-item and .navbar-link and think about why they did.

~~~
claviska
Definitely some good arguments. Nothing is perfect, of course, and I'm always
open to feedback like this.

In the meantime, a borderless table could be a modifier: table-borderless
(i.e. like table-striped or table-bordered).

Just a different approach than what a lot of folks are used to :)

------
cdevs
Since there's a sprinkling of negative feedback I'll say something positive.
Usually when I see something like this pop up it still looks horrible or does
something rediculously glitchy instantly on a mobile phone when all I wanted
to see was a table or a form and this looked great on a mobile phone. I used
skeleton when I hated making CSS pretty in college and I probably would have
dropped this in instead. I like to say I'm a minimalist when it comes to CSS
and JavaScript but then I have to think about other employees and the garbage
they can produce when not contained.

------
TheAceOfHearts
If you're gonna use some random CDN, you should use the integrity attribute to
confirm the resource doesn't unexpectedly change.

I'd encourage users to generate their own CSS bundle, so you only pull in
whatever styles you need. Myth looks to be unmaintained. You can achieve the
same thing with postcss and cssnext [0].

[0] [http://cssnext.io](http://cssnext.io)

~~~
err4nt
I don't think CSSnext is actively maintained either :/

Also, related to CSSnext — isn't the @apply spec idea dead? Does that make
CSSnext “yesterday's vision of tomorrow's CSS” but not what we think the
future of CSS will look like now?

~~~
striking
Relevant discussions to "@apply":

[https://discourse.wicg.io/t/needed-new-champion-for-css-
appl...](https://discourse.wicg.io/t/needed-new-champion-for-css-apply-
rule/2012/12)

and the linked [http://www.xanthir.com/b4o00](http://www.xanthir.com/b4o00)
("Why I Abandoned @apply")

------
oregontechninja
Skeleton.css is a treasure of a tiny css framework.
[http://getskeleton.com/](http://getskeleton.com/)

~~~
OverThere
Skeleton.css is my current favorite bare bones framework. Its last update on
github was 3 years ago though, so I'm checking around to see if there's any
similar bare bones framework. I know an update to skeleton.css might not be
necessary because everything works, but Shoelace looks promising.

~~~
dceddia
This assumption/worldview is interesting. I recognize myself thinking this way
too, but on the face of it, it's a bit weird: if a project does not see
_continuous updates_ then we consider it to be outdated and worthless.

This definitely applies more to some things than others, but I think it's
worth questioning, too. Does the thing still work? Was it great 3 years ago?
Is there a reason it's less great now (other than that it was created 3 years
ago)?

FWIW I based my blog theme on Skeleton. I must admit that the 3 year age gave
me pause (irrationally, probably) and that it's worked out nicely.

------
supernumerary
I like [http://basscss.com/](http://basscss.com/) \- @2kb... and ace if more
is needed...[http://basscss.com/ace/](http://basscss.com/ace/)

~~~
err4nt
The BassCSS site (and ACE site) both contain 100% code samples, but 0 previews
of what it looks like!

How are you supposed to look and see what you need or what's available?

~~~
yellowapple
Is the BassCSS website itself not a preview of what it looks like?

------
mattbgates
I make it a point that with every project I do, I never use the same CSS
framework. This gives all my products a different look every time. I
definitely love simple and unique. I've added this CSS framework as one I will
be using. Thanks for sharing!

~~~
gorm
Sounds like a good and fun plan. You must have tested a few, so which of the
not so obvious ones would you recommend?

~~~
mattbgates
Hey gorm, there are a few where once you get into them.. you realize they are
a bit more complicated to use or just don't suit your needs. I tend to favor
CSS the most and stay away from sass and less platforms, even though
performance is supposedly better.

I think it really depends on personal preference. I have stayed away from
using the larger CSS frameworks. I won't mention them because I don't think
it's right to "call out" CSS frameworks when its just my own personal usage of
some frameworks over others.

I will mention ones that I have used:

Bootstrap ( [http://getbootstrap.com/](http://getbootstrap.com/) )

Semantic UI ( [https://semantic-ui.com/](https://semantic-ui.com/) )

Skeleton ( [http://getskeleton.com/](http://getskeleton.com/) )

GetFlakes ( [http://getflakes.com](http://getflakes.com) )

Milligram ( [http://milligram.github.io/](http://milligram.github.io/) )

HackCSS ( [http://hackcss.com/](http://hackcss.com/) )

Furtive ( [http://furtive.co/](http://furtive.co/) )

BassCSS ( [http://basscss.com/](http://basscss.com/) )

w3.css ( [https://www.w3schools.com/w3css/](https://www.w3schools.com/w3css/)
)

Spectre (
[https://picturepan2.github.io/spectre/](https://picturepan2.github.io/spectre/)
)

CaiuSS (
[http://ionicabizau.github.io/CaiuSS/](http://ionicabizau.github.io/CaiuSS/) )

~~~
DonutDeflector
I moved from using Skeleton to using Spectre with the Pure grid system.

I really like the stuff and fluff Spectre offers: cards, navigation bar, etc.

Pure's grid is what I use exclusively. Simple, easy, and targets the screen
sizes I want,

------
fareesh
Is the "you don't need a grid" meme true when you take into account support
for IE10, Kitkat, IOS9 and Safari 10? Is the polyfill as painless as
advertised?

~~~
claviska
Sure. If you need a grid system feel free to tack one on. There's a link in
the docs to the Bootstrap grid system without any extras that works well and
is familiar.

~~~
SippinLean
The point of a library or framework is that I don't need to tack one on. I
could spend time writing my own grid system that uses CSS Grid and only
supports the latest browsers (without a polyfill) or just use Bootstrap 3 or
4's grid, which has been tested already, supports lots of browsers and
requires no effort.

I know this bills itself as a "reset" but when you look at the buttons, text
utilities, spacing utilities etc it's far beyond that. In many cases it's just
re-using Bootstrap's naming conventions and code. As far as I can tell there's
nothing like Bootstrap's theme customization tool for it, so I'd have to do it
all by hand.

~~~
claviska
"If you need a grid system," Not "you need to add your own."

In the near future, grid systems will be more and more obsolete
([https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-
ne...](https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-
grid-based-grid-system/)), and Shoelace is prepared for that. Why add the
weight if you don't need it?

~~~
SippinLean
That link recommends for a grid system, it just advocates capital 'G' Grid
instead of other solutions. There's an entire section where they _encourage a
framework_ for working with Grid. I have never worked on a site that doesn't
need any concept of a grid.

~~~
claviska
It's referring to the CSS grid layout, not a grid system such as 960 or
Bootstrap's grid system. [https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_La...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout)

~~~
SippinLean
Correct that is what I said:

>it just advocates capital 'G' Grid instead of other solutions

I also said:

>There's an entire section where they encourage a framework for working with
Grid

as a rebuttal to your claim otherwise.

------
apeacox
Interesting project. However, the size is still big and it doesn't use
flexbox. I'll stick on bulma.io

~~~
diggan
Big compared to what? Just downloaded 0.5.0 of Bulma and it's at 268KB while
Shoelace.css seems to be 32KB

~~~
apeacox
Bulma is modular, and usually you end up with a ~20kb bundle

------
styfle
Very cool domain name! We should all start using `.style` TLD for css
frameworks.

------
noway421
This is extremely cool and would definitely move the web forward. I would
definitely use that for internal projects where compatibility requirements are
not challenging and a proper ui kit is an overkill.

------
DonutDeflector
I like to use Spectre,css:
[https://picturepan2.github.io/spectre/](https://picturepan2.github.io/spectre/)

It has styling for a navbar, panels, and empty states, which is quite neat.

Spectre has a flexbox-based grid, which I ditched in favour of Pure's grid
simply because it targets the screen sizes I want:
[https://purecss.io/grids/](https://purecss.io/grids/)

Shoelace,css is interesting. Perhaps I'll choose it for my next project.

------
manigandham
For CDNs, if you're running an open-source project then it's best to go with
[https://www.jsdelivr.com/](https://www.jsdelivr.com/)

It'll automatically handle github or npm packages or any custom setup if you
need it.

For example: [https://cdn.jsdelivr.net/gh/claviska/shoelace-
css@1.0.0-beta...](https://cdn.jsdelivr.net/gh/claviska/shoelace-
css@1.0.0-beta5/dist/shoelace.css)

~~~
styfle
Also there's unpkg for npm projects.

[https://unpkg.com](https://unpkg.com)

~~~
manigandham
unpkg.com is nice but it's only really supported by cloudflare (who also back
cdnjs and a few others) and just "best-effort" on reliability by 1 person.

jsDelivr has a lot more sponsors and a bigger network.

~~~
styfle
Thanks for the response. I found out about unpkg because of React.js and there
was a discussion a few days ago regarding a "default" CDN here[0] where the
author, mjackson, replies. No one mentioned jsdeliver :/

[0]:
[https://github.com/facebook/react/issues/10294#issuecomment-...](https://github.com/facebook/react/issues/10294#issuecomment-318928557)

------
andyford
I'm glad to see another viable CSS non-framework and Shoelace looks very
promising. I haven't put it through its paces yet, but found a nitpicky
thing... why have a "table td" selector? You can't have a td outside of a
table anyway. This is top of mind for me because I was just grappling with
Bootstrap's lovely specificity nightmare ".table > tbody > tr > td"

------
Teichopsia
Thanks for this. I've been working on something, if not just like this, quite
similar as a learning experience - and to have as a starter kit. It isn't and
was not going to be as 1/3 complete as yours, but am definitely going to be
reading through your code.

------
csomar
Unless they have a rule like: Each commit must reduce the number of lines/size
of code or at least keep it exactly the same. What is going to prevent this
from becoming the next bootstrap if the project becomes successful?

------
aphextron
>"<style> :root { \--body-color: white; \--body-bg-color: black; \--color-
primary: #09d; } </style>"

....what? Is this even valid CSS?

~~~
tickthokk
Yep!

[https://developer.mozilla.org/en-
US/docs/Web/CSS/Using_CSS_v...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Using_CSS_variables)

[https://developer.mozilla.org/en-
US/docs/Web/CSS/:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root)

Unfortunately since IE doesn't use it, most of us won't be able to either, as
much as we want to :(

~~~
claviska
The nice thing about Shoelace is that it will only get more relevant as
browsers evolve and old ones go away. In the meantime, you can polyfill with
Myth.io or cssnext.io.

------
elliotec
I like to use Marx
[https://github.com/mblode/marx](https://github.com/mblode/marx)

------
peter_retief
Just what I wanted, been looking at bulma/flexbox and bootstap which are great
but not small/clean/simple enough - thanks!

------
rado
Good to see minimal templates/frameworks. Most of them don't have many demos,
here is one with 28 –
[https://radogado.github.io/natuive/#showcase](https://radogado.github.io/natuive/#showcase)

------
andrewfromx
sakura? [https://github.com/oxalorg/sakura](https://github.com/oxalorg/sakura)

------
claviska
Thanks for nearly crashing my server this morning xD

If you like Shoelace.css, would you vote it up on Product Hunt?
[https://www.producthunt.com/posts/shoelace-
css](https://www.producthunt.com/posts/shoelace-css)

Thanks :)

