When making a new component there is a certain structure to implement and existing components to utilize to make your life easier.

    Accessibility

    To be added

    Buttons

    There is a standard button component we use in the client. It is located inside of /imports/ui/shared/Button.jsx. It should be used for every button.

    Font Size

    Inside of /client/stylesheets there is a stylesheet fontSizing.css.

    It will contain style classes such as extraSmallFont, smallFont, mediumFont, etc. Every piece of html with text to display to the client should be assigned one of these classes. This will allow text to scale responsively and still maintain relative size. You can set the class of an element to one of these classes, and have everything inside the container element inherit the font size rather than assign it to each individual child to save some work.

    Localization

    As some of you may know the client is capable of localization now, here is how you do it:

    where you want to have the localized text you just

    <FormattedMessage

    id="app.userlist.participantsTitle"

    description="Title of participants list"

    defaultMessage="Participants"

    />

    and in your imports/locales/<language>.json you need

    {

    ...

    "app.userlist.participantsTitle": "Participants "

    ...

    }

    Server Calls

    To make a call to the server from the client, you should refer to the callServer function in /imports/ui/services/api/index.js.

    Always use this in favor of Meteor.call. The callServer function should operate the same way in that you pass the name of the method to call as a string, and then the arguments just like normal.

    Meteor.call()