LESS is very cool. I always wondered if there are any good html generators that allow me to write a form more easily or do other things. Is there something somewhat similar but for html?
Tried Haml?
From its website, this Haml code:
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
gets converted into this HTML.
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%= current_user.address %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
If you like Haml, then you might also like Sass, which is Haml for CSS. Actually, Haml comes with Sass. You can still use LESS if you like.
Check out Zen-Coding.
Uses a CSS style markup to generate HTML with some nice features.
Did one Blended-HTML On-line Layout Generator
Uses CSS3 and HTML5 markup to generate the source code for HTML page layout on-line.
Related
I'm trying to integrate this card styling (https://codepen.io/simeydotme/pen/PrQKgo) into my rails app. But it seems quite difficult to do so because my code generates the image URL on the HTML, but this CodePen has its image URLS declared in the CSS inside a variable like --charizardfront:.
My qestion is, how can you modify this CodePen so that it works by taking the URLs from the HTML instead?
The CodePen and my project uses SCSS, so perhaps that give us more options?
This is my _profile-quest_cards.html.erb code for the card/s that I want to style if anyone is interested:
<div class="profile-carousel profile-carousel--quest_cards">
<div id="profile-carousel-quest_cards-actual">
<% current_user.quest_cards.each do |quest_card| %>
<div class="profile-carousel-item profile-carousel-item--quest_cards" data-asset-id="<%= quest_card.id %>">
<div class="profile-carousel-award profile-carousel-award--quest_cards">
<div class="award-image">
<%= image_tag(quest_card.url) %>
</div>
<div class="award-meta">
<span class="name"><%= quest_card.label %></span>
<span class="for"><%= quest_card.description %></span>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div id="profile-carousel-quest_cards-arrow-left" class="profile-carousel-arrow profile-carousel-arrow--left profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
<div id="profile-carousel-quest_cards-arrow-right" class="profile-carousel-arrow profile-carousel-arrow--right profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
</div>
I've tried the method suggested by ChatGTP, but that doesn't work on codepen:
"You can add a data-* attribute to the div element that contains the image, and assign the value of quest_card.url to it. Then in the SCSS code, you can select that div, and use the attr() function to get the value of the data-* attribute, and assign it to the --charizardfront variable.
Here's an example of how you could do this:
HTML:
<div class="card charizard animated" data-charizard-front="https://cdn.midjourney.com/42ada987-b1aa-4797-a4be-b8cc4a6a6b13/grid_0.png"></div>
SCSS:
--charizardfront: url(attr(data-charizard-front));
When I try that on Codepen, the card image doen't show. Hope I can accomplish my task without using javascript, but if that's the best soloution then I'll take it. Thank you!
HTML divs don't use urls as attributes. You're probably looking for
<img>
Try something like
<img src='path'></img>
I'm trying to publish a piece of html to umbraco.
I managed to setup tinymce to accept all the html tags, however, there is still some wrong transformations being done.
When I publish this piece of html:
<div class="col-md-4">
<a href="" class="card-link">
<div class="panel panel-default">
<div class="panel-body">
<h2 class="card-link-title">Currencies</h2>
<i class="card-link-icon icon icon-money-currencies"></i>
</div>
</div>
</a>
</div>
It is transformed to:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<h2 class="card-link-title">Currencies</h2>
<i class="card-link-icon icon icon-money-currencies"></i>
</div>
</div>
</div>
The a tag is removed. According to new html5 standards, div under a tag is valid (http://w3c.github.io/html-reference/a.html#a-changes), so I'm wondering if there's a way to make tinymce in umbraco accept the piece of html as it is
You need to edit the javascript in umbraco/lib/tinymce/tinymce.min.js. (The file mentioned by Jannik Anker in the other answer is a legacy version of tinymce, no longer used)
Look for a line
n("a","href target rel media hreflang type",u)
and try amending it to
n("a","href target rel media hreflang type",u,"div")
Make sure to clear your browser cache after editing so the updated file is used.
A quick look inside /umbraco_client/tinymce3/tiny_mce_src.js reveals a function named getHTML5() where these rules seem to be defined. In my 7.4.0 test site I'd change line 2507 to
'a[A|href|target|ping|rel|media|type][B][div]' +
BUT that's not really doing anything, even if you make the same change in /umbraco_client/tinymce3/tiny_mce.js, because the RTE editor is using a different JS entirely, namely /umbraco/lib/tinymce/tinymce.min.js in which I cannot find that same function :-s
I don't have time for much further investigation, but maybe this can get you a little bit further?
I found this <%= %> tag in some HTML, I haven't seen this in any tutorials. What is this called?
<div class="lt-toggle-btn" >
<div class = "row">
<a class="reflection-questions-title" href="#resources/videos/<%- CONTENTID %>">
<i class="fa fa-youtube-play"></i>
<p class="reflection-title col-xs-11 col-sm-11 col-md-11"><%- CONTENTNAME %></p>
</a>
</div>
</div>
In ASP.NET, these are called Code Render Blocks.
You can check these links for details:
Code Render Blocks and Embedded Code Blocks
This is an erb or Embedded RuBy tag. It is widely used in the Ruby on Rails website development platform. More can be found here
That is in ASP, opening and closing tags. It is a different language completely form html
<% is the open and %> closes. with the hyphens, its a comment.
in my template x.pdf.erb site i have linked all the stylesheets and javascript tags:
<%= wicked_pdf_stylesheet_link_tag "bootstrap.css" -%>
<%= wicked_pdf_stylesheet_link_tag "style.css" -%>
<%= wicked_pdf_stylesheet_link_tag "styleUmowa.css" -%>
<%= wicked_pdf_stylesheet_link_tag "animate.css" -%>
<%= wicked_pdf_javascript_include_tag "application" %>
When the pdf site is generated, everything is good except bootstrap grid system, i mean wicked pdf ignores my:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
So, it`s displayed like normal divs without bootstrap grid. Can you help me with this?
I've came across the same problem. There are several solutions:
Upgrade your wkhtmltopdf binary to version >= 0.12, then add :viewport_size option to render, something like this:
respond_to do |format|
format.html
format.pdf do
render pdf: "my_pdf",
viewport_size: '1280x1024'
end
end
Or you can just use col-xs-* classes
Or create pdf.css.scss (I'm using bootstrap-sass) with following content:
#import "bootstrap/variables";
#import "bootstrap/mixins";
#include make-grid(sm);
#include make-grid(md);
#include make-grid(lg);
Don't forget to include it with <%= wicked_pdf_stylesheet_link_tag "pdf.css" -%>
For plain css you will have to copy-paste all .col-sm-*, .col-md-*, .col-lg-* rules from bootstrap.css into your pdf.css, BUT without #media wrappers, it's important.
The above solutions don't work with Bootstrap 4 as of now. Bootstrap 4's grid system is built on the use of flexbox, which is not supported by wicked_pdf, due to its dependency on wkhtmltopdf.
In order to get a simple grid working while using Bootstrap 4, it's best to define your own grid by using the width w-* and display d-* commands, in order to overrule the display: flex setting.
Example:
<div class="container">
<div class="row d-table-row">
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
</div>
</div>
Note: only widths of 25, 50, 75 and 100% are supported by default. You can increase flexibility by adding your own additional width definitions to the $sizes variable of bootstrap, by adding something like this to your scss stylesheet:
// _custom.scss
#import "bootstrap/functions";
#import "bootstrap/variables";
$sizes: map-merge((20: 20%, 33: 33.33%, 40: 40%, 60: 60%, 67: 66.67%, 80: 80%), $sizes);
#import "bootstrap";
// Your CSS
Using width and display classes:
https://getbootstrap.com/docs/4.0/utilities/display/
https://getbootstrap.com/docs/4.0/utilities/sizing/
Bootstrap 4 flexbox grid and wkhtmltopdf:
How to use flexboxgrid with wicked_pdf?
For anyone who using KnpLabs/snappy, giving the viewport as an option fixes the situation:
$snappy->setOption('viewport-size','1280x1024');
In my case I'm using pdfkit (python) which uses wkhtmltopdf. To use bootstrap's grid system, I'm using bootstrap 3.4.1 and bootstrap 5.1.3 (yes I'm importing both .min.css in the same HTML), so I can use grid system and the latest bootstrap components.
You need to use col-xs-<number> instead of col-<number> so the PDF will be exported correctly
I know it is not the best and probably optimal solution, but works!
I came accross this solution, just add this to your css file, and it should work.
.row {
display: -webkit-box;
}
Rails noob here. I'm attempting to create create single-page scrolling site similar to this ...but, you know, not nearly as attractive :-)
Anyway, I've got my javascript working however I've developed much of the content (contact form, about us page etc etc) in different views which are hanging out in various html.erb files. Rather than cut and paste the contents of each into a single home.html.erb, I was wondering if there was a clean way to just embed the content from each view into my homepage view. Something like this:
<h1>My awesome homepage!</h1>
<div>
<div id="about">
<%= put_page_here page=about_us %>
</div>
<div id="our_product">
<%= put_page_here page=about_us %>
</div>
<div id="contact">
<%= put_page_here page=contact %>
</div>
</div>
If you would recommend going about this entirely differently, please let me know.
Many thanks in advance!
This should work:
<%= render partial:"shared/contact_us", locals:{variable:value} %>
Note that it will look for a view in app/views/shared/_contact_us.html.erb - notice the _ before the view. Pass the variables the view needs in through locals. More information on passing variables around here.