Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tidy-up CSS classes: remove unused classes & use a naming convention #28

Closed
robyngit opened this issue Jun 10, 2021 · 1 comment · Fixed by #126
Closed

Tidy-up CSS classes: remove unused classes & use a naming convention #28

robyngit opened this issue Jun 10, 2021 · 1 comment · Fixed by #126
Assignees
@robyngit
Labels
templating

Comments

@robyngit
Copy link
Member

The templates are using CSS classes that were probably inherited from the old website - some bootstrap classes and some classes that were defined in the old website's stylesheet. Many of these classes have no associated style rules and are not used anywhere else in the website.

For example, in the partial template page-header.html, elements use classes like custom-breadcrumb, w3-bar, list-inline-item, but the styles for these classes aren't defined anywhere.

These un-used classes should be removed, and classes should only be added as required.

This would be a good opportunity to start using a CSS naming convention, for example BEM. The classes that are kept could be re-named using the convention.
robyngit added a commit that referenced this issue Jun 23, 2021
@robyngit
Fix the page header CSS & HTML
69a45e1 
- Use an <h> header tag for the header rather than a <li> list item
- Remove unnecessary html elements and classes
- Fix the header styles
- Convert some CSS colors to color variables

Relates to issue #29, #28
robyngit added a commit that referenced this issue Jun 23, 2021
@robyngit
Fix some of the left-col styles
b4b74bd 
- Use BEM naming for classes
- Use relative units
- Re-create the same placement of layout and title as in the old website

Relates to #14, #28
robyngit added a commit that referenced this issue Sep 1, 2021
@robyngit
BEM-ize the footer
0b7c86c 
- Use BEM convention for naming classes in the footer
- Make the social media links a separate partial, as we may want to re-use this later (e.g. in a contact page)
- Make the social media links configurable in the config (and document in the README)
- Remove an unused class from the homepage scss file

Relates to #3, #28
robyngit added a commit that referenced this issue Oct 6, 2021
@robyngit
Add table of contents
405e236 
- Add table of contents to inform, learn, and plan pages (ohi+/conduct)
- Document front-matter properties in the README (including the new toc property)
- Remove unused ".section" style
- Rename "default-section" class to "section"
- Add option to remove cards from any list page by setting `cards: false` in the front-matter

Relates to: #106, #67, #30, #28
@robyngit robyngit self-assigned this Oct 11, 2021
robyngit added a commit that referenced this issue Oct 12, 2021
@robyngit
Make the 3-col layout responsive + misc css fixes
e090249 
- Move left, right, center col styles to the layout style sheet since they use the same variables and styles are dependent on one another
- Fix the full-page container style used in the 3-col layout. Add a full-width container as well.
- Make the 3-col layout work on smaller screens
- Remove unused CSS styles
- Fix issue where the controls for the globe viz were overlapping the nav on mobile
- Style the right-side nav
- Tweak some misc styles

Relates to  #103, #17, #28, #67, #93
@robyngit robyngit linked a pull request Oct 12, 2021 that will close this issue
Style & layout improvements #126
Merged
robyngit added a commit that referenced this issue Oct 13, 2021
@robyngit
Rename index__cards -> boxes; Use BEM conventions
914a378 
- Use the term 'boxes' to avoid confusion and class mix-ups with the cards partial
- Use BEM conventions. Make 'white' the default class, 'blue' the modifier class.

Relates to #28
robyngit added a commit that referenced this issue Oct 13, 2021
@robyngit
Improve index page styles + misc
fbba529 
- Make sections and section headers responsive on index page
- General style improvements to homepage (make more similar to original homepage)
- Use semantic HTML tags + BEM conventions in index layout
- Remove unused CSS styles
- Rename cardsTitle layout to cards-title to be consistent with other filenames
- Configure canonical urls (might help with images in demo site?)

Relates to #28, #17, #103
robyngit added a commit that referenced this issue Oct 13, 2021
@robyngit
Improve styles of content rendered from markdown
4aa4ba0 
- Enable emojis
- Add styles to all the common markdown tags (mostly for content rendered from markdown, which has no classes)
- Change some HTML tags to the semantic version in layouts
- Make the csvTable styles the general table styles
- Remove some CSS styles that were not needed

Relates to #67, #28, #103
robyngit added a commit that referenced this issue Oct 14, 2021
@robyngit
Consolidate buttons; misc style fixes
0c99966 
- Make header text fit on mobile screens
- Align breadcrumb with rest of navigation
- Consolidate similar buttons styles used throughout the website into one single 'button' class
- Consolidate button shortcodess. Delete buttons code, use two button codes instead.

Relates to #117, #28, #17, #103
@robyngit
Copy link
Member Author

There are still places where BEM conventions aren't being applied, but most areas have been fixed in previous commits and in #126. Unused classes have been removed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@robyngit robyngit

Labels
templating
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Style & layout improvements OHI-Science/OHI-website
1 participant
@robyngit