
Spectre.css – a lightweight, responsive and modern CSS framework - picturepan2
https://picturepan2.github.io/spectre/
======
unsignedqword
Is it me, or is every CSS framework nowadays advertised as being either
'light,' 'responsive,' or 'modern?'

[http://danmalarkey.github.io/schema/](http://danmalarkey.github.io/schema/)
[http://responsivebp.com/](http://responsivebp.com/)
[http://getbase.org/](http://getbase.org/)
[http://getskeleton.com/](http://getskeleton.com/)
[https://www.myresponsee.com/](https://www.myresponsee.com/)
[http://html5-ninja.com/icecream/](http://html5-ninja.com/icecream/)
[http://www.fitgrd.com/](http://www.fitgrd.com/)
[http://lightuikit.in/](http://lightuikit.in/)
[http://bulma.io/](http://bulma.io/)

~~~
pawelduda
Just like every new shiny tool that pops up - everything is 'robust',
'scalable', easy 'to reason about'. What a time to be alive.

~~~
snaky
We are still in Wild West of shiny open-source frameworks, libraries and
tools. As time goes by, a niche markets and more sophisticated marketing
strategies evolve. "Clojure library for 18-35 whites living in suburbs" would
become a common then.

------
jscholes

      .form-checkbox,
      .form-radio,
      .form-switch {
        input {
          display: none;
        }
      }
    

All check boxes and radio buttons will be completely inaccessible to screen
reader users if you use this framework.

------
jug
Tested on iPhone 6s:

\- No horizontal scrolling as reported elsewhere here, so all OK for me.

\- Code blocks OK, scrolling horizontally within the box as they should.

\- Tables OK and compressing sensibly. More room is for example automatically
given to Name than Duration.

\- Navbar NOT adapting ok. Buttons overlap and distort branding label and
navbar height.

\- Pagination NOT adapting ok. "Next" label follows on a new line rather than
reducing the number of shown pages from "1 ... 6 7 8 ... 12" to e.g. "1 ... 6
... 12".

\- Modals use vertically scrolling content (if reaching a max size?), rather
than making the modal box fit the content. I like the that if used on an
otherwise empty page, which is probably the idea.

\- Otherwise working seemingly OK with no special notes.

I hope the minor issues are fixed, because otherwise I liked the exhaustive
set of features while maintaining clean HTML and think it may be a decent
"light Bootstrap" alternative if you're fine with discarding the ecosystem
that has evolved around Bootstrap.

~~~
jdgiese
Am on iPhone 6s and I see horizontal scrolling outside code blocks.

------
vonklaus
I think this is cool, but as an aside, what is up with the influx of css
libraries on HN? Nothing against them, but there has been 1 or 2 in the top
spot for the last few days.

edit: Including this ~3-4 in the last 5 days. Not staggering, just seems like
a disproportionate to the usual amount as they are all just variations on
pretty similar themes. Not to disparage creators, and I thought the CSS purge
resources were awesome. Just an observation.

[https://hn.algolia.com/?query=.css&sort=byPopularity&prefix&...](https://hn.algolia.com/?query=.css&sort=byPopularity&prefix&page=0&dateRange=pastWeek&type=story)

~~~
ghayes
I feel like there's 20 CSS frameworks being made a day, so only the few lucky
filter through to HN...

------
chubs
Looks fantastic! Thanks for posting it. I think it's great that the first
install method suggested is simple: download the css and add a style link to
it.

------
mark242
<div class="text-italic"></div>

Come on.

<em>This is my italic text.</em>

~~~
catmanjan
From a WCAG point of view you might want the top one instead, some screen
readers read content in <em> in a different tone, which may not be intended.

~~~
gkya
Even then the equivalent of an em or i is a span, not a div.

------
kbr
Hey there! I am the maker of Wing.css
([http://usewing.ml](http://usewing.ml)), and I love this! The website is nice
and minimal also. Keep it up :)

------
matt4077
This is the first flexbox-layout (I've seen) where the framework actually adds
something. Bootstrap et al seem to have missed the momemt where their layout
functionality became just a useless wrapper on flex.

~~~
arciini
I'm not a Flexbox expert, but I'm curious to learn what Spectre has over
Bootstrap in this domain. Is it the .hide- classes? Is it the Responsive
Resizer testing tool?

It seems that the .col-[size]-[num] classes function exactly the same way in
both.

------
sdfin
Is a dropdown functionality planned? I mean, like bootstrap's dropdown. If I
wish to add dropdown functionality, what would be the recommended way? I could
code it, but I'm interested in knowing if there's a recommended js library for
that.

~~~
anilgulecha
select2 is a commonly used library for combo/dropdown.

~~~
Cub3
Glad they have proper accessibility support, have always stayed away from
these libraries due to this reason.

Although jQuery dependency is a bummer

------
amk_
Nice. It's a small thing but I really like that you can add loading indicators
on the buttons with just a class.

------
tehabe
Is framework a new word for template or is there a real difference between a
CSS template and a CSS framework?

------
mxuribe
Although I've been using mincss ([http://mincss.com](http://mincss.com))
framework alot more lately, for what this spectre framework provides, I think
the 27KB file size is actually not bad. Kudos picturepan2!

------
Geee
Is this Bootstrap-compatible? Classnames look mostly the same. (is this
Bootstrap 4 rip-off?)

------
nickpsecurity
Just loaded the site on mobile. Always first test I do for these things. It's
a pile of content, presumably using their framework, but loaded and scrolled
FAST. I like that much. :)

~~~
mani04
I tested on mobile as you suggested, and noticed an unwanted horizontal
scrolling of about 20 pixels. I assume this is probably a bug to be fixed
later.

~~~
nickpsecurity
Here:

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

I tried to replicate your and other commenters experience. I found issues on
Android's default browser that didn't exist on my first, Chrome test. Did you
use default browser or what browser you on?

~~~
mani04
My apologies, I didn't see your message on time. I used the default Chrome
browser on my OnePlus One running CyanogenOS 13 (Android 6.0). I should have
posted this in my first comment itself.

Interestingly, I did not see any horizontal scrolling when I tried in Chrome
browser (Mac OSX 10.11.4) in regular user mode. But on toggling device mode
(in dev tools), and selecting one of the mobiles - Galaxy S5 or Nexus 6P, the
horizontal scrolling started to appear, and it is a lot worse than on my
actual android phone.

I haven't yet been able to identify the element that overflows, but the <html>
and <body> seems to take default 100% width and are expected to be contained
within the browser frame. There is some other rogue element, somewhere nested
inside, which is causing this unwanted horizontal scrolling.

------
artf
I like how simply checkboxes and radio buttons are styled.

------
zhte415
> optimized for asian fonts

Except the font size is far too small.

And for east-asian font readers (Hanzi), the English/Roman font size is far
too small.

Translation is assisted by bigger font sizes.

------
Keats
I wish CSS framework would stop giving a grid unless they are better than the
standalone grids like Lost or Susy

------
joshmarinacci
How is this different or better than the many CSS frameworks already out
there? And why don't any of these frameworks use fieldset instead of extra
DIVs with classes?

~~~
amk_
Because fieldsets are often used as accessibility features and may not be
semantic in all the places you would want the look of a fieldset

------
xentronium
Grid broken on mobile? For me all the col-xs-* cells take whole screen width
instead of e.g. one quarter for col-xs-3

Xiaomi note 3 / chrome

------
skaplun
The text of the inline "soon" button is not centered inside button on my phone

------
cttet
That Chinese example though..

~~~
kagamine
Google translate had this to say:

Revolution is not a dinner party, or writing an essay, or painting a picture,
not so refined, so leisurely, "gentle", as "温良恭俭让." Revolution is an
insurrection, a class overthrows another act of violence.

Is that text profound beyond the literal meaning or am I missing something?

~~~
jboynyc
It's from Chairman Mao's _Red Book_ of quotations.
[https://www.marxists.org/reference/archive/mao/works/red-
boo...](https://www.marxists.org/reference/archive/mao/works/red-
book/ch02.htm)

------
andegre
at first glance, it looks like a copy of Bootstrap...

------
mhauri83
Looks nice

------
vonklaus
I think this is cool, but as an aside, what is up with the influx of css
libraries on HN? Nothing against them, but there has been 1 or 2 in the top
spot for the last few days.

