I'm well aware of the dangers of parsing HTML with Regular Expressions but I'm in a pickle and need to speed things up! I have this code block:
<div class="row">
<div class="span1"><i class="fc-icon-letterpress-circle"></i>
</div>
<div class="span4">This design is letterpressed onto the finest quality salvaged paper made here in the USA.</div>
</div>
<div class="row">
<div class="span1"><i class="fc-icon-madeinusa-circle"></i>
</div>
<div class="span4">We work hard to be able to say that this product is proudly created right here in the USA.</div>
</div>
<div class="row">
<div class="span1"><i class="fc-icon-cotton-circle"></i>
</div>
<div class="span4">This product is made from tree-free paper sourced from salvaged cotton from the textile industry.</div>
</div>
And I need it to be transformed to this:
letterpress-circle, "This design is letterpressed onto the finest quality salvaged paper made here in the USA.";
madeinusa-circle, "We work hard to be able to say that this product is proudly created right here in the USA.";
cotton-circle, "This product is made from tree-free paper sourced from salvaged cotton from the textile industry.";
Preferably with one regular expression, in sublime text
This is what I have so far.
.+i class=\"fc-icon-(.+)\".+
$1
This is what I landed on:
<div class=\"row\">
<div class=\"span1\"><i class=\"fc-icon-(.+)\"></i>
</div>
<div class=\"span4\">(.+)</div>
</div>
Related
I have 3 columns that I want to keep side-by-side. They work as expected with a short title. However, once I put text into the columns they end up one per row instead. How do I force the text to wrap so that the columns remain side-by-side?
<div class="grid-block align-center">
<div class="grid-content">
<p class="text-center">
Less Stress
</p>
<p class="text-center">
Some very long text here.
</p>
</div>
<div class="grid-content">
<p class="text-center">
Less Work
</p>
<p class="text-center">
Some very long text here.
</p>
</div>
<div class="grid-content">
<p class="text-center">
More Profit
</p>
<p class="text-center">
Some very long text here.
</p>
</div>
</div>
Although the new Foundation App framework uses Flexbox, it still has a helper class using the more familiar 'medium-x' nomenclature. Therefore, the following code works, based on a 12-column grid which can be changed to any quantity of columns desired.
<div class="grid-block align-center">
<div class="grid-content large-4">
<h2 class="text-center">Less Stress</h2>
<p class="text-center">
Stop stressing about paperwork, monitoring xxx and xxx, tracking xxx and revenue, trying to stay on top of all operations. XXX takes all the stress away.
</p>
</div>
<div class="grid-content large-4">
<h2 class="text-center">Less Work</h2>
<p class="text-center">
Work less by getting rid of paperwork and streamlining your operations. Life's so much easier because XXX does all the work for you.
</p>
</div>
<div class="grid-content large-4">
<h2 class="text-center">More Profit</h2>
<p class="text-center">
Save money by eliminating paper and data-entry errors, and lowering operational costs. Increase revenue with more accurate billing, faster billing cycles and more time for customers. XXX makes you more profitable.
</p>
</div>
</div>
I've just been doing some research about regular expressions on dreamweaver and had no idea you could do so much with find and replace.
One thing i haven't been able to figure out is if i have:
<div class="item active"> <img src="images/gates2/large/gates1.jpg">
<div class="carousel-caption">WG1</div>
</div>
<div class="item"><img src="images/gates2/large/gates2.jpg">
<div class="carousel-caption">WG1</div>
</div>
<div class="item"><img src="images/gates2/large/gates3.jpg">
<div class="carousel-caption">WG1</div>
</div>
<div class="item"><img src="images/gates2/large/gates4.jpg">
<div class="carousel-caption">WG1</div>
</div>
Can i automatically change the 1 to 2, 3 ect? So it becomes an order? Rather than going through each manually?
Kind Regards,
Shaun
Unfortunately, you won't be able to do what you're describing using the Find & Replace method in Dreamweaver. I know this probably isn't the answer you want to hear but, you'll have to go through them manually. Sorry to be the bearer of bad news.
I'm working with Foundation 5, none of my own custom styles. I'm linking, in order, app.css, modernizr.js, jQuery, Fastclick, and foundation.min.js.
I have followed instructions in my tutorial ("Lynda: Up and Running With Foundation") and on the Zurb website for creating a nested row, but there's a problem: the last cell in the row always jumps itself over by a small amount, throwing off not just the text flow but the entire page layout. On mobile devices, this small nudge means that the page can be swiped side to side.
Here's a screenshot of what I'm talking about.
My HTML is
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
...text...
</div>
<div class="large-3 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-3 columns">
<h3>Buy From Us!</h3>
text
</div>
<div class="row">
<div class="large-3 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-3 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
What have I done wrong? I can't see any information on Google or StackOverflow about this, I've gone over the code carefully, I've torn it down and rewritten it from scratch following code samples... I just don't get what I've missed.
So, although using large-3 columns approximates the correct output you need a little bit different structure. There are many ways to do things, but the thing to remember, is that if you are using a grid or a nested grid, all the columns must add up to 12 columns total. In your case you have a nested grid that adds up to 6. This will give you inconsistant output unless you intent for part of the column to be empty. In that case you can use the .end presentational class to force it to float left.
Here is a set of nested grids that approximates what I think you are going for.
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
text
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-6 columns">
<h3>Buy From Us!</h3>
text
</div>
</div>
<div class="row">
<div class="large-6 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-6 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
</div>
I'm using the Foundation 5 framework and am trying to solve an issue I'm having. Let's say I've got a layout like so.
<div class="row">
<div class="large-15 columns">
<div class="large-9 columns">
</div>
<div class="large-6 columns">
<div class="large-3 columns">
<p>stuff</p>
</div>
<div class="large-3 columns">
<p>stuff</p>
</div>
</div>
</div>
</div>
How can I stop the .large-3 columns from nesting? I want each .large-3 column to take half of its parent column (.large-6). Is this possibly, or am I doing it wrong?
First off, Foundation grids are 12 units wide, so unless you have built a custom grid, and written custom CSS for it, large-15 isn't going to mean anything.
That being said, this will split the right hand column neatly in half, using a 12-unit grid. Every row in the grid has to add up to 12, no matter how deeply it is nested. If you laid out the necessary structure for a 15-unit grid, the same principle would apply, although it would be much more difficult to split things in half.
<div class='row'>
<div class='large-12 columns'>
<div class='large-7 columns'>
<p>stuff</p>
</div>
<div class='large-5 columns'>
<div class='large-6 columns'>
<p>stuff</p>
</div>
<div class='large-6 columns'>
<p>stuff</p>
</div>
</div>
</div>
</div>
I think you need block grid. http://foundation.zurb.com/docs/components/block_grid.html.
If you create block grid using class "small-block-grid-2" and with two "li" then both li will take half of the available width.
Also I show your last comment, if you don't need margin then add collapse class to "row" div.
I hope this helps.
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file