SOLVED Best practice to implement media queries in different pages?
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
-
Some Background
As the document instructs, we can do
// Gantry 5 custom CSS file // import breakpoints @import "dependencies"; // Typical values are the default breakpoints set in Gantry 5 // but these values are user definable in style settings // so that is why the code below uses mixins to get the actual // values from Gantry 5 template. // commonly used media queries // typically min 75rem @include breakpoint(large-desktop-range) { } // typically range 60rem to 74.938rem @include breakpoint(desktop-range) { } ...
in the custom.scss file. So I did before, and I put all custom styles in this custom.scss file. But later I find that some custom styles are useless to some page (for example, the custom styles of homepage slideshow are useless to an article page), so I decided to load different css file for different page (like homepage.css is for hompeage, and article.css is for article page), and only keep those global custom styles (like that of Navbar) in custom.scss file. Thanks to gantry 5, this has been much easier, I even modify the build-in "cutsom css/js" atom so that it can accept scss files.
Problem
The problem is, to use media queries in my own scss file (like homepage.scss), I need to insert the above code to too. Thus, in my homepage, the content of _breakpoint.scss is loaded twice (firstly in custom.scss, and secondly in homepage.scss). This also happens when I try to load some other scss libraries. For example, if I have a _color.scss which defines
$blue: #2169f3
To be able to use this $blue variable in both custom.scss and homepage.scss, I'd have to do
@import "color"
in both files, I feel this is redundant. Is there anyway to overcome this problem?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
The solution is to qualify your CSS statements so they only affect a certain page. You can do this by using the "itemid-99" class on the body tag that tells you what menu item is being used, or you can use the "outline-999" class on the body tag that tells you want outline is being used. Don't create lots of CSS files - stick to just one custom.scss file.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
- My point is, of course I can do body.itemid-99 in custom.scss file, but this will be loaded in page of itemid-100 too, which is useless to the latter page and redundant, that is why I use another scss file for itemid-100.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Really a few bytes is going to make no difference to your page load times - there is already loads of CSS that does this sort of thing - it's really not worth worrying about - measure it by all means but I'll bet it's not even detectable.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.055 seconds