I'm trying to use gulp-uncss to remove unneeded CSS from a Zurb Foundation website.
Within the site I'm using Foundation's Equalizer to make two columns the same height. This works by adding a data- attribute to an element:
<div data-equalizer>
<div data-equalizer-watch>
<div>
<div data-equalizer-watch>
<div>
<div>
When the page loads Foundation determines the height of the two elements and injects an inline style to set the height of the elements to the greater of the two element heights. The result is:
<div data-equalizer>
<div data-equalizer-watch style="height: 256px;">
<div>
<div data-equalizer-watch style="height: 256px;">
<div>
<div>
When I add gulp-uncss to my gulpfile.js the Equalizer no longer works. The data- attributes are still present in the HTML file, but the inline styles are not added.
I've tried using the ignore option in gulp-uncss to ignore height but had no luck. The inline style is no longer added to HTML document.
Is there an option in gulp-uncss that will allow the equalizer to do it's job?
I was able to get gulp-uncss working using the ignore parameter in UnCSS.
Adding:
ignore: [/^meta.foundation/, /f-topbar-fixed/, /contain-to-grid/, /sticky/, /fixed/]
to uncss() kept all the necessary CSS. The most important of these is /^meta.foundation as this allows the Foundation JS to inject the styles. The remaining values /f-topbar-fixed, contain-to-grid, /sticky/ and /fixed/ are all specific to the Foundation JS modules I'm using. The above work for a .sticky topbar.
If you're using other JS modules you'll need to determine what classes are being injected and add those to the the ignore array.
Related
I created a custom component.
I also created a custom Style with the corresponding css class and added the components to the Available Renderings. The styles show up correctly in the Experience Editor
.
Here is the markup:
<div class="section component full-image">
<div class="container">
//Rest of the code
</div>
</div>
If I apply this style to any of the out-of-the-box components, it gets applied. However, it does not apply to my component. What Am I missing?
Applied to OOTB components like the rich text box
Not applied to my component
Figured it out, Sitecore didn't like a "section" class in the parent div. Removing it works
How I can display columns with space between them? by default they are all following each other and I can't find a way to change that.
Here is an example from youtube:
Depends on how much spacing do you want... when you use a frontend framework sometimes you need to make some tradeoff, development speed vs "not too customized". The sample you take from youtube has less spacing than default column gutter of the framework, so your affirmation of "by default they are all following each other", I think is not quite precise; they have spacing, if you want to remove, just use row collapse as the class of the columns container.
Now, if you want more spacing than the default, you still have options:
You can leave a column between each element, just a matter to add one column offset to each one.
You can change the column gutter size on framework settings (if you're using the CLI version or customized, not the prebuilt)
You can also write some CSS to increase spacing for an specific column container (I won't recommend to do so globally because you could mess with the framework).
Your solution is to use a framework such as Bootstrap or Foundation. in foundation, every 'column' is inside padded, so you're able to display a grid such as this.
Read here for more info: http://foundation.zurb.com/sites/docs/grid.html
This post is tagged with Zurb Foundation, so I will solve it using their classes with what is a little bit of a workaround. For example, if you want three columns with the ability to keep adding items and have it automatically wrap you could have the following simple example with the block grid:
<div class="grid-x small-up-3">
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
</div>
and the following CSS
.small-up-3 > .cell {
width: calc(33.33333% - 4px);
margin-left: 2px;
margin-right: 2px;
}
.small-up-3 > .cell:nth-of-type(n+4) {
margin-top: 2px;
}
The calc is needed to subtract your margin from the width of each cell to prevent the wrapping you are seeing when just adding normal margin.
Is there a way in Sitecore SPEAK UI (7.5) to configure a ListControl (ViewMode set to DetailList) to contain a column with images, and another column containing buttons?
I've created a ListControl Parameters item beneath my PageSettings item and have added a few ColumnField items for the required columns - but cant find any other template types to add for different types of column data. I've also tried playing around with the Formatter and HTMLTemplate fields of the ColumnFields but am not sure how these are meant to be used.
Considering button means hyperlink. You can try adding the following in the HTMLTemplate:
For Image:
<img src="{{YourImageSourceField}}" ..../>
For Hyperlink:
{{YourLinkTextField}}
You can also consider reading Martina Welander Speak Series for some information on this kind of custom implementations.
I've also used the custom title property of the ListView by setting ViewMode to TileList. Then used Knockout to databind to a custom tile using standard cshtml, if this is any use?
<div class="sc-tile-default" data-bind="attr: {id: Id}">
<div style="min-height: 98px;">
<img width="112" data-bind="attr: {src: Path}" />
</div>
<div class="sc-iconList-item-title">
<span data-bind="text: Name"></span>
</div>
See this project
https://github.com/sobek1985/WallpaperManager
i am using foundation for my first project right now and i really love the functionality it provides out of the box, but i am having trouble with my custom radio boxes.
The idea is to not only have text inside of the radio buttons label, but also an image and some bold text.
As soon as i start using either an img or a bold tag inside of the label, the radio button selection via the labels text is broken.
The code i am using is this
<label for="radio2">
<img src="img/nho_musicians_flute.png">
<input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED>
<span class="custom radio checked"></span>
<b>Radio</b> Button 1
</label>
With this it is only possible to select a radio box by clicking on it DIRECTLY, clicking the text or the image results in erratic selections, it seems that the foundation JS selectors didn't account for extra tags inside of a label.
Is there a way to make this work with foundation, or do i have to resort to workarounds (making the whole text bold and put the image outside of the label)?
Good question, I had the same issues as you when I needed to create custom forms through F4's custom form implementations.
If you look in the implementation (custom.forms.scss) you can see that they use the :before and content: "" in order to be able to achieve this. I suspect that's why you can't add any tags after the <span class="custom radio"></span>
Now what you CAN do as a workaround is to place your custom elements etc inside the <span> element. This will work just fine, but will look wierd as the width and height is very small. But from then on its just a matter of styling it until you get it to look as you want. Here is a really simple example using absolute positioning:
<span class="custom radio">
<span style="position: absolute; top: 0; left: 0; width: 500px; margin-left: 30px;">
<b>test</b> foo
</span>
</span>
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.