
Spectre.css – A Lightweight, Responsive and Modern CSS Framework - tomcam
https://github.com/picturepan2/spectre
======
osdiab
The more web development I’ve done the more I’ve swung back to just writing
CSS myself rather than depending on CSS frameworks; I’ve ended up seeing these
less as ways to accelerate development for a team that is skilled at frontend,
but instead as a way for people who don’t like styling or have little
experience in frontend development/low design sense to style things
reasonably.

But I keep seeing frontend frameworks on HN - am I/teams like mine that
include at least one person fluent enough in CSS to write reasonable style
sheets/styled components, just not the target audience? Or do other
experienced frontend devs swear by UI frameworks like these for reasons I
haven’t grasped yet? If so, why?

~~~
avip
As a "non-fluent CSS user", I find it challenging and frustrating to maintain
visual consistency and cross-browser compatibility without frameworks. I
totally appreciate the fact it's me being lazy to really learn CSS who is at
fault.

Think of it like different construction methods - you can build something,
let's say the Pyramids, or you can take something already built and beautiful,
but is not what you need, and slowly curve Petra inside the walls. Both work.

~~~
Touche
I think you're probably still thinking about CSS as it was 5 years ago. When
you had to do weird hacks to get things the way you wanted them. Modern CSS is
much easier.

In fact, if you are sticking .row and .column everywhere you are doing
considerably more work than just to define a grid layout using display: grid
once in your CSS, and then just use semantic HTML thereafter.

~~~
Chetan496
While the grid and flexbox have made things better, the display:grid is still
not supported in IE 11 very well. The grid css model was implemented in IE
very early but as the specification got updated, IE remained with a
different(older and incompatible) implementation of display:grid. Of course,
we can still make display:grid work in IE11 by some additional work. But this
is an additional overhead.

Flexbox has very good support and consistent behaviour in all major browsers
and for most of the time we can use flexbox model. With some learning for
using flexbox and grid I could appreciate their utility. (though I do not use
CSS regularly)

The state of CSS is very much improved and these days we don't have to depend
on hacks like the float and clear in CSS. But, minor problems like the
inconsistent behaviour of display:grid in IE 11 - make the need for a CSS
framework relevant.

~~~
avip
What really amazes me is that wpf was release 12 years ago with _all_ these
problems solved. Grid, alignment, center, Center!! You can center something in
xaml and it'll just be in the damn center of the parent container. And surely
xaml is far from being the first layout descriptor to actually work. But no,
with browsers - we have to use fat framework to achieve the triviallest of
behaviors.

------
codyeatworld
What I enjoy about Spectre.css is that there is no javascript and the CSS is
readable. It's easy to drop their CSS into a react component and extend it
because it's so readable.

~~~
koboll
If you hover the homepage buttons, you can see they _veeery_ slightly change
color, to a different shade of purple. It's barely perceptible.

Breaking fundamental rules of user experience right off the bat is not a good
sign when I'm evaluating a CSS dependency.

~~~
calibas
What "fundamental rule" is being broken? Personally, I don't worry much about
hover effects since they don't work on mobile anyway.

------
fareesh
I generally like to see a "kitchen sink" page with everything from the
framework in addition to the option of having to go through the various parts
and discovering whether they exist and what the defaults look like. I don't
know if this is a popular opinion, but if so it would be nice if it became the
de-facto practice when these are released.

This applies to all frameworks pretty much - if your web framework supports
out of the box internationalization, caching, authentication, etc. the best
way to sell me on it is for you to release a demo with all the bells and
whistles, written with the conventions, folder structure, architecture, etc.
that you advocate.

~~~
nambit
Yeah I kept going through the docs trying to find that. Left disappointed.

------
matchbok
I'm just gonna say it.

We don't need another "lightweight, responsive, modern" CSS framework.

It's a solved problem.

~~~
tomcam
I like fast, small web pages because not everyone has a broadband connection
at all times. Can you tell me what other mature, tested, well-supported CSS
frameworks have a feature set that large in less than 25% of Bootstrap's size?

~~~
hardwaresofton
[https://purecss.io/](https://purecss.io/)

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

[https://tachyons.io/](https://tachyons.io/)

[https://bulma.io/](https://bulma.io/)

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

[https://www.muicss.com/](https://www.muicss.com/)

[EDIT] - BTW, I mean this with less snark and more did-you-know-all-these-
existed? I knew of purecss & skeleton (and I've forgotten a few, because it
used to be very common to see these), and I've seen bulma before but some
others were new to me (and I favorited them to give a try on some random
project)

~~~
tomcam
Thanks! I chose Spectre after evaulating every one of these. Skeleton came
very close. It's old but still looks incredibly good IMHO.

~~~
hardwaresofton
PureCSS was one of my favorites for a very long time. These days I use
component frameworks like ElementUI[0] more than anything else to maintain
consistent styling (since most things on the page happen to be components).

[0]: [https://github.com/ElementUI](https://github.com/ElementUI)

------
kowdermeister
I like how the icons are crafted with minimal elements and not requiring font
awesome or some other font.

[https://picturepan2.github.io/spectre/elements/icons.html](https://picturepan2.github.io/spectre/elements/icons.html)

------
manigandham
I prefer [https://tachyons.io/](https://tachyons.io/) as a CSS framework that
avoids any pre-styled themes and just provides building blocks. Great for
SPA/component UIs.

~~~
pixard
Anyone interested in this approach may also like Tailwind
[https://tailwindcss.com/](https://tailwindcss.com/)

~~~
subhajeet2107
How is this different from inline styling ? this throws class inheritance out
of the window

~~~
brunoc
A lot of modern CSS frameworks choose to ignore the cascade.

This trend has grown in response to how difficult it is to avoid regressions
at scale - large or multiple projects, lots of components, lots of independent
teams, etc.

The cascade really is an elegant and efficient idea but it becomes really
difficult to manage as projects grow.

The different with inline CSS is that those helpers are the building blocks —
that’s where your standardize your design system metrics.

As others have pointed out this library provides a mechanism to abstract into
components as well.

------
mrweasel
One thing I noticed, and Spectre.css certainly isn't alone in doing this, the
default button look gives you zero indication that it's clickable.

------
jazoom
I've been using this for years. Did something significant happen with it?

~~~
tomcam
New release, but I just felt HNers needed to know about it.

~~~
nathan_f77
Thanks a lot! I've been looking at a lot of different CSS frameworks lately.
So far I'm considering Semantic UI, Bulma, Tachyons, Tailwind, and a few
others. I initially skipped over Spectre because I thought it was a just a
lightweight grid framework, and didn't realize it had so many components in
less than 10kb. That's really amazing, and I also love the super clean design.
You also get a little bit of Tailwind with the functional classes.

The only thing I don't like is how it uses native browser select dropdowns.
They're really ugly, so it would be nice if there was a proper select
component (although I can just add my own CSS or use Select2.)

Anyway, this looks really awesome. Especially for a landing page that needs to
load really fast.

------
vmware513
[https://github.com/troxler/awesome-css-
frameworks](https://github.com/troxler/awesome-css-frameworks)

~~~
teh_klev
I wish people would stop using "awesome", especially in a "curated" (don't get
me started there either) list that has tens to hundreds of things. There is no
way the author could possibly know if all of these frameworks are "awesome".

------
SnowingXIV
Confused why this is posted again, it's been submitted many times. (Maybe
there was a big release? Just looks like updated docs). Having said that, I've
used this for a number of projects and enjoyed it much more than heavier
solutions.

There is no js so you just write your own in and it's really easy to mold to
your own liking. It was "just" enough and produced polished looking crud apps.
Mostly search and form stuff with tables but users have enjoyed it so I give
the author credit. I also had to spend way more time working on the backend
and this did not get in the way.

~~~
tomcam
HN doesn't mind revisiting topics from time to time. It's been a couple of
years and HN has grown enormously since then. And FWIW I spent a long, long
time settling on Spectre,css, which isn't perfect but which I feel covers a
huge range of standard business purposes with an amazingly light footprint.

------
nwmcsween
This will probably be a unpopular opinion but I think HTML should be fully
semantic with a naming scheme for custom elements (not BEM, etc), take for
example classic breadcrumb navigation, the element name would be <breadcrumb-
ul> to convey it inherits from HTMLUListElement so the actual structure isn't
just an unknown mess of custom tags.

------
thomas
It’s lightweight and usable but far less complete than other options. How are
people picking one framework another?

~~~
dayze
What are some more complete alternatives?

I think there is a blurred line between "lightweight" and "complete", and the
various frameworks land either side of it.

------
Gritt
Lightweight => 10 KB

I'm actually more looking for a grid system using flex in a few bytes

~~~
Zealotux
It's written is Sass, you can simply import only the components that you need
such as the grid.

------
usermac
Dude, I appreciate your work.

~~~
tomcam
Not mine (I'm OP), but Yan Zhu, the creator, just needs way more attention. If
you imagine an ego continuum with Richard Stallman on one end, Yan Zhu is the
exact opposite. It's a little bit of effort just to find his name.

------
petecooper
Previous discussion from 2016 (50+ comments):

[https://news.ycombinator.com/item?id=11758034](https://news.ycombinator.com/item?id=11758034)

------
cyphunk
Are there by chance any samples with Arabic in this framework? Hoping it
resolves the large size disparity between Latin and Arabic font sizes

------
ww520
Spectre is pretty good. I've used it in several projects. It works well.

------
eneoes
I would like to start using it on my next project Thank you so much!

------
matt_lo
I wish this was a React lib with components styled already.

------
osi1647
Not a css framework, but I still like to share Material-UI [https://material-
ui.com/](https://material-ui.com/) It has many components available out of the
box.

~~~
zwaps
The example pages are unbearable slow and lagging on my 4-core 7700HQ CPU.

I don't know what the reason is, but it sure isn't a minimal framework.

I am no web developer, mind you, but I have yet to see any case where such
heavy load really increases the benefit I get from a site. Usually it is quite
the opposite.

It is my opinion that any web-developer using these sort of megabyte-sized
frameworks should have their license revoked.

------
marcusjt
"Accessibility - coming soon"

This is not acceptable any more.

------
__bjoernd
Who ever came to with this naming?

------
mscasts
Looks good, I'll use it!

------
jaytaylor
Why am I seeing ads on their github.io documentation and example pages?

Is the point to show something cool to devs or pick up pageview pennies?

I'm out!

~~~
ahreflink
God forbid someone tries to monetize a project he's spent over two and a half
years developing/maintaining..

~~~
jaytaylor
Perhaps I should clarify. I've got no issue with engineers seeking
compensation for their work. I know the world can be a harsh place, and some
people truly need the money.

Michael, you're absolutely right. People can insert whatever markup and JS
they choose.

It simply seems an odd strategy for a CSS framework to squeak by on ads in the
docs. An unfortunate side effect in this case is it makes it unclear what
parts are documentation or examples, and what is an ad.

~~~
wild_preference
Can you seriously say it's hard to distinguish the ads from content here with
a straight face?

Bootstrap 3 docs had ads too.

~~~
jaytaylor
On mobile, yes.

