I am trying to code my own responsive grid system using SASS. Using this simple Tutorial I was able to make a simple grid.
Currently, I am calculating the widths of all the columns according to their media query using this code:
#media #{$breakpoint-medium} {
.wrapper {
width: 95%;
max-width: $grid-max-width;
}
#for $i from 1 through $grid-columns {
.col-#{$i} {
width: 100% / $grid-columns * $i;
}
}
}
Where $grid-columns = 12
This works well, however, I'd like to center a block of text that I have designated as 8-columns wide, so I need to push, or offset this column by 2 columns.
I'm new to SASS so I'm still getting my bearings with using math in my CSS and such, but how can I adapt this code so that I can make a similar class, "push-#" that will automatically know to push the content properly?
Thanks so much in advance!
It is essentially the same math, you are just applying margin instead of width.
#for $i from 1 through $grid-columns {
.push-#{$i} {
margin-left: 100% / $grid-columns * $i;
}
}
Related
This function gives me output in #ff0063, but I'm trying to accomplish a plethora of colorful pixel dots on the screen. If possible could someone describe what exactly is going on in the code?
#function multiple-box-shadow ($n) {
$value: '#{random(2500)}px #{random(2500)}px #ff006e';
#for $i from 2 through $n {
$value: '#{$value} , #{random(2500)}px #{random(2500)}px #ff006e';
}
#return unquote($value);
}
The random() function in SASS returns you a number from 1 to the argument you provided. Therefore the code in the question is creating multiple box-shadow values at random positions up to 2500px away from the original element.
To add random colours to the logic, provide 3 random(255) arguments to rgb(), like this:
#function multiple-box-shadow ($n) {
$value: '#{random(250)}px #{random(250)}px #ff006e';
#for $i from 2 through $n {
$value: '#{$value} , #{random(250)}px #{random(250)}px rgb(#{random(255)}, #{random(255)}, #{random(255)})';
}
#return unquote($value);
}
Working example
Note that the demo uses up to 250px for the random positioning to make it fit on the screen better.
I try to manage separators (like a "-") between each element of a list.
It's relatively simple when we only have one line, but I can't do it with more than one line.
When the site is displayed on a big screen I have:
Example center aligned
Listitem1 - listitem2 - listitem3 - ... - listitemX
The last item having no separator "-"
html
<p>
<a>listitem1</a>
<a>listitem2</a>
<a>listitem3</a>
<a>listitem4</a>
<a>listitem5</a>
<a>listitem6</a>
<a>listitem7</a>
...
<a>listitemX</a>
</p>
CSS
a:nth-child(n+2)::before {
content: " - "
}
This is relatively easy in CSS using :: before from the 2nd child...
But with media queries, when my screen shrinks and this same list spans multiple lines, I would like to remove the last "-" separator from each line.
Example center aligned
Listitem1 - listitem2 - listitem3 - listitem4 (without the separator here)
Listitem5 - listitem6 - listitem6 - listitem8 (without separator here either)
Listitem9 - etc ...
Does anyone have an idea?
Thank you in advance. Sebastian
There doesn’t seem to be a pure CSS solution, but you can use a bit of JS to set or unset a class based on whether an item is the first in a line.
Here I’m setting the text color to transparent rather than the content to "" because changing the content affects width, which then jumps around as it wraps/resizes.
a.firstInLine::before {
color: transparent;
}
The Javascript goes through the nodes and checks whether it’s lower on the page than the previous node. If it is (by more than a small margin of error), it sets the class firstInLine:
function calcY() {
document.querySelectorAll("p a").forEach((n, i, nodes) => {
if(i > 0) {
const thisY = n.getClientRects()[0].y;
const prevY = nodes[i - 1].getClientRects()[0].y;
if(thisY - prevY > 4) {
n.classList.add("firstInLine");
}
else {
n.classList.remove("firstInLine");
}
}
});
}
window.addEventListener("resize", calcY);
calcY();
I should add that there are a couple of other CSS things to set. We don’t want it to wrap, and in order for getClientRects to work right, it can’t be a purely inline element, so:
a {
white-space: nowrap;
display: inline-block;
}
CodePen
I am displaying a table in html consisting of only a single column full name :
Full_name
Alex
Frown
Chris
Dram
Drex
Pheobe
I have used a for loop in to display the names. But i want the output to be displayed in two column distributed equally like:
Full_name Full_name
alex Frown
Chris Dram
Drex Pheobe
You can separate the names to two arrays, for example by index. If remainder of index divided by 2 is 0 push it to one array, otherwise push it to the other array.
let fullNamesArr...
let fullNamesLength = fullNamesArr.length;
let leftColumn = [];
let rightColumn = [];
for (let i = 0; i < fullNamesLength; i++) {
if (i % 2 === 0) {
leftColumnt.push(fullNamesArr[i]);
} else {
rightColumn.push(fullNamesArr[i]);
}
}
and then just display the two tables next to each other.
Or you can use styles.
Make a "header", with two divs with the same width (300px), both
containing the string Full_name.
Make container with width for example 600px. Give it a style of display: flex; flex-wrap: wrap;
In that container add the ngFor element and give it a 300px width.
(600 and 300 is an example)
It seems what i was trying to achieve could be simply done by css. Just give a css class to the tbody, in my case i named it split-table then add the following css:
<style type="text/css">
.split-table tr{
width: 50%;
float: left;
}
.split-table tr:nth-child(1n+2){
background: rgba(0,0,0,.1);
}
}
</style>
This HTML fragment spreads a long list of short items over a series of columns so that it's easier to scan and doesn't take up as much vertical space. Everything is neatly aligned and the number of columns automatically adjusts itself if you resize the browser window. That's all great. The only problem is that the width of each column is hardcoded in the CSS.
<!doctype html>
<style>
ul.hlist {
width: 80%;
column-width: 6em;
-moz-column-width: 6em;
-webkit-column-width: 6em;
}
ul.hlist > li { display: block; }
</style>
<p>This header unconditionally uses one or more of these deprecated
integer typedefs:</p>
<ul class="hlist">
<li><code>caddr_t</code></li>
<li><code>daddr_t</code></li>
<li><code>fsid_t</code></li>
<li><code>quad_t</code></li>
<li><code>u_int_t</code></li>
<li><code>u_quad_t</code></li>
<li><code>u_int16_t</code></li>
<li><code>u_int32_t</code></li>
<li><code>u_int64_t</code></li>
<li><code>u_int8_t</code></li>
<li><code>u_char</code></li>
<li><code>u_short</code></li>
<li><code>u_int</code></li>
<li><code>u_long</code></li>
<li><code>n_short</code></li>
<li><code>n_long</code></li>
<li><code>n_time</code></li>
</ul>
With some JavaScript, one can scan the list and override column-width to the actual width of the widest list item; there's some fiddliness because each <li> is stretched to the current width of the column, so you have to look inside, but that's not a serious hurdle.
function innerWidth (el) {
var kids = el.children;
var w = 0;
for (var i = 0; i < kids.length; i++)
w += kids[i].offsetWidth;
return w;
}
function setColumnWidth (list) {
var items = list.children;
var mW = 0;
for (var i = 0; i < items.length; i++) {
var w = innerWidth(items[i]);
if (w > mW)
mW = w;
}
list.setAttribute("style",
"column-width:" + mW + "px;" +
"-moz-column-width:" + mW + "px;" +
"-webkit-column-width:" + mW + "px");
}
document.addEventListener("DOMContentLoaded", function (e) {
var lists = document.getElementsByClassName("hlist");
for (var i = 0; i < lists.length; i++)
setColumnWidth(lists[i]);
});
The question is, is there any way to get the same (or nearly so) effect as this JS using only CSS? Please note:
In the example, every <li> has its contents wrapped in a <code>, but your answer must not rely on this, because it ain't necessarily so in other cases.
I already have an entirely client-side solution, and additional server-side processing in context is extremely awkward, so I strongly prefer client-only answers.
Answers involving experimental or not-yet-deployed-at-all CSS features are just fine.
Rendering without JS: http://jsfiddle.net/7F8n6/2/ (columns are rather too wide)
Rendering with JS: http://jsfiddle.net/7F8n6/3/
The items are inside <code> elements so by default are rendered with a monospaced font. That means their width only depends on the number of characters.
Assuming you can influence the complete page on the server, determine the item with the most characters on the server. Here it's 9.
Now generate a CSS rule in the page that sets the column width to 9 characters:
column-width: 9ch;
-moz-column-width: 9ch;
-webkit-column-width: 9ch;
The 'ch' unit is the width of a single '0' (zero). It's not supported on every browser, see MDN, so I don't know if this solution is good enough for you.
I'm using wkhtmltopdf to convert some HTML to PDF. Is there a proper way to handle sizes and dimensions?
I mean - how can I style an image with the dimension of 100px x 1oopx that it is printed in the following dimension 10mm x 10mm (I'm using DINA4: 210mm x 297mm)?
I believe you can use a variety of units in the print styles, including cm and mm. So something like this should work:
#media print {
img.selector { width:1cm; height:1cm; }
}
Or perhaps just:
#media print {
img[width="100"]{ width:1cm; height:1cm; }
}