I'm working with Foundation4's Sections now. It is a very nice component, but I wish to do some customization. I don't really know SASS. I notice in the documentation, we can customize by using this line of code:
.section-auto-sample-custom {
#include section-container($section-type:tabs);
& > section { #include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); }
}
Is this Mixin? Do I have to save it to a .sass file and precompile it or do I just drop it to my regular css file?
Even if I understand this, another question comes ahead: how can I adjust the width of the title tabs to make them auto-adjust with the width of the content? For example, if I have three tabs, they should be on top and have equal width that sum up to be the width of their tab content.
Is there any simple way to do it? Do I need to use JavaScript?
I use a little snippet of jQuery to do this.
$('.section-container .title').width(100/$('.section-container .title').size() + '%');
Related
Is there any way to modify the width of a source code block in an asciidoc file instead of having to scroll horizontally to show its content?
The Asciidoc documentation does not say if changing the width of a block in general is a possibility.
Asciidoc markup provides both the content and suggestions for how that content should be rendered. But, it doesn't get into the weeds for presentation. That's what the "theme" is for.
Can you demonstrate the problem? The default theme for Asciidoctor does wrap wide code blocks, including lines with no whitespace. For example, this document:
= Document
Lorem ipsum...
[source, js]
----
// This is a really long line that we'd like to wrap and avoid having a horizontal scroll bar appear, but that's just awkward for everyone involved.
// ========================================================================================================================================================================================
----
Renders as:
If you have source block content that isn't wrapping as you'd like, you'll need to first find out why the wrapping does not happen, and how you might change the CSS styles to fix the problem.
Then, you should be able to create some "docinfo" files to embed your CSS fix. See Docinfo Files for details.
I'm using Sublime Text3 and PlainTasks. I have a TODO list and I'm wondering if it possible to add spacing (something like padding: 10px 0; if it was CSS) between tasks? It's annoying that they don't have any spacing between them by default... I know I can add separators, but I really want to have spacing by default. I checked the preferences and didn't find anything related to that.
I found some html template files in AppData\Roaming\Sublime Text 3\Packages\PlainTasks , and I tried tweaking the inline CSS there, but nothing changed.
Any help will be highly appreciated. Thank you!
You can set this via the "Syntax specific settings":
Make sure you have a plaintasks file open
Go to Preferences → Settings - More → Syntax Specific - User
Add the following lines to the json settings file:
"line_padding_bottom": 2,
"line_padding_top": 2,
This would set a padding of 2px on top and bottom.
Source: https://www.sublimetext.com/forum/viewtopic.php?f=4&t=54
I'm doing my first project with singularity grid system and I'm loving it so far. However, I'm having a strange problem in a section where I have an <h2> and <h3> elements overlapping... really having an hard time figuring what's the problem.
My project in development is available at:
http://senseslabv3.brunomonteiro.mixture.io/
First <section> with class=intro.
Does anyone have a clue about it's going on?
Thanks for your time.
As the others have said, you need to clear your floats. By default, Singularity's output style is "Isolation" which requires a knowledge of how floats should get cleared (clear: left, clear: right, clear: both, clear: none). Singularity assumes no clear (clear: none) which means that grid items may overlap if not properly cleared. It does this to adhere to the most common mental model for the Isolation output method, specifically placing blocks at a discrete point on the grid. Clearing your floats will clear them to an item's margin edge, most visibly by creating new rows. See the Mozilla Developer Network article on Clear.
Note, clearing your floats and clearfixing as proposed by lolmaus actually do different things. Clearing your float will clear items to margin edges, whereas clearfixing an item will ensure that all of its floated children are properly contained.
The Float output adheres to a different mental model, one of walking across a row of your grid, and therefore automatically clears your floats for you. If you'd prefer to use the Float output style as your default, simply add $output: 'float' to your Sass file before calling your grid. This will change your global output style context. Alternatively, you can use float-span to use the Float output style mental model and output on-demand instead of grid-span, or pass $output-style: 'float' as an option to grid-span.
Take a look at the documentation for Output Styles, Output Span, Float Span, and Context Overrides in grid-span for a deeper dive into the different output styles and options available in Singularity.
Clear both needs to be declared somewhere below your grid-span mixin .tag h3 {clear: both;}
instead of the ugly <div style="clear: both;"></div> consider this:
.intro h2 {
#include pie-clearfix; }
Or, if you use toolkit:
.intro h2 {
#extend %clearfix-micro; }
We might better address your problem if you share your SASS code.
This is an old question but I just ran into the problem. Snugug's answer worked perfect but I wanted to show the code that worked for me. (Couldn't put code in a comment)
//Main content container
.l-main {
#include breakpoint(80em) {
#include grid-span(16, 3, 20);
}
}
// A full width banner inside content container. I needed this to clear because there are several other smaller columns/grids above and below the banner.
.b-banner {
#include breakpoint(80em) {
#include float-span(16, 1, last);
}
}
Let's say i have a grid of articles (2 columns), inside another column.
What's the best way to achieve this without having to explicitly tell singularity on which column should the article be.
Is it the only option to declare it with pseudo classes?
article:nth-child(1n){
#include grid-span(1,1);
}
article:nth-child(2n){
#include grid-span(1,2);
}
Thanks.
There is an even shorter way than Scott aka user2242314 has suggested above::
$grids: 12;
$gutters: 1/3;
.column {
#include float-span(1);
&:last-child {
#include float-span(1, 'last'); }}
Unfortunately, there's a bug in Singularity that prevents from using this short method, even though it's suggested by Singularity documentation.
I've fixed the bug and submitted a pull request. Wait for Scott or Sam aka Snugug to accept it and release an updated gem (of version 1.0.7 or later). Then run gem update or bundle update and you're able to use the cleanest solution.
You can use the float output style but you are still going to have to deal with the extra padding on your right column.
http://sassmeister.com/gist/5256403 - you may have to select singularity from the drop-down menu to make this link work.
With floats, writing “last” in the location column is equivalent to “omega” in Susy. Dealing with that extra padding is still going to be tricky but at least your columns are floating next to each other without nth.
If you are still unsatisfied, you can write your own output style. Not sure what CSS will do the trick but at any rate, the CSS Singularity generates is completely customizable. I have yet to fully document but you can add your own output styles: https://github.com/Team-Sass/Singularity/tree/1.x.x/stylesheets/singularitygs/api
Is it possible to create a conditional loop in Sass/Compass (with Middleman) based upon availability of (SVG) images?
I have upto 150 images (svg), each will be used as a background to a navigation link. However, the numbers of the images are non-continual, meaning some breaks. For example, there is 1.svg, 2.svg, 4.svg (with 3.svg missing). This happens throughout.
Now I could create a loop that just covers all eventualities:
#for $i from 1 through 150 {
.icon_#{$i} {
background-image: inline-image("svg/#{$i}.svg");
}
}
If I compile ordinarily whilst it produces excess CSS code (rules for images that don't exist) this does the job.
However, Middleman throws an error using this 'cover all' loop and won't compile the CSS if the image is missing (fair enough). And that got me thinking…
As Compass has image helpers, is there additional logic I could add that only produces the styles if the image exists? My first thought was using the Compass image-width() helper (e.g. if width == 0 don't continue) however, this won't work with SVGs.
Can anyone think of a way of doing this? Or is it simply implausible?
With a little knowledge of Ruby, you can adapt this existing solution to do what you want:
https://stackoverflow.com/a/10456412/901944
You could add a sass variable at the top before the loop and declare all the image numbers. ie:
$svgs: 1, 2, 4, 15, ... 150
Then your loop would be:
#for $i in $svgs {
.icon_#{$i} {
background-image: inline-image("svg/#{$i}.svg");
}
}
It's not the greatest solution as I'm sure you don't really want to enter in up to 150 numbers. Plus it's not very maintainable. But it's an option.