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.

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

Grid Layout #11

Closed
wants to merge 1 commit into from
Closed

Grid Layout #11

wants to merge 1 commit into from

Conversation

Wolfy64
Copy link
Collaborator

@Wolfy64 Wolfy64 commented Feb 2, 2020

This is a test to compare a grid layout between TailwindCSS and Grid CSS
Live Demo: https://c0d3.contactdewulf.now.sh/grid

Screen Shot 2020-02-02 at 1 12 11 AM

I setup a 12 column grid that I think we should implement and wrap every page with it.

  • In light grey I used CSS GRID ❤️ (I would prefer use module.css instead of css-in-js for clarity)
  • In dark grey I used TailwindCSS 🤔 (I did not use any css with Tailwind)

Please look at the code and give me your feedback.

Summary:
I feel have more control with CSS Grid by only set grid-column: start / end in my component it make really easy to place it.
There is less <div /> and less className the code seems easier to read.
Tailwind is good to set up quickly some basic CSS rule.

ps: For some reason module.css or import style-jsx from another file was not working... The doc say there are supported out the box.

@Wolfy64 Wolfy64 self-assigned this Feb 2, 2020
@Wolfy64
Copy link
Collaborator Author

Wolfy64 commented Feb 4, 2020

We opted to use Bootstrap.
Following this PR #12

@Wolfy64 Wolfy64 closed this Feb 4, 2020
@Wolfy64 Wolfy64 deleted the layout branch February 4, 2020 06:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant