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

Updated breakpoint import description, removed old "deprecated" import #201

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Updated breakpoint import description, removed old "deprecated" import #201

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions pages/01.gantry5/04.tutorials/10.media-queries/docs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Using your own media queries can be done very easily within your `custom.scss` f

Below is an example of the code you would add to your `custom.scss` file to enable you to quickly and easily hook in to Gantry 5's breakpoints.

One important line to note is `@import "nucleus/mixins/breakpoints";` which loads the [**_breakpoints.scss**](https://github.com/gantry/gantry5/blob/develop/engines/common/nucleus/scss/nucleus/mixins/_breakpoints.scss) file, making the mixin breakpoint available to use.
One important line to note is `@import "dependencies";` which loads the `_dependencies.scss` file of the current theme, making the breakpoint mixin defined in [**_breakpoints.scss**](https://github.com/gantry/gantry5/blob/develop/engines/common/nucleus/scss/nucleus/mixins/_breakpoints.scss) available to use. More information on the purpose of the `_dependencies.scss` file is outlined [here](../adding-a-custom-style-sheet#dependenciesscss).

```scss
// Gantry 5 custom CSS file
Expand Down Expand Up @@ -103,8 +103,6 @@ One important line to note is `@import "nucleus/mixins/breakpoints";` which load

// Mobile Menu Breakpoint
@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { ... your css in here ... }

@import "nucleus/mixins/breakpoints";
```

Any CSS that you wish to apply to a specific breakpoint can be added inside the appropriate media query above.
Expand Down