csswizardry / typecsset Goto Github PK

Would there be any big negative to separating the mixins from styles?

There are some scenarios where the default styles may need some additional attributes for each element which means either duplicating the class names in a separate Sass file or not using typecsset.

Separating the mixins means the awesome sauce for line heights and font sizes can be used while being able to define extra styles for each element.

The intention

Typecsset uses this quick/painless/JavaScript-free service to get a baseline grid overlay from the simplest way.
This choice might please everybody but users have different contraints:

• their env. is not always connected
• for accessibility reasons, you might want to make your text larger (with the help of Text Zoom)

The proposal

Prefer a plain CSS method using the CSS Backgrounds module level 3.

/**
 * 1. Draw (from the bottom to up) a linear gradient of colours which represents
 *    a line with a defined thickness.
 * 2. Define the line box height as the height of the background image.
 */

background-image: linear-gradient(to top, rgba(0, 0, 0, .21) .1em, transparent .1em) !important; /* [1] */
background-size: auto $typecsset-magic-ratio * 1em !important; /* [2] */

Pros:

• Drop out all external dependencies
• No regression compared to the first idea
• Would be possible to draw a correct baseline grid overlay even if the user has set a font size higher than 16px on the root element (or if he zoomed with Text Zoom)

Cons:

• Need necessarily a modern browser
• Would not be possible to have a dashed render

Here is an exemple which superimposes the two methods: http://jsfiddle.net/7studio/RKh7z/

You might want to mention in the readme.md that users can also set the precision setting in the project config.rb Compass file. Just add this at the end of that file, then restart Compass:

Sass::Script::Number.precision = 7

Suggestion: write a function that allows you to specify $typecsset-base-font-size and $typecsset-base-line-height for any number of breakpoints.

More and more these days I'm modifying text size based on viewport, so it would be really neat to be able to do this out of the box.

I'd be more than willing to take a hack at it, just seeing if this functionality is something you'd be interested in having in the project.

Any reason why this isn't on Bower? I'd much rather run bower install typecsset than browse the repo and download the .scss file. Not to mention updating: bower update vs paying attention to the repo and downloading the file again.

<hr /> feels bad because no one invited her to the typecsset party :(

Unfortunately at least the old Safari Browsers don't have CSS 2.1 quote property support. So the blockquotes are breaking there.

The if-function at line 126-130 is empty and unused. The real function is nested under HTML a few lines below and working as it should. This doesn't change a thing once preprocessed, so quite a minor detail 😃

@if $typecsset-show-baseline == true {
/**
 * 3. If you have chosen to display a baseline grid, we turn it on here.
 */
}