Figma API to HTML/CSS - html

Trying to write a converter from Figma design to HTML/cSS. What I've followed so far:
Fetch the data for a particular Figma file by hitting a GET request using the FIGMA_TOKEN and FILE_ID
Parse the file to find children/components and extract the style properties to eventually convert it into CSS
Where I'm stuck and not able to figure out is how to structure the UI elements in proper HTML. For eg., the hierarchy and the tags to create a usable HTML code
In the UI here, I've like the following HTMl to be generated:
<div class='container'>
<h3>Template List Activities</h3>
<div class='content__wrapper'>
<h6>Account Name</h6>
<div class='meta'>
<ul>
<li>Activity Type</li>
<li>Yesterday</li>
</ul>
</div>
</div>
</div>
Just need some guidance on how to approach this

Related

Custom HTML structure for woocommerce Product variation

Hi I want to get a custom Layout for a Single Product page.
here is my page
For now, I can see the Structure like this
<div class="qodef-woo-single-summary">
<div class="summary entry-summary">
<div class="woocommerce-tabs wc-tabs-wrapper">
But I want to change my structure Like this
<div class="qodef-woo-single-summary">
<div class="woocommerce-tabs wc-tabs-wrapper">
<div class="summary entry-summary">
How can I change structure?
I can access to FTP server Please Help me!
Thanks! :)
You can create a child theme if it does not exist already, and copy the appropriate template file from your parent theme to your child theme and edit from there. For the single product page this is most likely single-product.php

how can i get css class suggestion from a html file in my css file on VScode?

suppose i have a html file like this:
//index.html
<div class="home__data">
<h1 class="home__title">Hi, I'am Alexa</h1>
<h3 class="home__subtitle">Frontend Developer</h3>
<p class="home__description">High level experience in web design, knowledge and producing quality work.</p>
<a href="#" class="button button--flex">
Contact Me <i class="uil uil-message button__icon"></i>
</a>
</div>
now i want to get suggestion of the css class of this index.html file in my css file on VSCODE
you can think about css intelliSense on vscode .if we write css class attribute on my html file we get suggestion of class that are written in css file. I want something like this but i want get suggestion in my css file of class that are written in html file.
//style.css
Is that possible?
These are the extensions that solved the problem.
https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
These two extensions can add this functionality easily.

How to generate unrendered HTML elements on web page with Angular 2.1.1 like stackoverflow?

What I am trying to do:
I am attempting to create a web page with Angular2 which shows HTML on the screen in much the same way many websites do such as stackoverflow, css-tricks, and and w3schools (to name a few). I would like to be able to copy the code and paste it somewhere else after its shown on screen.
What I know:
I have come to realize that it will probably be necessary to convert all of my opening tags ( i.e., < ) to &lt and to convert all of my closing tags ( i.e., > ) to &gt, however I am still not sure what the best way to interpolate some variables into the template.
For example, I have this in my template file:
<div>{{myTitle}}</div>
<div><p>{{mySubTitle}}</p></div>
<div>
<ul>
<li>{{item1}}</li>
<li>{{item2}}</li>
<li>{{item3}}</li>
</ul>
</div>
What I want to see (and be able to copy) in the browser:
<div>This is my title</div>
<div><p>This is my subtitle</p></div>
<div>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Durian</li>
</ul>
</div>
Stack overflow makes this really easy and nice to accomplish by letting you highlight the code you want to display on screen and clicking the {} button in the editor. However, when I try using the <pre> and <code> tags in my Angular2 app, I do not get the same result, I cannot see the actual HTML elements like <div> and <li>.
Instead what I see is:
{{myTitle}}
{{mySubTitle}}
{{item1}}
{{item2}}
{{item3}}
I have used handlebarsjs in the past and am familiar with that library but I was under the impression that using Angular2 would eliminate the need for handlebarsjs. Does anyone know how to accomplish what I am trying to do in Angular2 without handlebarsjs?
For < and > you'll probably need to use &lt and &gt.
For the braces in template expressions you may want to use ngNonBindable directive.
<div ngNonBindable> {{myTitle}} </div>
Use <pre> or <code> for HTML to become rendered verbatim.
<pre ngNonBindable>
<div>{{'{{'}}myTitle{{'}}'}}</div>
<div><p>{{'{{'}}mySubTitle{{'{{'}}</p></div>
<div>
<ul>
<li>{{'{{'}}item1{{'{{'}}</li>
<li>{{'{{'}}item2{{'{{'}}</li>
<li>{{'{{'}}item3{{'{{'}}</li>
</ul>
</div>
</pre>
You need to escape { and } (for example like shown above)

How can I add a generic page header with site navigation to an asciidoc document?

I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.

How to load json data when changing between pages in jqtouch application?

My application is using JQTouch. The demos show how to GET an html file and display it in the user interface, but I'm loading JSON that I would like to use in a pre-existing DIV. I don't want to create a separate people.html and generate that on the server.
So I have a DIV like this that I would like to load my list of people into the UL.
<div id="people">
<div class="toolbar">
<h1>People</h1>
Back
</div>
<ul class="rounded">
<li class="sep">F</li>
<li>Flintstone, <em>Fred</em></li>
<li>Flintstone, <em>Pebble</em></li>
<li>Flintstone, <em>Wilma</em></li>
<li class="sep">J</li>
<li>Jetson, <em>Elroy</em></li>
<li>Jetson, <em>George</em></li>
<li>Jetson, <em>Jane</em></li>
<li>Jetson, <em>Judy</em></li>
</ul>
</div>
This page is loaded from the start of my application with code that looks like this (it's all in the same HTML page):
..snip..
<li class="arrow">View all</li>
..snip..
What do I need to do to call my people.aspx service which returns JSON? I think I need to use $.getJSON, create a UL from the JSON, and then call something in jqtouch to transition to my people application page (div).
I think you use the goTo function, e.g.
jQT.goTo("#people")
There's a jsfiddle demo here, but it doesn't test the jqTouch functionality.