bulma/.github/CONTRIBUTING.md
Ana María Martínez Gómez 13199b8f51 Document how to try the changes (#1920)
* Document how to try the changes

Add to the contributing guide how to rebuild the css and where the
documentation to try the documentation changes is.

* Remove Bulma dependencies installation form PR template

Install Bulma dependencies is not needed to send a PR.

* Add how to try your changes to PR templates

And after that ask if you tried the changes.
2018-06-06 00:45:21 +01:00

1.7 KiB

Thanks for helping out! 😇

Raising an issue

  • Make sure the issue hasn't been raised yet
  • Include screenshots and animated GIFs in your issue whenever possible

Submitting a Pull Request

  • Include screenshots and animated GIFs in your pull request whenever possible
  • Use the present tense ("Add feature" not "Added feature")
  • Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
  • Limit the first line to 72 characters or fewer
  • Reference issues and pull requests liberally

Try your changes

When modifying any .sass, you will need to rebuild the css. You can do this by running:

npm install
npm run build

To see documentation changes check the documentation readme.

Bulma Sass styleguide

  • No semi-colons ; or curly braces { }
  • No camelCase
  • Use only classes
  • Order the CSS properties alphabetically
  • Order the CSS rule by
    • direct styles
    • nested tags
    • pseudo-classes
    • color modifiers
    • size modifiers
    • modifiers
    • responsive styles
  • Add appropriate one-line comments for each of these sections within a CSS rule
  • No trailing space
  • End files with a newline
.element
  @extend .something
  +mixin
  property: value
  span
    // ...
  div
    // ...
  .child
    // ...
  &:pseudo-class
    // ...
  // Colors
  @each $name, $pair in $colors
    // Loop
  // Sizes
  &.is-small
    // ...
  &.is-medium
    // ...
  &.is-large
    // ...
  // Modifiers (ordered alphabetically)
  &.has-icons
    // ...
  &.is-active
    // ...
  &.is-fullwidth
    // ...
  // Responsiveness
  +mobile
    // ...
  +tablet
    // ...
  +desktop
    // ...