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.
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?
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.
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.
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.
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.
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"
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.
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.
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.
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.
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?
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?
- 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.
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!
53 comments
[ 3.4 ms ] story [ 123 ms ] threadThanks for pointing out this mobile testing methodology. It really helps to evaluate new CSS frameworks, which we see often nowadays.
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.
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?
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.
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.
Although jQuery dependency is a bummer
Come on.
<em>This is my italic text.</em>
https://html.spec.whatwg.org/multipage/semantics.html#the-i-...
Edge case? Maybe. Just don't dismiss something that doesn't immediately fit your own use-case.
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&...
It seems that the .col-[size]-[num] classes function exactly the same way in both.
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?
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/
"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?
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.
- 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.
Xiaomi note 3 / chrome