search

phase2 / particle

A starter kit for using the prototyping tool, Pattern Lab, in tandem with a Drupal theme. Utilizes Webpack for all asset management.
https://phase2.gitbook.io/frontend/
GNU General Public License v2.0
317 stars 118 forks source link

Can't find way to alter font-sizes #756

Open dibs opened 4 years ago

dibs commented 4 years ago

Sorry for posting here but I don't know where else to seek help.

I am trying a way to set my font-sizes in my particle patterns. The _type.scss file seem to ignore size. I don't have printing and non-printing folders either so the docs are bit odd to follow.

Also is there a forum anywhere for particle?

eih commented 4 years ago

Hope you've solved your issue. For those who have the same problem in the future, I'd like to provide some instructions.

Fonts/type related stuff are under particle/source/default/tokens. Follow the steps:

  1. Place your fonts under particle/source/default/tokens/fonts directory.
  2. Open the particle/source/default/tokens/sass/tokens.scss file where you'll see an example:
// Example: local fonts
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(../../fonts/Oswald-Medium.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Edit this to suit your needs. I've got five variations of two fonts.

After that, if you're using Bootstrap, head to particle/source/default/tokens/sass/libraries/bootstrap/_utils.scss and edit // Bootstrap font family overrides to make sure that Bootstrap uses your fonts. I'm not limited to those three options, in particle/source/default/tokens/sass/utils/_variables.scss, I've setup other font family variables for different font weights.

For the font sizes: Assuming you use Bootstrap, you'll need to override default variables in the same way. Check the list of bootstrap's variables, and edit them like you did for font families (more info on this could be found on Bootstrap documentation).