Given a mixed list of CSS selectors like below, is there anything I can do to make it more compact, other than removing commas and brackets? I am not asking for the absolutely smallest code, just whatever makes good sense when using Stylus.
.cl_nw,
.cl_n,
.cl_ne,
.selected .color_fg1,
.selected .color_fg2,
.selected .color_fg3,
.alert_nw,
.alert_n,
.alert_ne,
ul.checklists li.list_item span.tasks span.progress b,
.menuPopupList li.selected,
.menuPopupList li.selected a,
.menuPopupList li.selected a:visited,
.suggestionBox li.selected,
a.undo {
background-color: #eb6d20;
}
I'm not used to stylus pre-processing thing, but reading their documentation they have an exemple using multiple selectors on a variable and use with string interpolation:
selectorsList = '.cl_nw, .cl_n, .cl_ne, .selected .color_fg1 '
{selectorsList}
color: red
That later compiles to this:
.cl_nw,
.cl_n,
.cl_ne,
.selected .color_fg1 {
color: #000;
}
Important to note, that you must use commas in this approach or the compiler will assume that you are using a hierarchy selector
This of course will not fully compact your code with some advanced technic as you comment, but in my personal oppinion, can help the easy maintence of the code and the clear vision of waht is being applied to the selectors
Try it online
See the full section documentation here
Related
I'm using Gatsby to build a new website. I'd like to render some markdown files for a blog, but it doesn't seem to be able to process the lists/unordered lists based on the markdown syntax. For instance, this is the syntax:
* Purple dots are points on the graph, each point has an x and y coordinate. These are your observed values
* Blue line is the prediction line, covering the estimated values of the model
* The red line between each purple point and the prediction line are the errors. Each error is the distance from the point to its predicted point.
This is the output:
I also found that it's not possible to use # for the headers. For instance, here's my post description and title:
_Making Use of the scipy.optimize Library in Python to Minimize Error_
## Revision
Output:
I'm not sure what I need to change within Gatsby to render the markdown correctly?
Your code is rendering properly the markdown file, however, you haven't added any style to make them look like an unordered list or as a header.
Just add your stylesheet file:
import './yourStyles.scss'
In yourStyles.scss:
h1 {
font-size: 3rem;
color: red;
}
ul {
list-style-type: default; // change it by desired value
}
I'm using react-beautiful-dnd for my project.
I'm trying to make two draggables swap places (between droppables). Basically I only allow 1 draggable per droppable.
Everything is working fine, except for one part. The feature "move out of the way" keeps moving draggables away when I drag over them, but I don't want that.
Does anyone know a way of NOT moving draggables out of the way?
I managed to find a solution myself! It's a hacky one, so if anyone knows a more clean way of doing it, please let me know.
If anyone else wonders how to do this, here's how I did it:
I created a class non-stranslatable:
.non-translatable {
-webkit-transform: unset !important;
transform: unset !important;
}
Then in my draggable component I added this:
className={cx('my-draggable', { // cx is from the classnames package
'non-translatable': !snapshot.isDragging,
})}
If you don't want to use classnames package, this is pretty much the same:
className={`my-draggable${!snapshot.isDragging ? ' non-translatable' : ''}`}
Like I said, this is pretty hacky, so if there's a more "correct" way, let me know!
I am trying to use variables to specify breakpoints using the CSSnext plugin.
Currently my css looks like this:
#media (width <= var(--screen-md-min)) {
background-color: var(--brand-purple-dark);
}
but when i try to run this I get the following warning in the console:
5: Missing #custom-media definition for '--screen-md-min'. The entire rule has been removed from the output.
This code works fine if I replace var(--screan-md-min) with actual pixels. I am sure this is just a problem with syntax, but the CSSnext documentation does not make the use of variables very clear.
cssnext only implements future-proof specifications.
And per specification, it's not possible to use custom properties (that' depends on the dom (:root is html) in a media query (that does not depend on the dom, but instead depends on the device).
However, people working on CSS specifications have thought about a solution for custom media queries. It's #custom-media.
#custom-media --small-viewport (width < 30rem);
#media (--small-viewport) {
/* styles for small viewport */
}
Some other informations
http://cssnext.io/features/#custom-media-queries
https://github.com/MoOx/postcss-cssnext/issues/253
I have to accomodate an MREC advertisement in my layout. The ad is 300pixels wide, and cannot resize as the fluid grid otherwise contracts.
Further, the ad needs to be the first item on smartphone, before the headline block. So, on the breakpoint I am setting it to omega to push it "after" the headline, as in this screenshot (gray rules just to make it easier to see).
The headline is 8 cols, the ad is 4. All is fine except on ipad the ad column and the ad reduces to under 300 pixels, which we are not allowed to do. So, how to keep everything fluid except the ad container?
Set max/min widths on the container?
This is not hard to do, but it means the grid up top won't exactly match the flexible grid below. I assume that isn't an issue. You have to use some functions to lay out these two elements, but everything else can be done exactly as it was before.
You can keep the ad flexible down to a minimum width:
.ad {
#include span-columns(4 omega);
min-width: 300px; // you can use any width you want.
}
Or you can make the ad completely static:
.ad {
float: right;
width: columns-width(4); // you can use any width you want.
}
The important part is that you must not set a column width on the headline.
You have a few other options. The simplest might be to set right margins and padding equal to the static ad size (plus gutter):
.headline {
margin-right: columns-width(4) + $gutter-width;
}
Or, if you want that gutter to flex, try:
.headline {
margin-right: columns-width(4);
padding-right: gutter();
}
You can add clear: both; to the main content to make sure it clears the headline and ad.
If this approach doesn't work for you, try creating a new "formatting context" for the headline. One of the classic techniques is simply overflow: hidden;. Nicole Sullivan has a good blog post on how they do it for oocss, but it gets a bit more complex and you may not need all that.
UPDATE:
All these solutions require the ad coming first in the markup. The only way around that is if you know the height of the ad. In that case, you could position the ad absolutely rather than floating it, create space for it in the same way, and set a min-height on the headline (or row-container if you have one).
While practicing different scenarios in which CSS3 pseudo-classes and selectors might come in handy, I ran across something I just can't figure out!
Here's the situation. I want to modify the :first-of-type::first-letter of the first non-empty paragraph for a block of text. I'm not sure that pseudo-classes can be stacked though. Here's what I've come up with (Doesn't work, of course)
.article-body > p:not(:empty):first-of-type::first-letter { ... }
Given the following markup:
<div class="article-body">
<p></p>
<p>The "T" in this paragraph should be the one affected.</p>
</div>
The only guess I can come up with is that pseudo-classes (ie; :not() and :first-of-type) can not be stacked upon each other. Which is odd since you can stack pseudo-elements upon each other, and other pseudo-classes...
Any ideas for how this can be accomplished?
:first-of-type selects the first p, as the name suggests, not the first non-empty p as you might want.
They stack just fine, but :first-of-type purely operates on the tag (i.e. type), not on the preceding complex selector. So you just end up looking for the first p, and that first paragraph also shouldn't be empty. And that doesn't exist.
Assuming empty paragraphs might appear throughout the text, and you only want the first, non-empty paragraph to be affected, I don't think it's possible to do this with just one selector. This is the best I can come up with:
p:first-of-type::first-letter,
p:empty + p::first-letter { text-transform: uppercase; /* ... */ }
p:not(:empty) ~ p::first-letter { text-transform: inherit; /* reset */ }
That will apply the CSS only to the first non-empty paragraph (well, and to a first empty paragraph, but it won't do anything then anyway).
Removing the empty paragraph causes
.article-body > p:first-of-type::first-letter { ... }
to behave properly. Is there any reason that the empty paragraph needs to be there? Can you alter the spacing of the first paragraph to account for the empty one not being there?