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

Feature - New Gridsystem core #156

Merged
merged 11 commits into from
Nov 10, 2020
Merged

Feature - New Gridsystem core #156

merged 11 commits into from
Nov 10, 2020

Conversation

mmexvr
Copy link
Member

@mmexvr mmexvr commented Nov 4, 2020

Describe pull-request
Describe what the pull-request is about

Merge this before #160 and #161
Flex based grid system

  • Added columns
    • Sm 4 column
    • md 8 column
    • lg 16 column
    • xlg 16 column
    • xxlg 16 column
  • Container for 4 different width of the screen
  • Row system (like bootstrap)
  • Offsets

Good to know:
The gutter and padding is included in the same calculation, instead of margin + padding, because the flex-basis will be complicated solution. This solution contains padding + padding instead for the gutter and padding on the columns

Nesting of grid is not something we will have ( maybe in the future)

Solving issue
Add which issue this pull-request solves by adding # plus the number of the issue (for example #123)
Fixes: scania/corporate-ui#589

How to test
Add description how to test if possible

  • Added code attached in the bottom
  • Test breakpoints based on the figma file
  • Test browsers
  • Test all sizes( You need to try in correct screen breakpoint for every size of columns)
  • Test offsets

Screenshots
If applicable, add screenshots to help explain
image

Additional context
Add any other context about the pull-request here.
Internet explorer breaks on the next row, height of the row is not increased as aspected

@mmexvr mmexvr added the Feature New feature or request label Nov 4, 2020
@mmexvr mmexvr added this to To do in Scania Digital Design System 2020 Q3 & Q4 via automation Nov 4, 2020
@mmexvr mmexvr self-assigned this Nov 4, 2020
@helloimela
Copy link
Contributor

To fix on this PR

  1. responsiveness
  2. typo in prefix file
  3. remove the dev settings
  4. discuss with niklas: gutterless class on rows, cols, full width

Next Todo:

  1. full width option ?
  2. px to rem converter
  3. pushed grid
  4. auto width column
  5. hide rule

@mmexvr
Copy link
Member Author

mmexvr commented Nov 9, 2020

To fix on this PR

  • responsiveness
  • typo in prefix file
  • remove the dev settings
  • discuss with niklas: gutterless class on rows, cols, full width

TODOS:

- Fixed responsiveness
- added base unit 4px
- rename prefix file
- added screensizes
Copy link
Contributor

@helloimela helloimela left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job!

@helloimela helloimela merged commit 7ee642e into master Nov 10, 2020
@helloimela helloimela deleted the feature/new_grid_system branch November 10, 2020 12:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature - Grid package
2 participants