What am I doing wrong here? The media query is straight from the Materialize Sass docs.
The error I am seeing:
#media #{$medium-and-down}
Undefined variable: "$medium-and-down"
#media #{$medium-and-down} {
.header-title {
color: red;
}
}
You are probably including the materialize style after your custom sass sheets
Related
I'm trying to generate a general structure of styles on scss with global breakpoints as media queries on a react project, It is possible to reuse an structure to follow media queries that we declare as global.
I'm a little bit lost on this one, any ideas?
When I mean global is that we can define the breakpoints at the root of the project and we can use any reference on the components.
Thanks in advance.
There are three ways that come to mind:
You can create a variables.scss file in which you can write the value of your breakpoints:
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
And the use the following variables in your scss:
#media only screen and (min-width: $sm) {
.container {
.max-width: 450px;
}
}
#media only screen and (min-width: $md) {
.container {
.max-width: 650px;
}
}
#media only screen and (min-width: $lg) {
.container {
.max-width: 900px;
}
}
#media only screen and (min-width: $xl) {
.container {
.max-width: 1000px;
}
}
Or you can the mentioned variables in your mixins.scss file to create some media query mixins:
#mixin small {
#media only screen and (min-width: $sm) {
#content;
}
}
And then, use these mixins in your main scss codes:
.container {
#include small {
max-width: 450px;
}
...
}
Or if the use cases of these media queries are limited (e.g. hiding and showing elements), you can define other mixins that include all the variations:
$displays: none inline inline-block block table table-cell table-row flex inline-flex;
$sizes: (
sm: $sm,
md: $md,
lg: $lg,
lg: $xl
);
#each $display in $displays:
#each $size-key $size in $sizes {
.display-#{size-key}-#{display} {
display: $display !important;
}
}
}
A note on importing files: I personally would import all my helper scss (variables, mixins, etc.) in a file called styles/index.scss in the root of my project among with normalizing and other global rules that I want to define, and then import this file in my other scss files:
// styles/index.scss
#import './variables.scss';
#import './mixins.scss';
...
// container.scss
#import './styles/index.scss';
We have an interesting dilemma.
I have a PR open for the rupture project to namespace the functions it exports in order to add a no-conflict mode.
First the actors
There are two functions (or mixins) that are named landscape and portrait. The PR namespaces them to rupture-landscape and rupture-portrait. The #media mixin is used throughout.
And now the scene.
With some of the functions created by rupture, a string is assembled to be used with the media tag. The end result should be a normal css media query.
The problem lies with the stylus #media mixin. It seems to automatically attempt to interpret the string and expand any keywords that might exist in the scope.
Since both landscape and portrait are within scope when not using no-conflict-mode, when ever the #media tag is used with a composed string and orientation: portrait or orientation: landscape the result will prefix both the words portrait and landscape with rupture.
I've created a trivial example with a couple of attempts to fix the issue on codepen here.
Here is the code as well:
Stylus
$landscape = 'notlandscape'
$string = "only screen and (orientation landscape)"
$unquote = unquote($string)
$s = s($string)
.foo
// this is the main issue
#media $string
color: blue
These two are attempts to fix the issue
#media $unquote
color: blue
#media $s
color: blue
and the compiled result in CSS
#media only screen and (orientation: 'notlandscape') {
.foo {
color: #00f;
}
}
#media only screen and (orientation: 'notlandscape') {
.foo {
color: #00f;
}
}
#media only screen and (orientation: 'notlandscape') {
.foo {
color: #00f;
}
}
The actual desired output:
#media only screen and (orientation: landscape) {
.foo {
color: #00f;
}
}
Is there a way to prevent or circumvent this behavior?
You can try interpolation. The referenced #media page also has a section about Interpolations and variables that will provide more info and examples.
landscape = 'notlandscape'
$string = "only screen and (orientation landscape)"
.foo
#media ({$string})
color: blue
Live #codepen
Parenthesis are essential here. So it's not exactly desired output but it's still valid CSS. How to avoid that (or if it's necessary) depends on use case. One idea:
landscape = 'notlandscape'
$string = "orientation: landscape"
.foo
#media only screen and ({$string})
color: blue
Live #codepen
I am just wondering what would be the best approach to using cssnext custom properties like these, alongside css modules in react.
Is there a way to share these across modules ?
:root{
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: red;
--gutter: 1.618rem;
}
#custom-media --small-viewport (max-width: 30em);
#custom-media --large-viewport (min-width: 75em);
#custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
EDIT: *** ok i tried this, thought it worked but hasn't
:global(:root) {
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: pink;
--gutter: 1.618rem;
}
CSS Modules should only handle selectors that are classnames (that start with a dot). So it should not be an issue and you should be able to use those custom definition as soon as they are in the file. You can use postcss-import to inline your file that contains global definitions.
Another solution is to define this global values using postcss plugin options:
https://github.com/postcss/postcss-custom-properties#variables
https://github.com/postcss/postcss-custom-media#extensions
Because the postcss-loader only transforms a single file at a time you must import your custom properties, e.g.
#import './root.css';
.foo {
color: var(--primary);
}
I am using https://github.com/n3-charts/line-chart library to generate charts. Is it possible to change font size of axis labels? I could not find such option in official documentation.
Something like this on the CSS would work
.tick text {
font-size: 120%;
}
Edit: The appearance of many SVG elements can be configured using CSS, just inspect them in the browser and try modifying them.
When the chart is generated it has it's own classes that you can take advantage of overwriting... Here are all the axis for example:
// X-Axis Font
.x-axis {
font-size: 120%;
}
// Left Y-Axis
.y-axis {
font-size: 130%;
}
// Right Y-Axis
.y2-axis {
font-size: 140%;
}
Hope that helps.
How to create Responsive Email Template?
I can build responsive layout using media-query but these styles we can write only in external/internal CSS. Email template we cannot use DIV and external/internal CSS.
How can i build responsive email template.
Thanks,
Shanid
Using media queries in an HTML email is not a very good solution to developing a responsive HTML email because the vast majority of your audience is not going to see it the way you intend.
Gmail will not preserve any CSS in the head of an html email. This is where media queries are, so .. won't work.
Android supports media queries but it's buggy at best.
The best way to develop a pseudo-responsive HTML email is to build a fluid layout HTML email. Design your email with (for simplicity) a single column layout. You can develop a fluid layout with a multi-column layout but it can get pretty complicated quick.
Design your layout as normal, inline all your styling and using depreciated HTML attributes rather than css styling.. doesn't matter if it's inline, CSS still won't play well in HTML emails. Use it sparingly, don't use it at all if you can avoid it.
Do not assign height to your elements and assign width only in percentage values. Therefore allowing the device displaying the email to determine the best width to display based on the percentage values rather than specific pixel sizes.
<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table>
Here's a good example of a fluid layout: http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347
You need to understand that responsive emails, while possible, can't work on every mail client. As an example, Gmail strips all your head tag from the email, so no media queries are allowed, therefore no responsiveness. From what I've tested, responsive emails can be displayed in Outlook, Apple Mail, and a few others with standard media queries. For those, you'd have to use the typical breakpoints and apply them to trs or tds. Now, that can be tricky. You have to make sure it won't break your table layout so you really need to plan in advance what will change in your layout.
If you want it to work mostly on everything, I'd suggest you use fluid layouts using % widths. But if you really want some web responsiveness, it's the same as any responsive website. Just be aware that it will not work everywhere. Like this:
#media (max-width:680px) {
.hide { display:none; }
.main { width:440px }
.header { width:440px; }
.header-img { width:440px }
.footer { width:440px; }
.footer-size { width:440px; }
}
#media (max-width:440px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.footer { display:none !important; }
.footer-size { width:100% }
}
#media (max-width:240px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.button { width:100%; height:auto; }
.footer { display:none !important; }
.footer-size { width:100% }
}
(That's just some code from an email campaign I worked on, btw)
You can use media queries for common mailclients. Webclients rely heavily on inline css. Work with as much percentages as possible on your tables (100%) and max widths for tables that may not scale bigger than a certain amount of pixels.
Nested tables within a 100% wrapper table always stack inherited.
U should learn #media queries first. Is't something for write here because of many info.