todaydesign / megatype Goto Github PK
View Code? Open in Web Editor NEWExecute typographic structure with ease
License: MIT License
Execute typographic structure with ease
License: MIT License
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
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.
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?
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;
I suggest you change/rename the media
mixin to mt-media
or something similar as it conflicts with the popular include-media media
mixin.
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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.