Comments (6)
@yulianglukhenko check out the strip units function in bourbon: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_strip-units.scss and more importantly this thread in stack overflow: http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
The most important line there is:
You need to divide by 1 of the same unit.
So ($base-line-height * 0 + 1)
is 1
and what ever the unit is (in your example it'd be pixels). Then $base-line-height / 1px
would give you the unitless value of $base-line-height
$unitless-line-height: $base-line-height / $base-font-size;
would give you 28px / 16px
the result would be 1.75px
which is not what we want the line-height to be.
from bitters.
I've tested this numerous times and it works for me; however, you can strip the units however is best for you. That's not the real issue here.
The real issue is the fact that the math is wrong. This: $unitless-line-height: $base-line-height / ($base-line-height * 0 + 1);
would be this: 28px / 1
would be 28
. A value of 28
for the line-height is 448px
if the font size is 16px
. Please fix this as it's not usable the way it's set up now.
from bitters.
@yulianglukhenko Except the $base-font-size
in Bitters isn't 16px
it's 1em
so the math comes out to 1.75
for Bitters out of the box. Is your issue that you think that if you change the value for $base-font-size
that you shouldn't have to change the values for $base-line-height
and $unitless-line-height
?
from bitters.
Damn.. that's my issue. Completely forgot that base-font-size is 1em out of the box. Thanks for the explanation and sorry for the hassle.
from bitters.
@yulianglukhenko No problem. You've pointed out an issue with some of those variables which is a good thing. There is a long discussion on $unitless-line-height
over here: #80 (diff)
It is probably going to change.
Is there a reason that you aren't using ems? Or event the em()
function in Bourbon?
from bitters.
I usually do for simple websites. However, the web app I'm currently working on was designed by a print designer and has a lot of weirdly positioned elements that need to have strict font-sizes. Since this will be a responsive app, the decision was made to go with px
instead of em
.
from bitters.
Related Issues (20)
- Bitters v2.0.0 is not published to RubyGems HOT 1
- Bourbon’s `modular-scale` function is still used
- Bourbon is still imported in the contributing site
- Button's have inaccessible text color
- Use font weight variables?
- Remove duplication of normalize.css styles
- Add support for ensuring the HTML hidden attribute hides content
- Swap the term “base” for “elements”
- Add normalize.css to contributing site
- In Safari, search inputs are a different height
- Replace gulp with Parcel
- Buttons, links styled as classes instead of elements HOT 1
- Add `height: auto` to `img`
- Deploy preview site to Netlify for deploy previews HOT 1
- Releasing command not working
- Improve testing
- Document browser support
- Add more post-publish steps to releasing documentation
- Netlify site not building HOT 1
- CI fails due to bundler version
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bitters.