Spectre.css – a lightweight, responsive and modern CSS framework | Hacker News Reader

Spectre.css – a lightweight, responsive and modern CSS framework

picturepan2.github.io

224 pointspicturepan252 comments

Is it me, or is every CSS framework nowadays advertised as being either 'light,' 'responsive,' or 'modern?'

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

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

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.

I think "responsive" is a useful modifier (even though most CSS frameworks nowadays are responsive).

"Light" is definitely relative but at least they list the exact size pretty early on.

"Modern", however, is something everybody seems to use to describe their programming framework/library and it's useless. Think about it this way: if you removed the word "modern", what information have you lost?

I would say "Modern" means that it's needs a recent Browser to work correct. Users with Browsers older than 2 years are probably not supported.

  .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.

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.

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

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&...

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

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.

Come on.

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

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.

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

<em> is a semantic element, and doesn't necessarily have to be italic. There are lots of use cases for italic text outside of <em>s.

Use <i> if your use case is "alternate voice or mood" or "different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts"

https://html.spec.whatwg.org/multipage/semantics.html#the-i-...

Using a framwork that generates html out of something else (XML but let's not get into the whys and whatfors) and I literally cannot use <em>, <i> or any other tag. I need to use a class and set the style in the CSS file.

Edge case? Maybe. Just don't dismiss something that doesn't immediately fit your own use-case.

Shouldn't that be <span> not <div>?

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

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.

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.

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.

select2 is a commonly used library for combo/dropdown.

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

Although jQuery dependency is a bummer

Selectize (jQuery) or react-selectize (React) (different libaries but similar functionality).

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

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

Although I've been using mincss (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!

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

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. :)

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.

Probably. See how useful it is? Also, did it load and scroll really fast otherwise?

Yes, it definitely felt faster. The network tab in google chrome indicates a 9.8KB of CSS file, unminified, which is possibly the reason.

Thanks for pointing out this mobile testing methodology. It really helps to evaluate new CSS frameworks, which we see often nowadays.

You're welcome and that's relatively tiny. :) It's actually a variant of an old-school approach of developing on underpowered, older systems to maximize responsiveness. Apps, web sites, databases, whatever. I mean, there's features in modern CPU's that almost everyone has that you can optimize for. Do that for sure but make your baseline efficient even on lowest, common denominator.

Means it will run like a McLaren F1 on the modern stuff with almost no resource requirements. Ironically, it didn't matter all that much on desktops and servers. The new trends of mobile browsers and pay-per-CPU-or-whatever clouds mean it brings more benefit than ever. Especially at scale.

Here:

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?

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.

I think the horizontal scrolling is happening only in that github.io web page, and probably not a fault with the CSS framework itself. The framework looks nice and small, and a good alternative to the mainstream alternatives.

I had a go as well on my galaxy s5. Scrolling becomes laggy (at a rate of ~3-4 fps) for good few seconds whenever I scroll over an HTML code example. It shouldn't be that big of an issue though, given that this is supposed to be purely a css framework. The performance cost comes from somewhere else. Javascript, maybe?

These other tests are strange given my results. I cleared browser history then reran my test. My config is Chrome browser on Galaxy S4 Active. Site loads up and is usable with something loading in background for a few seconds per address bar slider. It scrolls perfectly with no lag. Only glitch is when my finger hits a box with editable code or whatever where it scrolls within the box. That's an ambiguous situation, though, so I don't count it as a glitch.

Wonder why the results vary so much. Wait a second, I just re-ran the test on the default Android browser. Were you two using it instead of Chrome? It loads slower and lags at a few points in the scrolling. Actually, seems to scroll faster, too, in a way that makes site less usable. Could be a browser, rendering issue if you're not on Chrome.

I like how simply checkboxes and radio buttons are styled.

> 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.

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

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?

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

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

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

That Chinese example though..

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?

It's from Chairman Mao's Red Book of quotations. https://www.marxists.org/reference/archive/mao/works/red-boo...

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

Looks nice

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.

Reply on news.ycombinator.com