robsheldon / sscaffold-css Goto Github PK

Thoughts on using System UI font stack instead of an extra HTTP request (and probable privacy tracking?) when using the Google Montserrat font? I used this with method 2 as a guide..
https://css-tricks.com/snippets/css/system-font-stack/

I did this along with a revised validated demo.html page here:
https://github.com/badcat/sscaffold-css

Looks like the three major browsers aren't handling elements in the same way. Chrome is rendering them pretty much the way someone might expect; Firefox is requiring rules to be written to match Chrome's rendering; and Edge is requiring a little additional effort when there are rules present for fixing Firefox's behavior.

When I visit the demo page I had to turn zoom down to 67% because the font size and column length was simply too large, both for myself and when just comparing to other sites. I'm using a 19" 5:4 1280x1024 monitor and I suspect that might be one of the causes.

This problem however does not exist with sites I've seen that use just Skeleton. Also mentioning just in case that Medium suffers from the same issue.

I'm accustomed to setting up something like this in Bootstrap:

div.row
   div.col-md-4
   div.col-md-4
   div.col-md-4
   div.col-md-4

and having it render like this:

+----------+  +----------+  +----------+  

+----------+  +----------+  +----------+  
+----------+  

+----------+  

But when I use columns four on my in-flow children of row, not matter how many of them I add to the row, they just budge up and never wrap to the next line. Eventually they become too narrow to read.

I'd rather not have to calculate the layout in my Rails app, I'd rather just stuff all the children in the container and let the stylesheet work out the display details.

Is this possible?

Thanks very much for a super-svelte and understandable framework!

The <select> tag is not displaying the arrow down on the minified version, probably the minifier replaced the svg+xml to svg xml.

Please add some testing for people with vision impairment, along with making sure the best practices you propose don't mess with things like screen readers.

I bring this up because quite a few people have complained about the very low contrast between your default text and background, along with the default font's weight, and I agree with them.

I'm also not sure why the default font color is slightly blue shifted, but that's personal preference. I'd like to see it grayscale.

As Edge is now based on Chromium, switching to modern-normalize is probably a good idea. 🙂

Please consider publishing on npm (maybe bower as well?) so we can manage versions using standard tools.

There are three missing and(s) in lines 410, 419 and 428 that produce an error.

I designed / coded a page and in Chrome it's fine (tested using the responsive mode, aka device toolbar), but when I use on my actual phone, the div.row > div.six.columns doesn't seem to ocupy 100% of the width, breaking the whole viewport :( is it because of the @media queries using ppi instead of pixels? ( @media only screen and (max-resolution: 119dpi) and (min-resolution: 91dpi), not all html )

Could you add a minified version?