Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
Site
Site
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 24
    • Issues 24
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Environments
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Indienet
  • SiteSite
  • Issues
  • #27

Closed
Open
Opened Mar 16, 2018 by Aral Balkan@aralOwner0 of 2 tasks completed0/2 tasks
  • Report abuse
  • New issue
Report abuse New issue

Refactor CSS to use rems

@delrueba and @FraukeDigipolis pointed out the flaws in using ems for sizing in a component-based system. (Nested components could result in funky sizes.) We discussed the possibility of using a mix of ems and rems (using ems broadly results in needing to write less CSS) but I think we decided that just rems for all units (including font-size, margin, padding etc.) would allow us to be more consistent across all our CSS.

In doing this, we are bearing in mind that we want to write as little CSS as possible (maintainability yay!) so while this means we can override sizes in components very easily, it doesn’t always mean we should. Because we want to aim for consistent sizing across components and semantic meaning.

I (@laura) will update Indienet/Docs accordingly. Shoutout in the comments or the Indienet/Docs if I got anything wrong.

I’ll refactor in Indienet/Site on Monday. I’ll have a look at @FraukeDigipolis’s work in Indienet/Hallo.gent as a reference 🙌

  • Refactor CSS to use rems
  • Refactor so opening { are on same line as element:
Find   : (.*?)\n{
Replace: $1 { 
Edited Mar 18, 2018 by Aral Balkan
Assignee
Assign to
Initial functional version
Milestone
Initial functional version (Past due)
Assign milestone
Time tracking
None
Due date
None
3
Labels
Housekeeping Refactor To Do
Assign labels
  • View project labels
Reference: indienet/site#27

Like this? Fund us! Your patronage helps keep us independent and going.