{"id":7,"date":"2014-11-24T17:27:01","date_gmt":"2014-11-24T17:27:01","guid":{"rendered":"http:\/\/localhost:8888\/mongay\/?page_id=4"},"modified":"2014-11-24T17:27:01","modified_gmt":"2014-11-24T17:27:01","slug":"guia-estil","status":"publish","type":"page","link":"https:\/\/mongaycostabella.com\/ca\/guia-estil\/","title":{"rendered":"Guia d&#8217;estil"},"content":{"rendered":"<h2>colors<\/h2>\n<div class=\"col colors\">\n<div class=\"col col-1-3 color-1\"><\/div>\n<div class=\"col col-1-3 color-2\"><\/div>\n<div class=\"col col-1-3 color-3\"><\/div>\n<\/div>\n<\/div>\n<h2>Images<\/h2>\n<div id=\"attachment_28\" class=\"wp-caption alignnone\" ><a href=\"#\"><img src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_large.png\" alt=\"Your Alt Tag\" title=\"bmxisbest\" height=\"300\" class=\"size-large wp-image-28\"><\/a><\/p>\n<p class=\"wp-caption-text\">This is the optional caption.<\/p>\n<\/div>\n<p>The next issue we face is image alignment, users get the option of <em>None<\/em>, <em>Left<\/em>, <em>Right<\/em> &amp; <em>Center<\/em>. On top of this, they also get the options of <em>Thumbnail<\/em>, <em>Medium<\/em>, <em>Large<\/em> &amp; <em>Fullsize<\/em>. You&#8217;ll probably want to add floats to style the image position so important to remember to clear these to stop images popping below the bottom of your articles.<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_medium.png\" alt=\"Your Alt Title\" title=\"Your Title\" width=\"300\" height=\"200\" class=\"alignright size-medium wp-image-28\"><br \/>\n<img loading=\"lazy\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" title=\"Your Title\" width=\"150\" height=\"150\" class=\"alignleft size-thumbnail wp-image-28\"><br \/>\n<img loading=\"lazy\" class=\"aligncenter size-medium wp-image-28\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_medium.png\" alt=\"Your Alt Title\" width=\"300\" height=\"200\"><br \/>\n<img loading=\"lazy\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_full.png\" alt=\"Your Alt Title\" title=\"Your Title\" width=\"840\" height=\"300\" class=\"alignnone size-full wp-image-28\"><\/p>\n<p>Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.<img loading=\"lazy\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_medium.png\" alt=\"Your Alt Title\" title=\"Your Title\" width=\"300\" height=\"200\" class=\"alignright size-medium wp-image-28\"><br \/>\nVivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.<img loading=\"lazy\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" title=\"Your Title\" width=\"150\" height=\"150\" class=\"alignleft size-thumbnail wp-image-28\">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.<img loading=\"lazy\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" title=\"Your Title\" width=\"150\" height=\"150\" class=\"aligncenter size-thumbnail wp-image-28\">Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.<\/p>\n<p>And then&#8230; Finally, users can insert a WordPress , which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn&#8217;t actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we&#8217;ll work with that for our example with an added fouth image to test verticle spacing.<\/p>\n<style type=\"text\/css\">#gallery-1{margin:auto;}#gallery-1 .gallery-item{float:left;margin-top:10px;text-align:center;width:33{cceefe7045f0343cc9fb29ea9ab29312ab037896831de375fe2d0e4fac87f339};}#gallery-1 img{border:2px solid #cfcfcf;}#gallery-1 .gallery-caption{margin-left:0;}<\/style>\n<div id=\"gallery-1\" class=\"gallery galleryid-1 gallery-columns-3 gallery-size-thumbnail\">\n<dl class=\"gallery-item\">\n<dt class=\"gallery-icon\">\n<a href=\"#\" title=\"Your Title\"><img loading=\"lazy\" width=\"150\" height=\"150\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" class=\"attachment-thumbnail\" alt=\"Your Alt Title\" title=\"Your Title\"><\/a>\n<\/dt>\n<\/dl>\n<dl class=\"gallery-item\">\n<dt class=\"gallery-icon\">\n<a href=\"#\" title=\"Your Title\"><img loading=\"lazy\" width=\"150\" height=\"150\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" class=\"attachment-thumbnail\" alt=\"Your Alt Title\" title=\"Your Title\"><\/a>\n<\/dt>\n<\/dl>\n<dl class=\"gallery-item\">\n<dt class=\"gallery-icon\">\n<a href=\"#\" title=\"Your Title\"><img loading=\"lazy\" width=\"150\" height=\"150\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" class=\"attachment-thumbnail\" alt=\"Your Alt Title\" title=\"Your Title\"><\/a>\n<\/dt>\n<\/dl>\n<p><br style=\"clear: both\"><\/p>\n<dl class=\"gallery-item\">\n<dt class=\"gallery-icon\">\n<a href=\"#\" title=\"Your Title\"><img loading=\"lazy\" width=\"150\" height=\"150\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" class=\"attachment-thumbnail\" alt=\"Your Alt Title\" title=\"Your Title\"><\/a>\n<\/dt>\n<\/dl>\n<p><br style=\"clear: both;\">\n<\/div>\n<h2>Table<\/h2>\n<table>\n<thead>\n<tr>\n<th>Table Head Column One<\/th>\n<th>Table Head Column Two<\/th>\n<th>Table Head Column Three<\/th>\n<\/tr>\n<\/thead>\n<tfoot>\n<tr>\n<td>Table Footer Column One<\/td>\n<td>Table Footer Column Two<\/td>\n<td>Table Footer Column Three<\/td>\n<\/tr>\n<\/tfoot>\n<tbody>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Short Text<\/td>\n<td>Testing a table cell with a longer amount of text to see what happens, you&#8217;re not using tables for site layouts are you?<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Lists<\/h2>\n<ol>\n<li>Ordered list item one.<\/li>\n<li>Ordered list item two.<\/li>\n<li>Ordered list item three.<\/li>\n<li>Ordered list item four.<\/li>\n<li>By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ol>\n<ul>\n<li>Unordered list item one.<\/li>\n<li>Unordered list item two.<\/li>\n<li>Unordered list item three.<\/li>\n<li>Unordered list item four.<\/li>\n<li>By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ul>\n<h2>Blockcuote<\/h2>\n<blockquote><p>\nCurrently WordPress blockquotes are just wrapped in blockquote tags and have no clear way for the user to define a source. Maybe one day they&#8217;ll be more semantic (and easier to style) like the version below.\n<\/p><\/blockquote>\n<blockquote cite=\"http:\/\/html5doctor.com\/blockquote-q-cite\/\">\n<p>HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quote.<\/p>\n<footer>\n<cite><br \/>\n<a href=\"http:\/\/html5doctor.com\/blockquote-q-cite\/\">Oli Studholme, HTML5doctor.com<\/a><br \/>\n<\/cite><br \/>\n<\/footer>\n<\/blockquote>\n<h2>Headings<\/h2>\n<h1>Level One Heading<\/h1>\n<h2 class=\"h2\">Level Two Heading<\/h2>\n<h3>Level Three Heading<\/h3>\n<h4>Level Four Heading<\/h4>\n<h5>Level Five Heading<\/h5>\n<h6>Level Six Heading<\/h6>\n<h2>HR<\/h2>\n<hr>\n<h2>Paragraph<\/h2>\n<p>This is a standard paragraph created using the WordPress TinyMCE text editor. It has a <strong>strong tag<\/strong>, an <em>em tag<\/em> and a <del>strikethrough<\/del> which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include <cite>citations<\/cite>, <abbr title=\"abbreviation\">abbr<\/abbr>, bits of <code>code<\/code> and <var>variables<\/var>, <q>inline quotations<\/q>, <ins datetime=\"2011-12-08T20:19:53+00:00\">inserted text<\/ins>, text that is <s>no longer accurate<\/s> or something <mark>so important<\/mark> you might want to mark it. We can also style subscript and superscript characters like C0<sub>2<\/sub>, here is our 2<sup>nd<\/sup> example. If they are feeling non-semantic they might even use <b>bold<\/b>, <i>italic<\/i>, <big>big<\/big> or <small>small<\/small> elements too.&nbsp;Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this <a title=\"HTML5 Semantics\" href=\"http:\/\/csswizardry.com\/2011\/01\/html5-and-text-level-semantics\">article by Harry Roberts<\/a> which gives a nice excuse to test a link.&nbsp;&nbsp;It is also worth noting in the \u00abkitchen sink\u00bb view you can also add <span style=\"text-decoration: underline;\">underline<\/span>&nbsp;styling and set <span style=\"color: #ff0000;\">text color<\/span> with pesky inline CSS.<\/p>\n<p style=\"text-align: left;\">Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph.&nbsp;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"text-align: right;\">This is a right aligned paragraph.&nbsp;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"text-align: justify;\">This is a justified paragraph.&nbsp;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"padding-left: 30px;\">Finally, you also have the option of an indented paragraph.&nbsp;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p>And last, and by no means least, users can also apply the <code>Address<\/code> tag to text like this:<\/p>\n<address>123 Example Street,<br \/>\nTestville,<br \/>\nWest Madeupsburg,<br \/>\nCSSland,<br \/>\n1234<\/address>\n<p>&#8230;so there you have it, all our text elements<\/p>\n<h2>Forms<\/h2>\n<fieldset>\n<div class=\"field-container\"> <label for=\"text\">Text Input <abbr title=\"Required\">*<\/abbr><\/label> <input id=\"text\" type=\"text\" placeholder=\"Text Input\"> <\/div>\n<div class=\"field-container\"> <label for=\"password\">Password<\/label> <input id=\"password\" type=\"password\" placeholder=\"Type your Password\"> <\/div>\n<div class=\"field-container\"> <label for=\"webaddress\">Web Address<\/label> <input id=\"webaddress\" type=\"url\" placeholder=\"http:\/\/yoursite.com\"> <\/div>\n<div class=\"field-container\"> <label for=\"emailaddress\">Email Address<\/label> <input id=\"emailaddress\" type=\"email\" placeholder=\"name@email.com\"> <\/div>\n<div class=\"field-container\"> <label for=\"search\">Search<\/label> <input id=\"search\" type=\"search\" placeholder=\"Enter Search Term\"> <\/div>\n<div class=\"field-container\"> <label for=\"text\">Number Input <abbr title=\"Required\">*<\/abbr><\/label> <input id=\"text\" type=\"number\" placeholder=\"Enter a Number\" pattern=\"[0-9]*\"> <\/div>\n<div class=\"field-container\"> <label for=\"textarea\">Textarea<\/label> <textarea id=\"textarea\" rows=\"8\" cols=\"48\" placeholder=\"Enter your message here\"><\/textarea> <\/div>\n<div class=\"field-container\"> <label class=\"error\">Error Input<\/label> <input class=\"is-error\" type=\"text\" placeholder=\"Text Input\"> <\/div>\n<div class=\"field-container\"> <label class=\"valid\">Valid<\/label> <input class=\"is-valid\" type=\"text\" placeholder=\"Text Input\"> <\/div>\n<\/fieldset>\n<fieldset>\n<div class=\"field-container\"> <label for=\"select\">Select<\/label> <select id=\"select\"> <optgroup label=\"Option Group\"><option>Option One<\/option><option>Option Two<\/option><option>Option Three<\/option><\/optgroup> <\/select> <\/div>\n<\/fieldset>\n<form action=\"#\" data-trp-original-action=\"#\">\n<fieldset class=\"options\">\n<legend>Checkbox <abbr title=\"Required\">*<\/abbr><\/legend>\n<ul>\n<li><label for=\"checkbox1\"><input id=\"checkbox1\" name=\"checkbox\" type=\"checkbox\" checked=\"checked\"> Choice A<\/label><\/li>\n<li><label for=\"checkbox2\"><input id=\"checkbox2\" name=\"checkbox\" type=\"checkbox\"> Choice B<\/label><\/li>\n<li><label for=\"checkbox3\"><input id=\"checkbox3\" name=\"checkbox\" type=\"checkbox\"> Choice C<\/label><\/li>\n<\/ul>\n<\/fieldset><input type=\"hidden\" name=\"trp-form-language\" value=\"ca\"\/><\/form>\n<form action=\"#\" data-trp-original-action=\"#\">\n<fieldset class=\"options\">\n<legend>Radio<\/legend>\n<ul>\n<li><label for=\"radio1\"><input id=\"radio1\" name=\"radio\" type=\"radio\" class=\"radio\" checked=\"checked\"> Option 1<\/label><\/li>\n<li><label for=\"radio2\"><input id=\"radio2\" name=\"radio\" type=\"radio\" class=\"radio\"> Option 2<\/label><\/li>\n<li><label for=\"radio3\"><input id=\"radio3\" name=\"radio\" type=\"radio\" class=\"radio\"> Option 3<\/label><\/li>\n<\/ul>\n<\/fieldset><input type=\"hidden\" name=\"trp-form-language\" value=\"ca\"\/><\/form>\n<fieldset>\n<div class=\"field-container\"><label for=\"ic\">Color input<\/label> <input type=\"color\" id=\"ic\" value=\"#000000\"><\/div>\n<div class=\"field-container\"><label for=\"in\">Number input<\/label> <input type=\"number\" id=\"in\" min=\"0\" max=\"10\" value=\"5\"><\/div>\n<div class=\"field-container\"><label for=\"ir\">Range input<\/label> <input type=\"range\" id=\"ir\" value=\"10\"><\/div>\n<div class=\"field-container\"><label for=\"idd\">Date input<\/label> <input type=\"date\" id=\"idd\" value=\"1970-01-01\"><\/div>\n<div class=\"field-container\"><label for=\"idm\">Month input<\/label> <input type=\"month\" id=\"idm\" value=\"1970-01\"><\/div>\n<div class=\"field-container\"><label for=\"idw\">Week input<\/label> <input type=\"week\" id=\"idw\" value=\"1970-W01\"><\/div>\n<div class=\"field-container\"><label for=\"idt\">Datetime input<\/label> <input type=\"datetime\" id=\"idt\" value=\"1970-01-01T00:00:00Z\"><\/div>\n<div class=\"field-container\"><label for=\"idtl\">Datetime-local input<\/label> <input type=\"datetime-local\" id=\"idtl\" value=\"1970-01-01T00:00\"><\/div>\n<\/fieldset>\n<h2>Button<\/h2>\n<p><button class=\"btn-primary\">Primary Button <\/button><br \/>\n<button class=\"btn-secondary\">secondary Button <\/button><br \/>\n<button class=\"btn-tertiary\">Terciary Button <\/button><\/p>\n<h2>Grid<\/h2>\n<div class=\"col col__style-guide\">\n<div class=\"col col-1-2\"><\/div>\n<div class=\"col col-1-2\"><\/div>\n<\/div>\n<div class=\"col col__style-guide\">\n<div class=\"col col-1-3\"><\/div>\n<div class=\"col col-1-3\"><\/div>\n<div class=\"col col-1-3\"><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>colors Images This is the optional caption. The next issue we face is image alignment, users get the option of None, Left, Right &amp; Center. On top of this, they also get the options of Thumbnail, Medium, Large &amp; Fullsize. You&#8217;ll probably want to add floats to style the image position so important to remember [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"guia-estil.php","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/mongaycostabella.com\/ca\/wp-json\/wp\/v2\/pages\/7"}],"collection":[{"href":"https:\/\/mongaycostabella.com\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mongaycostabella.com\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mongaycostabella.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mongaycostabella.com\/ca\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":0,"href":"https:\/\/mongaycostabella.com\/ca\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"wp:attachment":[{"href":"https:\/\/mongaycostabella.com\/ca\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}