jakegiltsoff / sassline Goto Github PK

In _typography.scss, counter-increment: none; should be added to unordered list items to prevent them from incrementing the counters.

I couldn't understand how to use this lib.

background-size: 100% 0.15rem;

They seem to get too short to be visible at smaller breakpoints.

How about to add vendor-prefix during transferring scss to css ? I think it will be more simple

Would it be possible to make v1.0 tag available? If I recall correctly, it does not leverage sass maps, right? Currently, the Node Sass compiler does not have full feature parity with the Ruby compiler, preventing me from using Sassline on several ember-cli projects.

Would love a grid package or an explanation of how to integrate Sassline into another grid framework.

Very small thing, but the link in the README.md under the Why? heading seems broken. I’m getting a 404.

When installing sassline into an existing project via bower, layouts should probably be optional.

Also, is sassline dependent on the aggressive CSS reset? Or would it work just as well using normalize-css?

Hi!

A lot of people use Sass extensions via the ecosystem powered by RubyGems and Compass. I dare to presume that there are much more Compass users than libsass users.

Can you please distribute SassLine via RubyGems?

Basically, you need to add two files:

• sassline.gemspec (example)
• lib/sassline.rb (example)

You will probably also have to rename assets/sass/style.scss to assets/sass/sassline.scss.

I would like to recommend (and implement) Bundler to handle Gem versioning. Bundler has proven a great tool for keeping track of the Gem versions for a lot of my projects.

http://bundler.io/

I'm using sassline with WordPress and it works quite well out of the box. However, single article body class is classed as .single by default, so could sassline's class name be renamed to something else instead of .single so this would work better with WP out of the box. Just a suggestion.

Hello,

I think sassline is awesome but for some projects the leading is a little to loose.
How hard would it be to have a line-height variable?

I can look at this if you don't have time...

Thanks,

Making this module eyeglass-ready makes it easy and consistent
to install it from a npm package and import it in sass.

[https://github.com/sass-eyeglass/eyeglass](More information about eyeglass).
eyeglass yeoman generator for easily preparing the project.

In lieu of this article -

https://creativemarket.com/blog/2013/12/25/4-typography-trends-for-2014

I think Sassline should be reworked to use Flat Fonts

Adding a develop branch to the tree will help developing the project without breaking the master, stable branch.

Error coming up as I'm compiling CSS.

WARNING: break-1 is not a set breakpoint variable
         on line 29 of ../HNReactive/node_modules/sassline/assets/sass/sassline-base/_mixins.scss, in mixin `breakpoint`
         from line 107 of ../HNReactive/node_modules/sassline/assets/sass/sassline-base/_typography.scss
         from line 6 of ../HNReactive/node_modules/sassline/assets/sass/_sassline-base.scss
         from line 5 of ../HNReactive/node_modules/sassline/assets/sass/style.scss
         from line 19 of ../HNReactiveChild/Library/scss/app.scss```

Compiling using Gulp Sass.  Thanks.

Hello! I'm setting up Sassline in my project and am getting an error when I compile.

My error is:

File "assets\scss\vendor\sassline-master\sassline-base_variables.scss" changed.
Running "sass:dist" (sass) task
Error: Undefined operation: ""(min-width: 90.0625em) and (max-width: 120em)"/16 times 1em".
on line 52 of assets/scss/vendor/sassline-master/sassline-base/_mixins.scss, in `rootsize'

My variables are set as follows:

$breakpoints: (
xsm: 320,
sm: 480,
smd: 640,
md: 785,
mdlg: 900,
lg: 965,
lgr: 1080,
xlg: 1200,
wd: 1280
) !default;

$rootsizes: (
rootsize-0: 12, // 24px line-height body text
rootsize-1: 14, // 28px line-height body text
rootsize-2: 15, // 30px line-height body text
rootsize-3: 17, // 34px line-height body text
rootsize-4: 19 // 38px line-height body text
) !default;

Many thanks in advance for any guidance!

Are there plans to distribute sassline as a NPM package?

A bug in Chrome causes font size inconsistency between refreshes. It only applies when rems are defined for the body font size. Switching the body to ems fixes the issue.

https://code.google.com/p/chromium/issues/detail?id=319623
and
https://code.google.com/p/chromium/issues/detail?id=362113

I've patched this by adding a $unit parameter (with 'rem' as the default value) to the fontsize mixin allowing me to pass in 'em' as the desired unit. Feels pretty hacky though.

The baseline grid doesn't work (properly) in Google Chrome in the current version (at least). Having it side by side in Chrome and Firefox the text slowly but steadily shifts itself upwards away from the baseline. Inspecting the computed CSS in both cases indicate to wrongly computed heights.

I set up Edge (v. 44.18362.449.0), Firefox (v. 73.0) and Chrome (v. 80.0.3987.106 ) to emulate a viewport of 1024x768. The section#baseline element differed in all three browsers in height: 8024px (Firefox), 7957.920px (Chrome), 8051.2px (Edge). Going in deeper and comparing element heights:

I could go on but the result is that grid is visibly broken when showing the baseline grid and the error accumulates quickly. In Edge there's also some error but the deviation is very small and only shows further down the site significantly (especially visible from the horizontal separator line onwards). Since everything sticks nicely to the baseline grid in Firefox this has to be a browser specific issue. Obviously the height deviation at the height property between Edge and the rest is due to the alternative box model including the padding (resulting in the same corrected height properties) but then the margins don't line up and destroy the grid align.

Any thoughts on this?

From the code, I see, that only unsupported thing is rem units (rem units won't work on pseudo elements in earlier ie versions).
Maybe sassline can be used with older browsers but with few issues? What are they? Or sassline just can't be used on these browsers?
Thank you!

Hey. I just made a comment on the bower packaged pull request which was merged lately.
The json doesn't seem to work as expected.

See the comment on the Pull request here: #29

Let me start off by saying this package is really really awesome. Typography requires that the design abide by systems that are so practical and yet so difficult to master - at least from my vantage point as a technologist rather than as a designer - so to have all of that bootstrapped is super helpful. Thanks for all your hard work. 👍

Could we add more areas of configurability? For example, by default, anchor underlines are lightened by 20% as compared to the color of the link text - I'd personally love it if this in particular (and several other options, for that matter) were configurable.

Hope this is something you'd be down for. I'm going to submit a PR 😎

Sometimes, if a word happens to have a substring that is a mathematical unit, it will be displayed in a weird way.

• nus-cs2113-AY2324S1/pe-dev-response#455

I'm really enjoying Sassline so far, especially the breakpoint-specific scales, etc. However, I'm having some difficulty styling a simple <button> that maintains the vertical rhythm and it seems this will be a problem for other elements requiring borders or more padding.

The sassline mixin doesn't seem to have a way to account for additional padding or borders. For example, in the case of a <button> a 1px border causes the inner text to fall 1px below the baseline, and all descendant elements to fall 2px below the baseline. Also padding-top is always greater than padding-bottom which isn't typically desirable in buttons or other form input elements where the text should be vertically centered between the borders.

Please let me know if I'm missing something, but it seems like another mixin or function is needed that also accepts border and/or padding arguments and automatically adjusts the top/bottom margins to maintain the vertical rhythm by snapping to the closest fitting n lines of the current baseline.

When this is a solved use case (or if it is already), perhaps we can update the Sassline demo to include basic form elements.

Keep up the great work Jake!

Creating packages · Bower

• init/add bower.json
• add git semver tag: semantic versioning - bower register new version - Stack Overflow
• update Readme
• register package

Bourbon is a Sass mixin library, which automatically handles vendor prefixes, modular scale, clearfix, etc. It's like Compass, but much more lightweight.

With Bourbon, we can make the code cleaner and more maintainable. That make it worthy to introduce a dependency for this project, in my opinion.

I've noticed the font sizes are rather tiny at small break points on touch devices. Before i absolutely hack this to bits figuring out the solution, do you know of a really clean way to slightly increase the font sizes/baselines if touch is enabled?

So if a .touch feature class is on html, switch to a modular scale that's set for touch devices.

I know the likes of the BBC (on some of their newer pages) slightly increase their font sizes for touch to compensate for viewing distances etc. I'd really like to enable something similar for sassline as i'm noticing the type is a little small when reading from an iPhone.

In few of the mixins like @mixin fontsize there's this line of code:

  // Check if value exists in scale.
  $in-scale: in-modular-scale(scale-0, $fontsize);

A function that checks if given $fontsize is in $modular-scale.
The mixin is returning fontsize in rem in a given breakpoint which is default 0.
Why is the call to in-modular-scale() only looking at scale-0?
Shouldn't it look for the font-size (by user) from the breakpoint (also by user) input in modular-scale?

I'm most likely wrong but I just need to understand before I just plug this in.

There is a missing comma between ignore and license. it causes this error:

bower sassline#~2.1.0         download https://github.com/designbyjake/sassline/archive/2.1.1.tar.gz
bower sassline#~2.1.0          extract archive.tar.gz
bower sassline#~2.1.0       EMALFORMED Failed to read /var/folders/sj/crhhxh_j1hx0qyw1mkrp3p9w0000gp/T/user/bower/2c6683b334210585a2c29a625954d04d-66677-TWbKPa/bower.json

Hi!

The use case where vertical rhythm really shines is a two-column layout. It lets users visually compare how fonts of different size align to the same baseline.

Are you planning to create stylus version ?

I've noticed that the sassline mixin ignores the font type.

For example...

@include sassline(18, $bodytype, 1.5, 1, all);

Outputs

line-height: 1.5rem; font-size: 1.5rem; margin-bottom: 0.74499rem; padding-top: 0.25501rem;

As well as the break point adjustments.

Whilst...

@include sassline(18, $headingtype, 1.5, 1, all);

Outputs the same.

Am I missing something?

Hi there, loving sassline!

Having a bit of trouble though so I was wondering if you could explain how to use the max-width breakpoints.

I'm currently trying:
@include breakpoint(break-0, break-2)

However the max doesn't seem to be working. Am i doing anything obviously wrong?

The following invalid-meta warning is showing up when installing the package via Bower, might be worth making a correction for it.

$ bower install --save sassline
bower not-cached    https://github.com/designbyjake/sassline.git#*
bower resolve       https://github.com/designbyjake/sassline.git#*
bower checkout      sassline#2.1.2
bower invalid-meta  The "main" field cannot contain globs (example: "*.js")
bower resolved      https://github.com/designbyjake/sassline.git#2.1.2
bower install       sassline#2.1.2

very nice, I have been wanting a baseline grid for some time..
for the grid look at something like http://daneden.github.io/Toast/

i would think it would be good to be able to integrate this into larger frameworks?

Adding a Sache file to the project gives a way to share the module with the Sass community at Sache.in

The process is described below.
http://thesassway.com/intermediate/share-your-sass-with-sache-a-quick-guide

Seems the gradient used to show the baseline grid is off in Safari — seen both on mac and iPad.

Hi Sassline is great. I appreciate that you are just trying to do ONE thing very well and you do do it well. That being said you do include some layout CSS in the project, but you don't mention images. How can we use images in Sassline?

Sassline looks great as is, but I'm using it for an internal company project and I'm afraid people will see the large spacing between sections and freak out. How can I reduce this without affecting your baseline alignment?

How does one work out the cap height for fonts?

Just cloned the repo, getting this:

[21:06:02] [gulp-sass] file to import not found or unreadable: modules/*.*
Current dir: /Users/rolle/Projects/dudetest/content/themes/dudestarter/sass/typography/sassline/assets/sass/ on line 13 in /Users/rolle/Projects/dudetest/content/themes/dudestarter/sass/typography/sassline/assets/sass/style.scss

It works with:

// Import all SCSS modules with Sass globbing.
@import "modules/footer";
@import "modules/globals";
@import "modules/header";
@import "modules/nav";

If someone wants to use Bower to install Sassline, and then use bower_compents\sassline\assets\sass as a location to look for items being imported they'd have to use the generic @import "style" which is not very descriptive and would lend itself to importing in the wrong file from a different directory.

style.scss should be renamed to sassline.scss.

See how the following mixin libraries follow this same pattern:

Since this may be a breaking change for those who explicitly targeted bower_compents\sassline\assets\sass\style.scss you should include a major version bump from v2.1.2 to v3.0.0.