matejlatin / gutenberg Goto Github PK

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, 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!

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

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.

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.

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?

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.

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.

If I set paragraph indenting to true, I get some unexpected behavior on some paragraphs. Example (note "With this invention ...".

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!

Blocked by #26

I suggest adding some Travis CI test.
After adding #26 Travis could check every pull request for potential errors or warnings.

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!

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,

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.

Add Scss lint task to Gulpfile.js via scss-lint

Hello Matej. Thanks for your project.

I know that gutenberg is framework and not "everyone's solution". But maybe position: relative; is excessive for em and i?

I have white overlay above my articles and em and i located above it while all other tags play well.

I'm looking for a bit more detail in the documentation. For example, how to use gutenberg end-to-end, including grunt.

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

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,

• Remove superfluous interpolations
  There are so many redundant interpolations, i.e. #{ $interpolate-me } that make the code barely legible.
• Modularize the framework, i.e. create partials for headings, figures, etc
• Nest media-query / responsive code inside the components themselves
  Tests showed that the performance impact gained grouping media-queries together seems to be very minimal. Doing otherwise will greatly improve the readability and extensibility of the code. Furthermore, there are PostCSS plugins that could perform the clean up / sorting / grouping upon compilation.
• Use of new lines more sparsely, notably with background-image where the values can run very long

And perhaps we could incorporate some PostCSS plugins,

• postcss-vertical-rhythm
  It allows us to use 'vr' unit to represent the leading magnitude, e.g. instead of @include margin-top(1), we can now say margin-top: 1vr
• postcss-short
  Another awesome plugin that allows us to simplify our source code. Instead of typing
  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

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)

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!

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.

How do I use ZenHub?

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.

What can ZenHub do?

ZenHub adds a series of enhancements directly inside the GitHub UI:

• Real-time, customizable task boards for GitHub issues;
• Multi-Repository burndown charts, estimates, and velocity tracking based on GitHub Milestones;
• Personal to-do lists and task prioritization;
• Time-saving shortcuts – like a quick repo switcher, a “Move issue” button, and much more.

Add ZenHub to GitHub

Still curious? See more ZenHub features or read user reviews. This issue was written by your friendly ZenHub bot, posted by request from @1xxxx.

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!!!

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>
...

See code here: https://github.com/michaeltaranto/basekick
Description here: https://www.youtube.com/watch?v=TGHbkTGVqoU

Hi!

I see some bug for home page. Check mov file:
https://www.dropbox.com/s/yoznhkske69fscw/gutenberg-bug.mov?dl=0

Suggest to add a debounced onresize hook to recalculate image sizes.

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

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 :)

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?

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 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?

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?

👋 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!

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>.

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.

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.

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?

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