code-corps / code-corps/code-corps-ember

Use BEM for Styles

Ouverte
#672 6 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Difficulty: Easy Priority: High Skill: CSS Skill: Ember.js Skill: HTML Skill: JavaScript
Langage dominant
JavaScript
Étoiles
120
Forks
75
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

# Problem

We want to standardize our stylesheets using [BEM](http://getbem.com/introduction/). This is a master issue to track all needed refactoring.

The lists below correspond to stylesheets. Each stylesheet (except those with `_` in front of the name) correspond to a `.hbs` template file. General styles will need to be renamed to fit the naming conventions, which then need to be changed everywhere they exist in templates. Take one `_name.scss` file at a time. Create a separate issue and reference this master issue. Take advantage of `git grep` to find all references to that style. If you are making changes to styles within components or templates, feel free to create a grouped issue and pull request (as in #673) Once each issue and it's related PR's are complete, check off the files refactored on this list. Make sure you make changes in both the `.scss` and `.hbs`!

# Files to Refactor
## General
- [x] _alerts.scss
- [x] _animations.scss
- [ ] _buttons.scss
- [x] _code.scss
- [x] _colors.scss
- [x] _fonts.scss
- [ ] _forms.scss
- [x] _header.scss
- [x] _icons.scss
- [ ] _images.scss
- [ ] _inputs.scss
- [x] _misc.scss
- [x] _pace.scss
- [x] _retina.scss
- [x] _settings.scss

## Templates
- [x] app.scss
- [x] dropdown-menu.scss
- [x] index.scss
- [x] main.scss
- [x] start.scss
- [x] task.scss
- [ ] task.scss
- [ ] task-new.scss
- [ ] templates/about.scss
- [ ] templates/team.scss
- [x] templates/project/index.scss
- [x] templates/project/settings/contributors.scss
- [x] templates/start/expertiese.scss
- [x] templates/start/hello.scss
- [x] templates/start/skills.scss

## Components
- [ ] donations/donation-progress.scss
- [ ] donations/donation-status.scss
- [x] categories-list.scss
- [x] category-item.scss
- [ ] code-theme-selector.scss
- [ ] create-comment-form.scss
- [ ] donation-goal-edit.scss
- [ ] donation-goal.scss
- [ ] donation-payment.scss
- [x] drag-zone.scss
- [ ] editor-with-preview.scss
- [ ] error-wrapper.scss
- [x] image-drop.scss
- [x] login-form.scss
- [x] member-list-item.scss
- [x] navigation-menu.scss
- [ ] organization-header.scss
- [ ] organization-members.scss
- [ ] pager-control.scss
- [x] progress-bar.scss
- [ ] project-card-members.scss
- [ ] project-card-skills.scss
- [ ] project-card.scss
- [x] project-details.scss
- [x] project-header.scss
- [ ] project-item.scss
- [x] project-list.scss
- [x] project-long-description.scss
- [x] project-menu.scss
- [ ] project-task-list.scss
- [ ] role-item.scss
- [x] settings-menu.scss
- [x] signup-form.scss
- [x] site-footer.scss
- [ ] stripe-connect-button.scss
- [x] task-comment-list.scss
- [ ] task-details.scss
- [ ] task-header.scss
- [ ] task-item.scss
- [ ] task-new-form.scss
- [ ] task-status-button.scss
- [ ] task-status.scss
- [ ] task-title.scss
- [x] user-details.scss
- [x] user-menu.scss
- [ ] user-organizations-list.scss
- [ ] user-sidebar.scss
- [ ] user-skills-input.scss

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par une feuille de style non cochée de l’issue, comme _buttons.scss, _forms.scss ou une feuille de style de composant répertoriée, et utilisez git grep pour trouver ses références dans le modèle .hbs correspondant. Consultez les recommandations de nommage BEM liées dans l’issue, puis créez une issue distincte pour cette feuille de style. C’est terminé lorsque le SCSS et tous les modèles référencés utilisent les noms standardisés et que la checklist principale est mise à jour.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript
Domaine
frontend
Type d'issue
Refactorisation
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.