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

Inclusion of Bootstrap's base and grid system #7481

Merged
merged 20 commits into from Apr 15, 2015
Merged

Inclusion of Bootstrap's base and grid system #7481

merged 20 commits into from Apr 15, 2015

Conversation

mnapoli
Copy link
Contributor

@mnapoli mnapoli commented Mar 19, 2015

This PR introduces Bootstrap's grid system (just that part of Bootstrap, not the whole library).

To learn more about the parts of Bootstrap that are now included, here are the CSS classes that can be used:

The direct goal is being able to create a page using standard/common HTML layout and CSS classes. Here is a minimal example:

<body>
    <div class="container">
        <h1>My page!</h1>
    </div>
</body>

The container and container-fluid classes are used wether the page should fill the whole width or not (which is not the same everywhere in Piwik).

The grid system has also replaced our custom grid system for the dashboard, which is cool because it means less custom code. The only downside here is that with the 12 columns grid system we cannot offer the old ratio of 30%-40%-30% so it will now be 25%-50%-25% (same applies for similar ratios in another order).

The mid-term goal is also to try out integrating Bootstrap and maybe add more parts later on. Bootstrap offers us (and plugin developers) a standard HTML/CSS framework which simplifies a lot front end development. The less custom code we have, the easier it is to write front-end code it and maintain Piwik CSS/HTML. This PR can be considered a first step.

Regarding CSS changes, Bootstrap changes the default box-sizing to one that makes more sense. That has some side effects on some height/width, I've tried to fix them all (fixing is easy) and that's why you'll see changes in height/width in some places in the diff.

Regarding tests, a lot of UI tests are failing because of pixel differences. I've tried to minimize it as much as I can, and try to continue to improve the situation just to facilitate reviewing changes. But except for UI tests those pixel differences shouldn't be a problem because they are not really visible when using the application.

@mnapoli mnapoli added Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. c: Design / UI For issues that impact Matomo's user interface or the design overall. labels Mar 19, 2015
@mnapoli mnapoli self-assigned this Mar 19, 2015
@mnapoli mnapoli added this to the Piwik 2.13.0 milestone Mar 19, 2015
@mnapoli mnapoli added Needs Review PRs that need a code review and removed Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. labels Mar 20, 2015
@mnapoli
Copy link
Contributor Author

mnapoli commented Mar 24, 2015

@mattab I consider this PR OK to be merged! I have reviewed every single screenshot diff (maybe 40-50) and I have fixed anything significant. The rest is just minor pixel differences.

@mattab
Copy link
Member

mattab commented Apr 9, 2015

maybe others have some feedback otherwise +1 to merge this useful part of bootstrap in Piwik!

@mnapoli mnapoli removed their assignment Apr 12, 2015
@mattab
Copy link
Member

mattab commented Apr 15, 2015

Needs a rebase and can be merged 👍

mnapoli added a commit that referenced this pull request Apr 15, 2015
Inclusion of Bootstrap's base and grid system
@mnapoli mnapoli merged commit d957549 into master Apr 15, 2015
@mnapoli mnapoli deleted the bootstrap branch April 15, 2015 22:28
mnapoli added a commit that referenced this pull request Apr 16, 2015
mnapoli added a commit that referenced this pull request Apr 16, 2015
mnapoli added a commit that referenced this pull request Apr 16, 2015
mnapoli added a commit that referenced this pull request Apr 16, 2015
mnapoli added a commit that referenced this pull request Apr 16, 2015
mnapoli added a commit that referenced this pull request Apr 16, 2015
@mnapoli
Copy link
Contributor Author

mnapoli commented Apr 16, 2015

All UI tests have been reviewed again and updated, UI tests should be green (there's just a screenshot failing because of #7627 which was merged a few minutes ago).

mattab added a commit that referenced this pull request Apr 21, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: Design / UI For issues that impact Matomo's user interface or the design overall. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. Needs Review PRs that need a code review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants