WhatsNewSaes / Skeleton-Sass

The (un)official Sass Version of Skeleton (2.0.4): A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Getting rid of html font-size: 62.5%

verpixelt opened this issue · comments

I've seen you're using the 62.5% font size 'trick' on the html element to simplify the mathematical aspect of converting px to rem. Using a rem-calc function (like Foundation has one) would solve your "problem" without messing around with the base font-size.
(Besides the point that setting type sizes in px is considered bad practice for legitimate reasons anyway.)

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);
  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

So you could simply type margin-bottom: rem-calc(20px);
If you're interested in this I could submit a pull request.

Thanks for this @verpixelt. Yeah, I definitely see the value in this. My only reservation is that I want my less/sass repo's to basically be identical to the the original Skeleton so users can switch between them seamlessly https://github.com/dhg/Skeleton/blob/master/css/skeleton.css#L122.

I'd suggest that you make an issue with the original, and we can try to change it from there.

I can understand your concerns, but there's no way that we integrate a Sass function into plain CSS. The only possibility would be getting completely rid of the 62.5% in the CSS version, too. This would lead to a whole structural shift. I doubt that they're willing to do that = /

Imho Sass should give you opportunities to write your CSS files more efficiently and with a bit more fun ;) So, you already give people more flexibility by using variables. That's a first step, and it's cool. This function wouldn't change that much. People would still write simple values which are easy to understand and you could get rid of a 'hack' which imho has no right to exist anyway.

I agree with @verpixelt on that fact that sass gives us abilities to make the code we write easier and efficient, and if we are always trying to keep this version exactly inline with the css version, we are in a way hindering ourselves from using the full benefits of sass, imho I see no issue with progressing this version further in terms of functionality, if the main base of the code is the same as the css version

Yeah, I hear ya. Or maybe we make another repo called "Exoskeleton" (or something along those lines) that includes all the features that we want in skeleton, but are never added ;)

id been down for either, happy to help with the transition also if we decided to change it or move it to a new repo under a diff name

I can't change your mind. Imho this repo would be enough to do the transition. People tend to make mistakes if they just use a framework or something similar without to really understand what's happening. This is a Sass fork of the original CSS repo. So if you want to use Skeleton without the Sass magic, but still using Sass, just rename the file and you're fine. If you want the more advanced stuff, here you go! The decision is yours.

Hey guys,

put together a little project called boneless This will give us the freedom to be able to improve/expand without feeling tied down.