matejlatin / gutenberg Goto Github PK
View Code? Open in Web Editor NEWA meaningful web typography starter kit.
License: Other
A meaningful web typography starter kit.
License: Other
Awesome work!
I'm trying to incorporate Gutenberg into my own framework, heavily influenced by Inuit CSS by the great Harry Roberts. Took me a while to figure out what is what.
Here are some suggestions on how we could improve Gutenberg,
#{ $interpolate-me }
that make the code barely legible.And perhaps we could incorporate some PostCSS plugins,
@include margin-top(1)
, we can now say margin-top: 1vr
margin-top: $leading; margin-left: $leading;
, we could use shorthand that we are already familiar with, margin: $leading * * $leading
, where an asterisk indicates that an edge is skipped.In lots of parts of this repo, division is used without wrapping the calculation in calc()
. This will be deprecated in Dart Sass 2.0.0. See error message below:
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in
Dart Sass 2.0.0.
This is part of a breaking change being made to the Sass standard, see here: https://sass-lang.com/documentation/breaking-changes/slash-div
I just included the scss files in a project for the first time and noticed that you don't import gutenberg-mixins.scss
inside gutenberg.scss
although you use it there. This throws an error for me, because @include line-height()
is not defined.
If you just want to include it, I can open a PR if you want. Just let me know.
Really nice work by the way!
Just came across this interesting project and tried https://matejlatin.github.io/Gutenberg/.
I was wondering why we need double grid here. And I saw there's a lot of margins set to be 1.5 leadings or 0.5 leading. Why not just use integer number of leadings to ensure all the elements are aligned with the 1 leading grid?
A quick idea: is it possible to set dynamic margins? Let's say if an element's line height is set to 1.5 leadings with 1 leading bottom margin, and it gets 3 lines at total. For this case, we can make bottom margin as 1.5 leadings then the total height of this module (including element height and bottom margin) can be 6 leadings which won't break the 1 leading grid rules.
See code here: https://github.com/michaeltaranto/basekick
Description here: https://www.youtube.com/watch?v=TGHbkTGVqoU
Hey @matejlatin I ran into a small situation, not an issue per se.
I noticed that my <button>
wasn't taking the font family (Merriweather in my case), it was using Arial. Actually, now that I remember, the input
fields were suffering the same issue.
I saw that in the _gutenberg-typography.scss
partial the // Font defaults
section is targeting the html
like so:
html {
font-size: #{$base + 'px'};
font-size: #{$base-font-size + '%'};
font-family: $font-body;
color: $color-font-body;
}
Now, since I want every single element in my design to use the same typeface, I changed the above selector to the one we use when declaring box-sizing: border-box
:
*, *:before, *:after {
font-size: #{$base + 'px'};
font-size: #{$base-font-size + '%'};
font-family: $font-body;
color: $color-font-body;
}
Now, this may very well be my personal case, but from a design standpoint using the same typeface across a design is pretty much rule #A1 of typography. Any additional typefaces can be introduced after the main typeface has been defined.
Just a thought if you want to incorporate it in the project.
Gutenberg is working like a charm so far :)
Thanks.
Hi @matejlatin
Today I saw some friends giving star in your project. So I decided to look closely. I was surprised at the quality of the project, the way you approached the problem and mainly the technical quality. Amazing job! The homepage is beautiful. Congrats dude.
So, you could use GitHub Releases feature for its changelogs. As an example see the Releases section of our GitHub project, Milligram.
About versioning, you could use the semantic versioning. This can solve this issue #15
Cheers
Hi!
I see some bug for home page. Check mov file:
https://www.dropbox.com/s/yoznhkske69fscw/gutenberg-bug.mov?dl=0
I tried to override variables in horizontal-rule.scss
but failed because unlike the ones in gutenberg-config.scss
their values aren't marked !default
.
Shouldn't the variables in horizontal-rule.scss
be !default
as well? Or am I supposed to edit the file directly to change the appearance of horizontal rules?
This peace of code is too hard for me.
// Headings Options
// [ h1: size (in rem), line height (* leading), margin top (* leading), margin bottom (* leading) ]
$headings: (
h1: (2.5, 2, 4, 1),
h2: (1.6875, 1.5, 2.5, .5),
h3: (1.375, 1, 2, .5),
h4: (1.2, 1, 1.5, .5),
h5: (1, 1, 2.5, .5),
h6: (1, 1, 2.5, .5)
) !default;
// Set headings sizes, line-heights and margins
@each $heading, $properties in $headings {
#{$heading} {
@include font-size(nth($properties, 1));
@include line-height(nth($properties, 2));
@include margin-top(nth($properties, 3));
@include margin-bottom(nth($properties, 4));
}
}
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
$leading: $leading-desktop;
$leading-rem: $leading-rem-desktop;
@import '../mixins/font-size';
@import '../mixins/line-height';
@import '../mixins/margin';
@each $heading, $properties in $headings {
#{$heading} {
@include font-size(nth($properties, 1));
@include line-height(nth($properties, 2));
@include margin-top(nth($properties, 3));
@include margin-bottom(nth($properties, 4));
}
}
}
How do I change for example h1 font-size? By default it set to 2.5 rem. How to change it in Sass?
Gutenberg/src/style/helpers/_grid.scss
Line 59 in 25ba870
Hi, this is a great tool! I'm having trouble getting started with customization. I'm not familiar with Grunt/Gulp. I understand CSS and I know how to customize the .scss, but what do I do to compile these into the .css files? I'd appreciate any help!
The idea is amazing. But this is how it currently looks on my screen. It doesn't quite work. I've seen a similar project called sassline, where the aim is the same - vertical rhythm. I think he has a different technique which is more in line with how browsers handle line-height
.
An extract from an article he's written: --> https://medium.com/@jakegiltsoff/sassline-v2-0-e424b2881e7e#.bipkreol0
Time to look back at that cap-height value. The cap-height should be thought of as the equivalent of x-height but for capital letters. Using this height we can accurately set text to a baseline grid on the web. Due to the way CSS renders the space around text, we need to shift the text down by a value of font-size / 2 * (line-height — cap-height). If we want the text below it to sit directly on the next baseline, we need to have a negative margin-bottom of the same value. To get 1 baseline worth of space between them we need to get 1rem minus this value (and so on).
I haven't gotten round to looking at how you guys handle line-height. But if you think this is something relevant I'd be happy to implement the change.
Hello,
I would like to ask for a recommendation of a 3rd party grid system that can be easily combined with Gutenberg.
The kit is already pretty much a complete framework for a blog that I am making, but I also would like to add logo with navigation and a two-column footer to a site, and thus need an additional component (as someone not well versed in CSS in order to add a compatible grid myself).
Thank you!
I tried updating the _text.scss
file in the src/style/modules
folder but grunt doesn't acknowledge the change in the file and nothing happens when the watch task is running.
If I make a change to the _gutenberg-config.scss
file which is in the src/style
folder the watch task works.
I noticed this shortly after the change of the project folder structure but forgot about it.
Need to fix this part in gruntfile.js somehow:
files: [{
expand: true,
cwd: 'src/style/',
src: ['**/*.scss'],
dest: 'src/style/',
ext: '.css'
}]
I'd appreciate it if the external font dependencies could be removed, as they're adding an extra HTTP request that apparently can't be overridden. I'd recommend continuing to use the font names in the stylesheets, but instead of including the Google Fonts stylesheets in the CSS, instead include instructions on how to include the recommended fonts in the documentation.
https://github.com/matejlatin/Gutenberg/blob/master/src/style/_gutenberg-config.scss#L60-L87
As mentioned in the following pull request, it would be better to use node-sass as it doesn't require ruby to run. But currently there's a problem with decimals being set to 15 and node-sass only uses 12. The real problem is: we shouldn't rely on number of decimals (originally it was the only fix that would make the grid and elements align almost perfectly in most configs).
I'm opening an issue because I'd like to keep this in mind and find a solution.
I'm looking for a bit more detail in the documentation. For example, how to use gutenberg end-to-end, including grunt.
Your docs references a $color-font-headings. I tried to change it, but it seems this var isn't used at all in the code.
Hello.
I'm extremely n00b with Sass but I would love to incorporate Gutenberg in my projects. I even bought the Gutenberg sticker :)
Anyhow, I'm importing all the partials into may main SCSS file but when I compile I get this error:
Error: Undefined variable: "$leading-desktop"
.
I don't see in the README any information about how to configure this.
What am I doing wrong?
Thanks.
I see 2 font-sizes in rems and in pixels. When I customize font-size in headings file - it affects rems. But pixels not affected. What's the logic I don't get it? How to customize them both simultaneously?
Add Scss lint task to Gulpfile.js
via scss-lint
When I change Mobile base & leading + Desktop base & leading it doesn't affect media queries. And I can't figure out how to use this hardcore SCSS:
// [ h1: size (in rem), line height (* leading), margin top (* leading), margin bottom (* leading) ]
$headings: (
h1: (2.5, 2, 4, 1),
h2: (1.6875, 1.5, 2.5, .5),
h3: (1.375, 1, 2, .5),
h4: (1.2, 1, 1.5, .5),
h5: (1, 1, 2.5, .5),
h6: (1, 1, 2.5, .5)
) !default;
// Set headings sizes, line-heights and margins
@each $heading, $properties in $headings {
#{$heading} {
@include font-size(nth($properties, 1));
@include line-height(nth($properties, 2));
@include margin-top(nth($properties, 3));
@include margin-bottom(nth($properties, 4));
}
}
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
$leading: $leading-desktop;
$leading-rem: $leading-rem-desktop;
@import '../mixins/font-size';
@import '../mixins/line-height';
@import '../mixins/margin';
@each $heading, $properties in $headings {
#{$heading} {
@include font-size(nth($properties, 1));
@include line-height(nth($properties, 2));
@include margin-top(nth($properties, 3));
@include margin-bottom(nth($properties, 4));
}
}
}
PLEASE HELP!!!
Hi,
I'm very interested by your project and will be happy to translate it into Stylus, which I use more than sass.
How would you like to do ?
A separate repo (Gutenberg-stylus), or forking this one and add .styl files asides of the .sass ones ?
Regards,
I want to build a site with Gutenberg and wonder what is the best way to integrate the Gutenberg CSS with CSS from other frameworks eg. bootstrap.
How would you do this?
Ok, I have Gutenberg working now 👍
How do I customize it? The documentation is extensive in explaining how it's built (which is great), but it doesn't dive much into the customization part. A designer like me wants to implement and then tweak to fit my design :)
For example, I want to modify the Modular Scale values. Before implementing Gutenberg I was using straight up Modular Scale Sass plugin and this was the scale I was using: http://www.modularscale.com/?1,1280,1&em&1.618&sass&table
So in the _modular-scale.scss
partial, I have the scale values:
$ms-base: 1em,1280em,1em;
$ms-ratio: 1.618;
But since I wanted to try out Gutenberg because it also uses Modular Scale, I thought that maybe I could combine both concepts in some way.
Makes sense? :p
Thanks.
Suggest to add a debounced onresize hook to recalculate image sizes.
I see that Gutenberg uses double direction margins. Have you maybe thought about using single direction margins?
It is explained nicely here http://csswizardry.com/2012/06/single-direction-margin-declarations/
These typographic projects favor this approach, maybe some others too, but I only know about these.
http://typeplate.com/
http://typesettings.io/
https://github.com/zellwk/typi
https://sassline.com/
Maybe I am missing something, but I see you have top and bottom margins set for your headings. I am no expert on this, far from that :)
Hola! @1xxxx has created a ZenHub account for the matejlatin organization. ZenHub is the only project management tool integrated natively in GitHub – created specifically for fast-moving, software-driven teams.
To get set up with ZenHub, all you have to do is download the browser extension and log in with your GitHub account. Once you do, you’ll get access to ZenHub’s complete feature-set immediately.
ZenHub adds a series of enhancements directly inside the GitHub UI:
Still curious? See more ZenHub features or read user reviews. This issue was written by your friendly ZenHub bot, posted by request from @1xxxx.
I am not a typographer but I think that the interline spacing of
is too big.
I use <br></br>
to break lines in a poem and the spacing looks the same as with <p>.
Hi,
Just tried installing Gutenberg via NPM and it's coming up with an error that version 0.1 is invalid. Upon some searching it seems it needs semantic version numbers.
[http://stackoverflow.com/questions/16887993/npm-why-is-a-version-0-1-invalid#answer-16888025](npm: Why is a version “0.1” invalid?)
It looks like updating the pakage.json file's version to 0.0.1
would fix this. Would that be possible?
Thanks,
Mat
Hi, this project is great.
I have a question regarding the license of this project. Since CC is not commonly recommended for software...
Does the CC license means that people using this framework in their sites should add a link (maybe a footer link) to indicate they are using Gutenberg? Or this only applies for creating a new fork?
Thanks!
Hello, Matej! Thank you for your beautiful library. Faced with a problem when setting the horizontal rhythm. No second row of the grid.
Your demo http://joxi.ru/nAyqJWqUX8wMXA
My page http://joxi.ru/J2b1BO1C4jVOlm
Examining the code, I noticed the following changes.
Your demo http://joxi.ru/bmoWJMWSMayvEm
My page http://joxi.ru/D2PDdMDsdQJzo2
I downloaded GUTENBERG of npm. If this information is something can help.
Mac OS X Google Chrome 54.0.2840.71 (64-bit)
I suggest removing all mixins which provide a fallback for rem
units.
I would use a tool like CSSNext with PostCSS or grunt-rem-to-px
This is a great project. Keep up the good work. When resizing the browser window in the latest Safari, it flickers and jitters pretty badly. I tested in Chrome and the issue is non-existant. Not sure what the problem is, but I wanted to pass it along.
It's tough to use Gutenberg together with other styles/libs, since it's hijacking top-level and generic selectors, i.e. *, html and body.
What do you think about scoping Gutenberg's application to a certain subtree, i.e.:
...
<body>
<div class="some-stuff">
</div>
<div class="gutenberg">
<!-- Gutenberg's rules apply here -->
</div>
</body>
...
👋 I have included your project in my WordPress framework, Scratch. I love it!!!
There's just one issue I've found... the imgFixHeight function simply behaves too unpredictably. There are a lot of places where one would like to use an <img>
tag and not have its height highjacked, such as a logo, an image carousel, etc... Obviously one could edit the function to suit one's needs, and I tried... However, there were still some instances of the page loading and certain images being set to height: 0
. I'm wondering if it's worth it to make this function be as robust as it should be to justify it being there, or just discard it altogether. For Scratch, I've done the latter for now.
Again, thanks for your great work, and this is mostly an FYI!
The margin left and right of every element in the page is set to auto using a !important
declaration.
Like the title suggests, I'm wondering if the project is still being maintained?
If not, do you recommend any alternative for people to use?
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.