I'm trying to have gutters not only between columns but also left and right of the layout.
Is there a way to do that using the add-gutter function?
Unlike Susy, Singularity does not provide scaffolding for containers.
To my personal taste, this is a great advantage: Singularity does not require any scaffolding either! The result is cleaner, more understandable HTML and CSS.
This does not mean that Singularity is limited in functionality. When you do need some scaffolding, you are free to build some.
Singularity provides all the necessary instruments: https://github.com/Team-Sass/Singularity/wiki/Grid-Helpers
For your purpose, there's the gutter-span() function that returns the width of the guttter relative to the container's width.
SASS:
$grids: 4
$gutters: 0.2
.element
+float-span(1)
.container
$grid-padding: gutter-span() / 2 //Adjust as necessary
padding-left: $grid-padding
padding-right: $grid-padding
Resulting CSS:
.element {
width: 21.73913%;
clear: right;
float: left;
margin-left: 0%;
margin-right: 4.34783%;
}
.container {
padding-left: 2.17391%;
padding-right: 2.17391%;
}
Related
Using the following CSS:
.notice--info::before {
position: relative;
font-family: "Font Awesome 5 Free";
font-weight: 900;
top: .5em;
left: 0;
color: #ff980052;
content: "\f071 ";
font-size: 4em;
vertical-align: text-top;
line-height: .1em;
text-indent: 0;
}
I've managed to achieve this look:
Using this Kramdown markup in Jekyll on the Minimal Mistakes theme:
{: .notice--info}
Important: Our systems are evolving and becoming more and more interconnected and dependent upon one another. Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.
The goal is to add font awesome icons as watermarks to the Minimal Mistakes Utility Classes defaults.
QUESTION 1: How do I get the first line to overlap without indentation?
QUESTION 2: How do I bring the text to the front so it's the top layer and isn't washed out by the alpha channel of the Font Awesome icon?
Thanks!
I've gone about re-creating your intended effect using Unicode rather than Font Awesome because you can achieve so much these days with a combination of Unicode and CSS filters that a third-party dependency like Font Awesome (which was popular in the early 2010s) may not be necessary any more.
Principally,
I've given the paragraph text-align: justify
I've made the paragraph see-through, by giving it an rgba() background-color
Finally, I've positioned the warning symbol beneath the paragraph, using a z-index of -6
Working Example:
.notice--info {
position: relative;
padding: 12px 12px 30px 12px;
font-size: 14px;
line-height: 24px;
text-align: justify;
font-family: sans-serif;
background-color: rgba(187, 197, 224, 0.3);
}
.notice--info::before {
content: '\26A0 \FE0F';
display: block;
position: absolute;
top: 42px;
left: 6px;
z-index: -6;
font-size: 80px;
filter: hue-rotate(-10deg) saturate(8);
opacity: 0.5;
}
<p class="notice--info"><strong>Important:</strong> Our systems are evolving and becoming more and more interconnected and dependent upon one another. Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.</p>
Is there any difference in using &:first-of-type nested within apple class vs only :first-of-type nested within all-fruits class. Because they both give same results by making the apple word in color red. How to know when to use them?
html:
<div class="all-fruits">
<p class="fruit apple">Apple</p>
<p class="fruit strawberries">Strawberries</p>
</div>
css:
$apple: red;
.all-fruits{
margin-left: 200px;
margin-top: 100px;
.apple {
color: $apple;
}
:first-of-type {
font-size: 100px;
}
}
vs
.all-fruits{
margin-left: 200px;
margin-top: 100px;
.apple {
color: $apple;
&:first-of-type {
font-size: 100px;
}
}
}
Is there any difference in using &:first-of-type ... vs only :first-of-type
Yes, there is a difference between those two and it can be a very big difference in some cases. Have a look at the CSS generated from your SASS examples:
/* :first-of-type example */
.all-fruits :first-of-type {
font-size: 100px;
}
/* &:first-of-type example */
.all-fruits .apple:first-of-type {
font-size: 100px;
}
In first example you are saying "set font-size to 100px to any element that descends from .all-fruits element, assuming it is the first element of its type". So if you ever add any non-paragraph element to your .all-fruits div, it will also have a font-size of 100px. Consider following example:
<div class="all-fruits">
<p class="fruit apple">Apple</p>
<p class="fruit strawberries">Strawberries</p>
<span>Yummy!</span>
</div>
With .all-fruits :first-of-type the span will also have 100px font-size, while .all-fruits .apple:first-of-type would ensure only those elements that are first of their type AND have .apple class get 100px fonts.
Because they both give same results ... How to know when to use them?
Both giving the same result in some specific case is no excuse for assuming both are equally good for the job. I believe following CSS would give you the same result with your current HTML:
.all-fruits {
margin-left: 200px;
margin-top: 100px;
}
.all-fruits .apple {
color: red;
}
*:not(:last-of-type) {
font-size: 100px;
}
But it does not mean that my :not selector is any good at all. In fact, it would be a terrible decision to use that selector.
While it's hard to predict all possible additions to current HTML and write a 100% future-proof CSS, more often than not, it's a good idea to apply styles via classes instead of very generic or universal selectors.
In your case, .apple:first-of-type seems to be a better choice than just :first-of-type. If I assume a little more about your requirements, I would also consider using .fruit:first-of-type as it would increase font-size of any fruit that is first in the list, not just apples.
I would like to achieve this mixin natively with Susy:
#mixin mainContainer($width, $maxWidth) {
width: $width;
max-width: $maxWidth;
margin-right: auto;
margin-left: auto;
}
How can I do that?
Thanks!
The only reason to use Susy for this mixin is if you want Susy to provide one of those two values. If you plan to pass in both the width and max-width explicitly as arguments, there's no need to involve Susy at all.
I'll assume you do want Susy to provide one of the values, so I'll just guess which one, and let you change it if I guess wrong. In order to use Susy with customized output, you'll use the container() function instead of the container() mixin:
#mixin mainContainer($max-width, $susy: $susy) {
width: container($susy);
max-width: $max-width;
margin-right: auto;
margin-left: auto;
}
I've searched high and low, read tutorials and still have no answer for this :-\
What's best-practice for getting 3 images evenly spaced inside a div (one left, one middle, and one right), and keeping the distance between images appearing even as the browser size is reduced? I have tried using width- and margin-%'s with no luck. Is it more appropriate to use an in-line block solution, and if so, how?
Page in question: http://www.1000hours.co.nz/mtc/
html:
I was unable to post the html here despite reading the guide, I'm not sure why? It's in the revised JSfiddle markup: http://jsfiddle.net/87pgzLf1/
css:
#divcontainer {
float:left;
width:100%;
height:auto;
padding:25px;
margin: 5px;
#iconcontainer {
float:left;
width: 100%;
height: auto;
padding: 5px;
margin: 5px;
}
#buttoncontainer {
float:left;
width: 100%;
height: auto;
padding: 5px;
margin: 1px;
}
#icon1 {
float:left;
margin-left:20%;
}
#icon2 {
float:left;
}
#icon3 {
margin-right:60px;
float:right;
padding-left:20%;
}
You rule stack exchangers, thanks heaps in advance. Feel free to grab the background images on the page if you like as contribution <3 [disclaimer: this is not a scam but that's up to you to decide. Editors don't hate on people who give please, just because others in the world aren't always trustworthy - I am.]
Here's an update to your jsfiddle:
JSFIddle
I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an #include clearfix; which now includes an overflow:hidden property.
For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:
.container { //Container for the grid system
background: $background-color;
max-width: $site-width;
margin: 0 auto;
position: relative;
#include clearfix;
#include breakpoint($large-break) {
border-left: 20px solid #fff;
border-right: 20px solid #fff;
width: $site-width;
}
.container {
border: 0px;
margin: 0px;
clear: both;
}
}
.left-arrow, .right-arrow {
position: absolute;
cursor: pointer;
margin-top: -20px;
font-size: 0.8em;
width: 41px;
height: 41px;
top: 50%;
}
.left-arrow {
left: -10px;
background: url(/images/icons.png) no-repeat -153px -146px;
}
.right-arrow {
right: -10px;
background: url(/images/icons.png) no-repeat -197px -146px;
}
Here's a screenshot of the problem:
https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0
Should I be using something other then the clearfix mixin in my container?
Edit: - Added Sassmeister issue as requested
This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:
#mixin clearfix {
&:after {
content: '';
display: table;
}
}
see: http://sassmeister.com/gist/099ef72b56365fe8ce07
Singularity doesn't have its own clearfix mixin.
You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.
The solution is to use another mixin for clearfixing.
Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:
.foo {
*zoom: 1;
}
.foo:after {
content: "";
display: table;
clear: both;
}
I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.
It has the following benefits over the pie-clearfix:
Shorter output that works for all modern browsers:
.foo:after {
content: "";
display: table;
clear: both;
}
Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.
To configure Toolkit for using the extend way apply this in the beginning of your CSS:
#include toolkit-set('clearfix extend', false);
To override current setting once use this:
#include clearfix(true);
true means the extend methhod, false means the mixin method.
Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.
If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.