Markup and naming convention

[hjalmers]

We need to decide on and agree on a naming convention for the following:

• Component prefix
• Pattern for markup
• SASS variables

Anything else?

Proposal to start the discussion

Component prefix

• sebng-
• sng-
• ngs-
• ngseb-

Pattern for markup

I'd propose that we try and follow/adhere to bootstrap markup where its applicable i.e. a button should use .btn for default button behavior and can be combined with for example .btn-primary (modifier) to declare a primary button. If we invent a custom button we should still stick to this pattern and follow the BEM filosophy which for bootstrap is slightly adjusted i.e.

<button class="btn btn-primary">A button</button>

Instead of the more "strict":

<button class="btn btn--primary">A button</button>

Pros:

• Widely known and used by many, competence can be found outside SEB
• Ability to use third party libraries built using bootstrap markup
• Ability for others to reuse our components with there own theme
  ?

Cons:

• Might be restricted by bootstrap markup
• Possible conflicts
  ?

SASS variables

Reuse variables from bootstrap and other libraries but declare them using default value using same pattern as for prefix i.e.:

$ngseb-table-cell-padding: $table-cell-padding !default;

[splashdust]

Prefix
My vote is on ngseb- for angular components and perhaps just seb- for native web elements.

Markup/CSS-classes
Personally I would find it useful if it was possible to change which CSS-classes the components use.

Even better would be to have a strategy for being able to configure how the actual markup comes out. Some way to override the template for the component while retaining the logic.

The aim should be for "convention over configuration" and to have good solid defaults that works well for most developers and use cases, but still allow for modification without the need to fork the codebase.

[ghost]

For prefix i personally prefer "ngs" as it is short and a mixture of NG and SEB while it doesnt include the full company name in it, but im oke with ngseb too.

I think using bootstrap style css classes is great idea to keep our components more in sync with bootstrap and easier for bootstrap developers to use our components. but i believe every component should be able to receive custom class/ classes which can override whatever they like.

[yousifalraheem]

Settled on sebng-