| 1 | # Contributing
|
| 2 |
|
| 3 | > Hey, thanks for helping! It's great that you took the time to make this project better (:
|
| 4 |
|
| 5 | To get an overall developer view of the code you can refer to the documentation.md. Here I explain the main folders:
|
| 6 |
|
| 7 | - node_modules: where dependencies get installed from node
|
| 8 | - plugins: where all of the plugins are stored. Picnic is mainly made up of plugins, with little codebase otherwise.
|
| 9 | - releases: where the two main releases are stored and what jsdelivr.com uses to CDN the files.
|
| 10 | - src: the files that include the needed plugins and other files. **This is a good place to start.**
|
| 11 | - themes: so far there's only one default theme, but here is where other themes can go.
|
| 12 | - web: where [Picnic's website](http://picnicss.com/) files reside. This is useful to see a possible workflow with using picnic.
|
| 13 |
|
| 14 | Other files in the root are:
|
| 15 |
|
| 16 | - CONTRIBUTING.md: this file
|
| 17 | - LICENSE: MIT license in here
|
| 18 | - Profcile: Heroku uses this to load the website
|
| 19 | - README.md: the file that shows some information for GitHub
|
| 20 | - app.js: the website main file
|
| 21 | - bower.json: the package for using with bower
|
| 22 | - documentation.md: developer documentation
|
| 23 | - gulpfile.js: to build the files, just call `gulp watch` to keep an eye on them
|
| 24 | - package.json: the package definition for github, heroku and others
|
| 25 |
|
| 26 |
|
| 27 | ## Where to start?
|
| 28 |
|
| 29 | I recommend reading `src/picnic.scss` first. It will give you a general sense of where to find other things. Also, reading the source code for `plugins/*` is a good start.
|
| 30 |
|
| 31 |
|
| 32 | ## Please lint and test
|
| 33 | Lint your files with `SublimeLinter-contrib-scss-lint` for sublime text. You can see that there are some exceptions.
|
| 34 |
|
| 35 | For testing, you just need to display some common uses of the plugin you write so it can be easily tested in different browsers.
|
| 36 |
|
| 37 |
|
| 38 | ## Plugin structure
|
| 39 |
|
| 40 | - `_class.scss`: this is where the placeholder definition and variables go. [Read more about SCSS placeholders](http://thesassway.com/intermediate/understanding-placeholder-selectors) (tip: they're a really cool feature). Remember, only one placeholder per file and maximum one top level one. Like you would with any Object Oriented language.
|
| 41 | - `_plugin.scss`: this file should include `_class.scss` with a normal `@import 'class';` and extend the placeholder you created previously for your actual plugin. See the plugin `button` for an example.
|
| 42 | - `description.html`: a small description that will be included in the *plugins* page. This is normally a highly visual example.
|
| 43 | - `documentation.md`: an in-depth article describing the plugin.
|
| 44 | - `info.json`: a file containing all of the information for your plugin. Specially important are `id`, `name`, `included`, `affected` and `summary`.
|
| 45 | - `test.html`: where your tests should go.
|
| 46 |
|