todaydesign / megatype Goto Github PK

Using superscripts with the sup element seems to mess up the baseline (see screenshot below).

Is this a known issue? Can this be fixed somehow?

First time using MegaType.

I am using it together with Gulp: when I include MegaType in my SCSS file and I run sass via Gulp, the amount of CPU and RAM used increases up to the limit! And, unless I do not manually stop Gulp, the process keeps running.

I performed some "tests": I excluded one by one every component of MegaType.
When I do not include the "toolset__math" I do not have this performance issue (even considering that I am not using the function inside this file).

Hello! Having tried about 10 sass packages for setting type, I love megatype so far! So simple and effective, especially the debugging. I was wondering about min and max font sizes, because it's not always preferred to have extremely large font sizes on television screens and tiny on mobile. $min-font-size has no effect, or I'm not understanding something. Any way to add $max-font-size after certain breakpoint?

I use Zurb's Foundation framework... any thoughts on the best way to integrate Megatype? Thanks for such a great tool!

I want my body text to be 16px and leading (line-height) as 24px.

I thought I could set the root size to 16px, and use $baseline-subdivisions: 2, but this outputs a line-height of 2 instead of 1.5, which gives a line-height of 32px.

Instead I have to use a root size of 8px - which is fine, but then what is $baseline-subdivisions for? In what case would it be useful? I thought it would help in my case, but it seems too do nothing.

I couldn't find the licensing information for this project easily; https://github.com/StudioThick/megatype/blob/master/bower.json#L8 says it is MIT. If so, please

• include a LICENSE.txt file with the MIT license,
• an AUTHORS.txt file with the copyright holders, and
• a CONTRIBUTORS.txt file with the human contributors if they don't own their copyrights.

As an example, https://github.com/googlefonts/fontbakery/ is set up similarly to the above.

Could you provide some tips or examples on the best way to implement images (inline and block) within a typographic design? Working with megatype I have found images as-well-as a few other elements to give me fits. It would even be awesome to get something like responsive aspect-ratios mixin to work within megatype.

Screenshot with images:

Screenshot without images:

Any insight and examples would be greatly appreciated, though.

It took a little time to figure out that the typeset() mixin does not actually set font-family. It would be nice to include a note in the documentation.

Here's an example:

h2 {
    font-family: font-family-of($sans);
    @include typeset($sans, 40px, 46px, 2, 2);
}

As I am a beginner with MegaType, Is there already a function/mixin that can calculate line-length, based on font-size and line-height . It might not be possible to dynamically calculate max-width based on font-family, font-size, and line-height.

The optimal suggested character count is 45 to 75.
Optimal Characters Per Line

I even wonder if this tool could be turned into a Sass function that would output a max-width based on the typeset mixin
Golden Ratio Typography Calculator

Noticed this today when updated everything to their up to date versions.

$ sass -v
Sass 3.4.22 (Selective Steve)

My package.json:

{
  "name": "project",
  "version": "1.3.5",
  "description": "A minimalist WordPress starter theme.",
  "author": "Digitoimisto Dude Oy ([email protected])",
  "devDependencies": {
    "browser-sync": "~2.12.7",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "3.1.0",
    "gulp-changed": "^1.3.0",
    "gulp-clean-css": "2.0.7",
    "gulp-concat": "2.6.0",
    "gulp-header": "1.8.2",
    "gulp-notify": "^2.2.0",
    "gulp-pixrem": "^1.0.0",
    "gulp-sass": "^2.3.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "1.5.3",
    "gulp-util": "^3.0.7",
    "megatype": "^1.0.2",
    "require-dir": "^0.3.0"
  },
  "dependencies": {
    "font-awesome": "^4.6.1",
    "jeet": "^6.1.2",
    "jquery": "~2.2.3",
    "normalize.css": "^4.1.1",
    "sass-web-fonts": "^2.0.1"
  }
}

Error:

[12:00:08] styles error: Error in plugin 'gulp-sass'
Message:
    content/themes/project/node_modules/megatype/megatype/_typography.scss
Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.
       From "@extend %typeset-child" on line 316 of content/themes/project/node_modules/megatype/megatype/_typography.scss
        on line 96 of content/themes/project/node_modules/megatype/megatype/_typography.scss
>> %typeset-child {
   ^

Details:
    formatted: Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.
       From "@extend %typeset-child" on line 316 of content/themes/project/node_modules/megatype/megatype/_typography.scss
        on line 96 of content/themes/project/node_modules/megatype/megatype/_typography.scss
>> %typeset-child {
   ^

    column: 1
    line: 96
    file: /Users/rolle/Projects/project/content/themes/project/node_modules/megatype/megatype/_typography.scss
    status: 1
    messageFormatted: content/themes/project/node_modules/megatype/megatype/_typography.scss
Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.
       From "@extend %typeset-child" on line 316 of content/themes/project/node_modules/megatype/megatype/_typography.scss
        on line 96 of content/themes/project/node_modules/megatype/megatype/_typography.scss
>> %typeset-child {
   ^

    messageOriginal: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend %typeset-child" on line 316 of content/themes/project/node_modules/megatype/megatype/_typography.scss

    relativePath: content/themes/project/node_modules/megatype/megatype/_typography.scss

Any idea?

After some discussion we'd like to put up the idea to move this project to a NoHarm license.
I assume this probably affects noone here but will leave up for a while before we swap in case anyone has suggestions around the best way to do so?

https://github.com/raisely/NoHarm

I've looked around, but didn't see the config used on http://megatype.studiothick.com/ anywhere. I was wondering if it'd be possible to make that available. I've read through the docs and the bootstrap example, but could use another good example of implementation.

Thanks for megatype! I've been trying to solve similar issues for a while now and this is the best approach I've found.

I love using megatype for responsive typography, but in every element modular scale is not needed or necessary, but even for those elements it's nice to have "automated" sizing. However, if I set the type with typeset-mixin, I can't override line-height value. Here's an example:

    @include min-width(3 4) {
      @include typeset($sans, 18px, 36px, 0, 2);
      line-height: 1.5;
    }

Is it possible to have it like this: @include typeset($sans, 18px, 1.5, 0, 2);, or that the mixin would respect the definition after it?

Currently there isn't an easy way to set padded items like buttons or form inputs on the baseline grid; is a good candidate for a mixin.

Unsure at this stage if this should just set the type inside the buttons on the grid, and/or set the padded box as well. Possibly could be an option, or two mixins.

Hello Guys, i wrote megatype for Stylus some time ago, and want to share it with community. Never done it before, and not sure this is the right place for such topics, but can you check it out, and, maybe, add a link to my repo somewhere?

https://github.com/theConscience/megatype-stylus

Or maybe tell me, where to place a request or whatever.

P.s. Repo isn't propertly done yet, if someone can help me with this — it will be very appreciated!

Hi there!

I've been digging into MegaType and noticed that the font-family property of the font maps as defined in the _config.scss file (see below):

$sans: ( font-family: '"Helvetica Neue", Arial, sans-serif', regular: normal, bold: bold, cap-height: 0.71 );

are never utilized in the typeset() mixin to actually set the font-family property on the selector.

I believe this can be resolved by adding the following lines to the typeset() mixin in the _typography.scss file:

font-family: font-family-fallback-of($font);
font-family: font-family-of($font);

I'm happy to make a pull request if you agree that this was an oversight. However, if I'm not utilizing the mixin appropriately, could you help me understand what I'm missing?

Not everybody likes bower; need to register with npm

It seems mobile-first is an assumption that is hardcoded into the framework. Because our breakpoints look like this

$breakpoint-map: (
        0: (
                start:          0,
                max:            map-get($breakpoints, sm),
                rootsize:       14px
        ),
        1: (
                start:          map-get($breakpoints, md),
                max:            map-get($breakpoints, lg),
                rootsize:       16px
        ),
        2: (
                start:          map-get($breakpoints, lg),
                max:            map-get($breakpoints, xl),
                rootsize:       16px
        ),
        3: (
                start:          map-get($breakpoints, xl),
                max:            map-get($breakpoints, xl) * 1.25,
                rootsize:       18px
        )
);

However we have a desktop "app" where we force mobile clients to use the native apps, thus our "base" css is defined for breakpoint 1 or 2 with a rootsize of 16px.

Now when i use megatype the first html declaration written by @include megatype; gives me

html {
  font-size: 87.5%;
}

Question: How can i change megatype, so that we don't need to declare mobile-first statements in css, but instead can use the media query mixins to specify statements explicitly for mobile, tablet, big desktops etc.?

Hi,

I see that the media() mixin resets the root font size after applying the content to a breakpoint, and this is expected, however it always reset the value base on breakpoint 0: https://github.com/StudioThick/megatype/blob/master/megatype/_media.scss#L74

In case of nested media queries this could be incorrect.

Should the media mixin remember the last root fontsize and reset the value to that, instead of always reset based on breakpoint 0?

I have not experienced the problem myself, and I guess that nested media queries are not widely used, the doubt jut came by reading the code and I thought about asking about it.

Ciao,
Antonio

I think we need to review the linear gradient functions that draw this, and whether we can build something that draws more reliably in edge cases.

A few initial ideas;

• Try use rem/em units for gradient stops
• Try use rem/em units for background size
• Try draw lines using an inline svg in css
• Try a raster image

I suggest you change/rename the media mixin to mt-media or something similar as it conflicts with the popular include-media media mixin.

https://www.npmjs.com/package/include-media

The paragraph starting with "Theosophists have guessed at the " in the Demo does not seem to sit on the baseline grid.

Am I missing something?

Need a good way to set elements on the grid that might have top and/or bottom borders.

Could be a mixin or a new parameter on existing mixins (however staying very mindful that we don't want to add complexity to existing mixins)

Should probably use a pseudo element or something crazy

I'm not even sure if this is possible with the methodology backing this project, but there are many times in my projects that I like to control sections of my application separately, with separate scaling. To do this, I normally use rem sizing at the section level, and em sizing for everything else, that way I can individually scale sections based on various conditions, like breakpoints. Is it possible to allow em for the typeset mixing, in addition to px and rem?

Recently we've noticed that some typefaces that don't have their cap-height centred inside of their line-height are going to be a problem.

A good example of this is Adobe Caslon Pro, which sits close to the top of the line-height box:
https://typekit.com/fonts/adobe-caslon-pro

The "spooky box" is not even above and below this typeface.

I propose a new key in the font map, alongside cap-height. This could be called something like cap-position and would default to 0.5 (centred), but could be tweaked to push Megatype calculations up and down inside the "spooky box".

In theory, cap-height and cap-position should handle any combination of scale and centering of characters in a typeface.

I have a problem! this is my package.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"devDependencies": {
"browser-sync": "^2.2.3",
"del": "^1.1.1",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.2.0",
"gulp-concat-json": "^1.0.0",
"gulp-data": "^1.2.0",
"gulp-extend": "^0.2.0",
"gulp-jsoncombine": "^1.0.2",
"gulp-minify-css": "^0.5.1",
"gulp-plumber": "^1.0.0",
"gulp-print": "^1.1.0",
"gulp-rename": "^1.2.0",
"gulp-sass": "^3.0.0",
"gulp-swig": "^0.7.4",
"gulp-uglify": "^1.2.0",
"node-bourbon": "^4.2.8",
"node-neat": "^1.7.1-beta1",
"path": "^0.11.14"
},
this is ERROR!

essage:
Error: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .layout-threefourths" on line 4 of src/assets/sass/_blockquote.scss
on line 217 of src/assets/sass/_grid.scss

.layout-threefourths,

Details:
status: 1
file: /Applications/MAMP/htdocs//template/src/assets/sass/_grid.scss
line: 217
column: 3
formatted: Error: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .layout-threefourths" on line 4 of src/assets/sass/_blockquote.scss
on line 217 of src/assets/sass/_grid.scss

.layout-threefourths,
--^

messageFormatted: src/assets/sass/_grid.scss

Error: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .layout-threefourths" on line 4 of src/assets/sass/_blockquote.scss
on line 217 of src/assets/sass/_grid.scss

.layout-threefourths,
--^

messageOriginal: You may not @extend an outer selector from within @media.

You may only @extend selectors within the same directive.
From "@extend .layout-threefourths" on line 4 of src/assets/sass/_blockquote.scss

My files

.intro {
.layout.container {
@include media($tiny) {
@extend .layout-full;
}
@include media($medium) {
@extend .layout-semifull;
}
@include media($large) {
@extend .layout-narrow;
}
.description, .inroduction {
margin: 0;
}
.display-3 {
margin-bottom: 32px;
margin-top: 0;
@include media($medium) {
margin-top: 6px;
}
}
}
}

help me to solve this problem
tnx

With a grid such as 16px it's often not viable for small type sizes to sit on this grid; in design this is usually handled by letting every second line (or 3rd, 4th, 5th) sit on the baseline grid. This would be a great feature to have!

Considerations:

• this messes up the flow of sequential elements, do we need to handle a correction, or is this too complicated?

from http://megatype.studiothick.com/ to https://megatype.coolwebsite.today or whatever

Hi,

I find the respond-to() syntax used for instance by http://breakpoint-sass.com/ very handy: it improves the readability of the scss code and I am also quite used to it, so I would like to have it available in megatype.

I have a prototype already, I am going to send a pull request for review.

AFAICS it's not advisable to use breakpoint-sass together with megatype because that would introduce inconsistencies wrt. the root fontsize, so the support has to be added to megatype itself and based on the `media()' mixin which handles the root font size change.

Ciao,
Antonio

Hey,

Could you include a docs folder with the demo page?
I am having trouble setting this thing up..

thanks

It would be great to see a Bootstrap version of MegaType, a lot of our clients use it.

Background position is calculated incorrectly and therefore the line doesn't show up.