jhildenbiddle/vertical-rhythm-reset

A Sass/SCSS library for responsive vertical rhythm grids, modular scale typography, and CSS normalization.

Vertical Rhythm Reset

A Sass/SCSS library for responsive vertical rhythm grids, modular scale typography, and CSS normalization.

• Documentation

Screenshot

Features

• Simplified vertical rhythm grids
  Maintain visual symmetry by aligning elements to an invisible-yet-recognizable layout pattern.

• Modular scale typography
  Bring harmony to your typography using a calculated range of proportional font sizes.

• CSS reset & normalization
  Standardize the default presentation of HTML5 elements across desktop and mobile browsers.

• Responsive layout support
  Define custom breakpoints, each with their own vertical rhythm and typography settings.

• Customizable utility classes
  Create pixel-perfect layouts in less time and without the need for custom classes.

• Fast-and-easy implementation
  As little as two lines of code generates the CSS foundation for you project.

Browser Support

• Chrome 19+
• Edge
• Firefox 4+
• Internet Explorer 9+
• Safari 6+

Sass Support

• Dart Sass

Installation & Usage

See the documentation site for details.

Credits & Attribution

• Normalize.css by Nicolas Gallagher and Jonathan Neal.
• Modular Scale by Scott Vellum and Tim Brown.

Sponsorship

A sponsorship is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.

If you benefit from this project, please consider lending your support and encouraging future efforts by becoming a sponsor.

Thank you! 🙏🏻

Contact & Support

• Follow 👨🏻‍💻 @jhildenbiddle on Twitter and GitHub for announcements
• Create a 💬 GitHub issue for bug reports, feature requests, or questions
• Add a ⭐️ star on GitHub and 🐦 tweet to promote the project
• Become a 💖 sponsor to support the project and future efforts

License

This project is licensed under the MIT license.

Copyright (c) John Hildenbiddle (@jhildenbiddle)

vertical-rhythm-reset's Issues

Flexible sizing

Wondering what your thoughts are on adding flexible sizing instead of strict breaks. Here's some examples:

https://codepen.io/MadeByMike/pen/bEEGvv?editors%3D0100
https://github.com/twbs/rfs
https://codepen.io/MadeByMike/pen/vNrvdZ
https://www.sassmeister.com/gist/7f22e44ace49b5124eec

Deprecated dependencies

    LibSass 3.2+
    Ruby Sass 3.4+

The libraries are deprecated. (https://sass-lang.com/blog/libsass-is-deprecated, https://sass-lang.com/ruby-sass)

Using the dependencies in this repository with latest LTS node (gallium):

vertical-rhythm-reset/package.json

Lines 41 to 48 in f9cef25

	"devDependencies": {
	"browser-sync": "^2.27.5",
	"markdownlint-cli": "^0.28.1",
	"node-sass": "^6.0.1",
	"nodemon": "^2.0.12",
	"rimraf": "^3.0.2",
	"sassdoc": "^2.7.3"
	}

13 vulnerabilities (4 moderate, 9 high)

Is it fruitful to hope for a project update?

Unordered lists in Firefox

I wondered why the grid was off and scrolled up to here to find the culprit. Seems to only affect Firefox.

placeholdit.imgix.net gone

Images are not showing for fixed unit examples. Would https://place-hold.it/ be a better alternative?

Make modular scale function public

I really love the sparse simplicity of the core vr() method. That said, I do occasionally find need to reference scale values outside of the mixin's parameters. Skimming thru your source code, I found the internal _modular_scale method, which I assume is being used to calculate each step value.

I was wondering if it'd be possible to update this internal function so it can be used as a public utility? (Maybe even alias it to an ms shorthand, consistent with the vr naming convention!) That way one could write:

@import "vertical-rhythm-reset";
$vr-modular-scale: 1.33;

.example {
  @include vr($padding-top: 1);
  position: relative;
  top: -1 * ms(1); // modular scale shorthand alias
}

And that ms function would automatically pull in the $vr-modular-scale global and output the same step value as the above vr calculation.

Let me know if that makes sense. Happy to clarify if/where I can!

Reset is resetting a little too hard, maybe?

Hello!

I wonder why in the reset we have this line:

*,
*:before,
*:after {
  /* some properties */
  font: inherit;
}

Why the entire font, and not just font-family and font-size ? They're the only properties that could affect vertical rhythm, aren't they? The current problem I have with this is that font-weight and font-style are forced to "normal", so I have to re-style i, and em and strong. Is it normal, is it intentional?

On another topic: vertical-align: bottom kind of break sup and sub, it would be nice to give them again their respective alignments of "super" and "sub" in the reset. Would you like me to create a PR for that?

gulp-sass v2.3.2 (libsass?) incompatibility

Tested your SCSS using gulp-sass v2.3.2 and it stopped my gulp task.
It didn't throw me an error, it just stopped.

Then tested it in http://www.sassmeister.com/, selected LibSass v3.3.6 and it didn't compile it as well.

Testing it further with Sass v3.3.14 it gave me the Error "Functions can only contain variable declarations and control directives.".

It works with regular ruby sass v3.4.22 (I installed gulp-ruby-sass v2.1.0).
I'm not sure what the problem is and couldn't narrow it down but I'm assuming that how some functions were written could be the cause.

Maybe add a heads up in the readme before the problem is solved and so than others don't have to spend many hours finding out what the problem is.