{"id":15345,"date":"2018-06-13T18:23:30","date_gmt":"2018-06-13T17:23:30","guid":{"rendered":"https:\/\/www.kidstart.co.uk\/blog\/?p=15345"},"modified":"2019-11-22T14:31:45","modified_gmt":"2019-11-22T14:31:45","slug":"post-toolkit-documentation","status":"publish","type":"post","link":"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/","title":{"rendered":"post toolkit and documentation"},"content":{"rendered":"<p><!-- Inline stylesheet for repeating custom styles, instead of repetitive inlining. This should be the first thing to appear in the source code of the post.--><\/p>\n<p><style>\n  .article .custom-style--1 {<br \/>\n  background-color: #7dd0b6;<br \/>\n  }<br \/>\n  .article .custom-style--2 {<br \/>\n  color: #ff8c00;<br \/>\n  }<br \/>\n  .article .custom-style--3 {<br \/>\n  border-bottom: 1px solid #4169e1;<br \/>\n  }<br \/>\n  .article .custom-style--4 {<br \/>\n  color: #9595d2;<br \/>\n  }<br \/>\n  .article .custom--style--5 {<br \/>\n  color: #00a9e0;<br \/>\n  }<br \/>\n  \/*<br \/>\n  .article .custom--style--6 {<br \/>\n  }<br \/>\n  *\/<br \/>\n<\/style><\/p>\n\n<h2>Article subheader (h2)<\/h2>\n<p><span class=\"first-letter\">T<\/span>he wordpress theme contains some grid classes from the Bootstrap framework. These classes are available for creating articles too. See the <a href=\"\/\/getbootstrap.com\/docs\/3.3\/css\/#grid\" target=\"_blank\" rel=\"noopener noreferrer\">bootstrap documentation<\/a>.<\/p>\n\n<h2 class=\"centre\">Centred article subheader (h2)<\/h2>\n<p>Many classes available for styling articles are, by design, not available across the rest of the blog. I have done this to enable the use of more generic classnames which will make your lives easier, but which are themselves too generic to risk implementing globally.<\/p>\n<p class=\"larger\"><span class=\"first-letter\">T<\/span>his paragraph is a larger size. We misuse header tags to achieve larger font-sizes. We should use this instead.<\/p>\n\n<div class=\"divider divider--space--top divider--space--bottom divider--dotted\">&nbsp;<\/div>\n<p class=\"largest\"><span class=\"first-letter\">T<\/span>his paragraph is the largest size available. We misuse header tags to achieve larger font-sizes. We should use this instead.<\/p>\n\n<div class=\"divider divider--space--top divider--space--bottom divider--dotted\">&nbsp;<\/div>\n<div class=\"row\">\n<div class=\"col-md-6\">\n<div class=\"colour-block colour-block--overlap\">\n<p><span class=\"bold\">This column of text is 50% of the width of the article container.<\/span> This and the following paragraph are wrapped in a highlighted block.<\/p>\n<p class=\"spaced\">This is a paragraph featuring a <span class=\"highlight highlight--grey\">grey label<\/span>, and a <span class=\"highlight\">default red label<\/span>. The spacing class is added to the containing paragraph. I recommend doing this because of the height of the labels, unless the label is being used on a single line. A label&#8217;s background colour can be overriden with an <span class=\"highlight\" style=\"background-color: #ff0090;\">inline style<\/span>.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-md-6\">\n<p class=\"justify\"><span class=\"bold\">This column of text is 50% of the width of the article container.<\/span> The text in this paragraph is also jusitifed.<\/p>\n\n<div class=\"media-wrapper media-wrapper--border\"><img decoding=\"async\" class=\"img-responsive\" src=\"\/\/placehold.it\/600x300\" alt=\"Placeholder image\"><\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-6\">\n<h3>Article subheader (h3)<\/h3>\n<p><span class=\"bold\">This column of text is 50% of the width of the article container.<\/span> <span class=\"custom-style--2\">This text is coloured with a custom style. See the inline stylesheet in the source code<\/span>.<\/p>\n\n<div class=\"media-wrapper media-wrapper--caption media-wrapper--border\"><img decoding=\"async\" class=\"img-responsive\" src=\"\/\/placehold.it\/600x300\" alt=\"Placeholder image\">\n<p>&nbsp;<\/p>\n<p class=\"caption smallest\">Caption for above image<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"row\">\n<div class=\"col-xs-6\">\n<p><span class=\"first-letter\">T<\/span>his nested column is 50% even at mobile screensize.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-xs-6\">\n<p>This nested column is 50% even at mobile screensize.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-md-12\">\n<p><span class=\"italic\">Text can be italic<\/span>. <span class=\"italic\"><span class=\"bold\">Text can be bold and italic<\/span>. <\/span>Nested columns should be inside a row class.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-md-3\">\n<p><span class=\"bold\"><span class=\"first-letter red\">T<\/span>his column of text is 25% of the width of the article container. <\/span>\n<span class=\"custom--style--5\">It has slightly larger line-spacing than other paragraphs.<\/span><\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-md-3\">\n<p class=\"spaced\">This column of text is 25% of the width of the article container.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-md-6\">\n<div class=\"media-wrapper media-wrapper--border\">\n<div class=\"video\"><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/zUqzf4f4cZE\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<p><span class=\"first-letter\">L<\/span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n\n<div class=\"row\">\n<div class=\"col-md-6\">\n<div class=\"colour-block colour-block--rounded white custom-style--1\">\n<p>This is a highlighted block with no overlap, rounded corners, and a custom background colour from the inline stylesheet. Custom background colours can also be inlined<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-md-6\">\n<p class=\"smaller\"><span class=\"bold\">This paragraph of text is smaller.<\/span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n<p class=\"smallest\"><span class=\"bold\">This paragraph of text is the smallest.<\/span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div class=\"divider divider--space--small--top divider--space--bottom divider--solid\">&nbsp;<\/div>\n<div class=\"callout-block\">This block is useful for emphasising key points from an article. Border and text colour can be overriden with a class from the inline stylesheet, or an inline style.<\/div>\n<div class=\"divider divider--space--small--top divider--space--small--bottom divider--solid\">&nbsp;<\/div>\n<blockquote class=\"callout-block callout-block--quote\" style=\"border-left: 4px solid #ef3340;\">\n<div class=\"callout-block__quote\">\n<p style=\"color: #ef3340;\">This block is for including quotes in an article.\nAll colours can be overriden. Speech-mark is an SVG and can be coloured inline (see source).<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"callout-block__speech-mark__container\">\n\n\n\n<\/div><\/blockquote>\n<div class=\"divider divider--space--top divider--space--bottom\">&nbsp;<\/div>\n<h3>Buttons<\/h3>\n<p>Button size can be set with inline font-size. The button will scale automatically scale proportionally. Colours can be customised with inline styles. Wrap a button in a centre class to centre.<\/p>\n\n<div class=\"row\">\n<div class=\"col-md-3\"><a class=\"button\" style=\"font-size: 12px;\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Small button<\/a><\/div>\n<div class=\"col-md-3\"><a class=\"button\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Default button<\/a><\/div>\n<div class=\"col-md-3\"><a class=\"button\" style=\"color: #58595b; font-size: 20px; background-color: #fed141;\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Medium button<\/a><\/div>\n<div class=\"col-md-3\"><a class=\"button\" style=\"font-size: 25px;\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Large button<\/a><\/div>\n<\/div>\n<p><!--\n<div class=\"divider divider--space--top divider--space--bottom divider--dotted\"><\/div>\n-->\n<h4>Alignment<\/h4>\n<div class=\"row\">\n<div class=\"col-md-4\">\n<div class=\"colour-block colour-block--rounded\" style=\"background-color: #d1dde6;\">\n<p class=\"smaller white bold\">Buttons are left-aligned by default<\/p>\n<p><a class=\"button\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Default button<\/a><\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-md-4\">\n<div class=\"colour-block colour-block--rounded\" style=\"background-color: #c6d6e3;\">\n<p class=\"smaller white bold\">Buttons can be centre-aligned<\/p>\n\n<div class=\"centre\"><a class=\"button\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Default button<\/a><\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-md-4\">\n<div class=\"colour-block colour-block--rounded\" style=\"background-color: #9bb8d3;\">\n<p class=\"smaller white bold\">Buttons can be right-aligned<\/p>\n\n<div class=\"right\"><a class=\"button\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Default button<\/a><\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<h3>Dividers<\/h3>\n<p>Dividers can be used to create vertical space between content. By adding\/removing classes (see source) it is easy to select a dotted\/solid divider with no spacing, a divider with a large space either top or bottom (or both), or a divider with a small space either top or bottom (or both). <span class=\"bold\">Also see examples used through this document.<\/span> Inline background colours can be added for interesting effects. See the last example.<\/p>\n\n<div class=\"divider divider--solid\">&nbsp;<\/div>\n<div class=\"divider divider--space--small--top divider--space--small--bottom divider--space--bottom divider--solid\">&nbsp;<\/div>\n<div class=\"divider divider--space--top divider--space--bottom divider--solid\">&nbsp;<\/div>\n<div class=\"divider divider--space--top divider--space--bottom divider--dotted\">&nbsp;<\/div>\n<div class=\"divider divider--space--small--top divider--space--small--bottom divider--dotted\">&nbsp;<\/div>\n<div class=\"divider divider--dotted\" style=\"background-color: #7ba4db;\">&nbsp;<\/div>\n<h3>Lists<\/h3>\n<h4>Large<\/h4>\n<div class=\"row\">\n<div class=\"col-sm-4\">\n<div class=\"bullet\"><span class=\"bullet__point\">1<\/span>List point 1<\/div>\n<div class=\"bullet\"><span class=\"bullet__point\">2<\/span>List point 2<\/div>\n<div class=\"bullet\"><span class=\"bullet__point\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"bullet bullet--grey\"><span class=\"bullet__point\">1<\/span>List point 1<\/div>\n<div class=\"bullet bullet--grey\"><span class=\"bullet__point\">2<\/span>List point 2<\/div>\n<div class=\"bullet bullet--grey\"><span class=\"bullet__point\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #3cdbc0;\">1<\/span>List point 1<\/div>\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #8ce2d0;\">2<\/span>List point 2<\/div>\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #a7e6d7;\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<h4>Smaller<\/h4>\n<div class=\"row\">\n<div class=\"col-sm-4\">\n<div class=\"bullet bullet--smaller\"><span class=\"bullet__point\">1<\/span>List point 1<\/div>\n<div class=\"bullet bullet--smaller\"><span class=\"bullet__point\">2<\/span>List point 2<\/div>\n<div class=\"bullet bullet--smaller\"><span class=\"bullet__point\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"bullet bullet--smaller bullet--grey\"><span class=\"bullet__point\">1<\/span>List point 1<\/div>\n<div class=\"bullet bullet--smaller bullet--grey\"><span class=\"bullet__point\">2<\/span>List point 2<\/div>\n<div class=\"bullet bullet--smaller bullet--grey\"><span class=\"bullet__point\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"bullet bullet--smaller\"><span class=\"bullet__point\" style=\"background-color: #3cdbc0;\">1<\/span>List point 1<\/div>\n<div class=\"bullet bullet--smaller\"><span class=\"bullet__point\" style=\"background-color: #8ce2d0;\">2<\/span>List point 2<\/div>\n<div class=\"bullet bullet--smaller\"><span class=\"bullet__point\" style=\"background-color: #a7e6d7;\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<h4>Smallest<\/h4>\n<div class=\"row\">\n<div class=\"col-sm-4\">\n<div class=\"bullet bullet--smallest\"><span class=\"bullet__point\">1<\/span>List point 1<\/div>\n<div class=\"bullet bullet--smallest\"><span class=\"bullet__point\">2<\/span>List point 2<\/div>\n<div class=\"bullet bullet--smallest\"><span class=\"bullet__point\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"bullet bullet--smallest bullet--grey\"><span class=\"bullet__point\">1<\/span>List point 1<\/div>\n<div class=\"bullet bullet--smallest bullet--grey\"><span class=\"bullet__point\">2<\/span>List point 2<\/div>\n<div class=\"bullet bullet--smallest bullet--grey\"><span class=\"bullet__point\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"bullet bullet--smallest\"><span class=\"bullet__point\" style=\"background-color: #3cdbc0;\">1<\/span>List point 1<\/div>\n<div class=\"bullet bullet--smallest\"><span class=\"bullet__point\" style=\"background-color: #8ce2d0;\">2<\/span>List point 2<\/div>\n<div class=\"bullet bullet--smallest\"><span class=\"bullet__point\" style=\"background-color: #a7e6d7;\">3<\/span>List point 3<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<h4>Block<\/h4>\n<div class=\"row\">\n<div class=\"col-sm-4\">\n<div class=\"gap-wrap\">\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #f2c6cf;\">1<\/span>List point 1<\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducims qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"gap-wrap\">\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #f1bdc8;\">2<\/span>List point 2<\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"gap-wrap\">\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #e9a2b2;\">3<\/span>List point 3<\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-sm-4\">\n<div class=\"gap-wrap\">\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #dc8699;\">4<\/span>List point 4<\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducims qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"gap-wrap\">\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #8f3237;\">5<\/span>List point 5<\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<div class=\"col-sm-4\">\n<div class=\"gap-wrap\">\n<div class=\"bullet\"><span class=\"bullet__point\" style=\"background-color: #7f3035;\">6<\/span>List point 6<\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n<p>&nbsp;<\/p>\n\n<\/div>\n<p>&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div class=\"bullet__wrapper\">\n<div class=\"bullet\"><span class=\"bullet__point bullet__point--dark\" style=\"background-color: #f2f0a1;\">1<\/span><\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n\n<\/div>\n<div class=\"bullet__wrapper\">\n<div class=\"bullet\"><span class=\"bullet__point bullet__point--dark\" style=\"background-color: #fcaebb;\">2<\/span><\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n\n<\/div>\n<div class=\"bullet__wrapper\">\n<div class=\"bullet\"><span class=\"bullet__point bullet__point--dark\" style=\"background-color: #f1b2dc;\">3<\/span><\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n\n<\/div>\n<div class=\"bullet__wrapper\">\n<div class=\"bullet\"><span class=\"bullet__point bullet__point--dark\" style=\"background-color: #74d1ea;\">4<\/span><\/div>\n<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.<\/p>\n\n<\/div>\n<div class=\"divider divider--space--top divider--space--bottom divider--dotted\">&nbsp;<\/div>\n<h3>Inset block<\/h3>\n<div class=\"inset-block\">\n<p><span class=\"custom-style--2\">Any text wrapped in <span class=\"bold black\">&lt;p&gt;&lt;\/p&gt;<\/span> tags is inset and wraps around the callout-block if present.<\/span>\n<span class=\"bold\">Text is not inset on mobile, but it still wraps the callout-block.<\/span> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.<\/p>\n\n<div class=\"callout-block\"><span class=\"italic\">Text wraps around this callout-block when placed inside the inset-block.<\/span><\/div>\n<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.<\/p>\n<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.\nItaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<\/p>\n<p><img decoding=\"async\" src=\"\/\/placehold.it\/750x350\" alt=\"Placeholder image\"><\/p>\n<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.\nItaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<\/p>\n\n<\/div>\n<div class=\"divider divider--space--top divider--space--bottom divider--dotted\">&nbsp;<\/div>\n<div class=\"callout-block spaced\" style=\"border-left: 4px solid #bf2e1b;\">KidStart works with more than <span class=\"highlight\">1,600<\/span> retailers like <a href=\"..\/partner\/sainsburys.aspx\"><img decoding=\"async\" style=\"position: relative; bottom: 0; height: .875em;\" src=\"..\/wp-content\/uploads\/2018\/06\/sainsburys_logo.svg\" alt=\"Sainsbury's Logo\"><\/a>, <a href=\"..\/partner\/johnlewis.aspx\"><img decoding=\"async\" style=\"position: relative; bottom: 0; height: 1.125em;\" src=\"..\/wp-content\/uploads\/2018\/06\/john-lewis_logo.svg\" alt=\"John Lewis' logo\"><\/a>, <a href=\"..\/partner\/mothercare.aspx\"><img decoding=\"async\" style=\"position: relative; bottom: .063em; height: .875em;\" src=\"..\/wp-content\/uploads\/2018\/06\/mothecare_logo.svg\" alt=\"Mothercare's logo\"><\/a>, <a href=\"..\/partner\/ebay.aspx\"><img decoding=\"async\" style=\"position: relative; bottom: .063em; height: 1.125em;\" src=\"..\/wp-content\/uploads\/2018\/06\/ebay_logo.svg\" alt=\"eBay's logo\"><\/a>, <a href=\"..\/partner\/britishairways.aspx\"><img decoding=\"async\" style=\"position: relative; bottom: .313em; height: 1.125em;\" src=\"..\/wp-content\/uploads\/2018\/06\/british-airways_logo.svg\" alt=\"British Airway's logo\"><\/a>, <a href=\"..\/partner\/amazon.aspx\"><img decoding=\"async\" style=\"position: relative; bottom: -.063em; height: 1.063em;\" src=\"..\/wp-content\/uploads\/2018\/06\/amazoncouk_logo.svg\" alt=\"Amazon's Logo\"><\/a>\nand many more. You only need to access the retailer you want to shop at from the KidStart site, and then shop as normal. The retailers will then pay a percentage of your spending to KidStart as a thank-you for business, and KidStart top-up your kids&#8217; savings account. Learn more <a href=\"..\/..\/view\/NewReg.aspx?t=lwk\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/div>","protected":false},"excerpt":{"rendered":"Article subheader (h2) The wordpress theme contains some grid classes from the Bootstrap framework. These classes are available for creating articles too. See the bootstrap documentation. Centred article subheader (h2) Many classes available for styling articles are, by design, not available across the rest of the blog. I have done this to enable the use","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-15345","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>post toolkit and documentation - KidStart Magazine<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_GB\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"post toolkit and documentation - KidStart Magazine\" \/>\r\n<meta property=\"og:description\" content=\"Article subheader (h2) The wordpress theme contains some grid classes from the Bootstrap framework. These classes are available for creating articles too. See the bootstrap documentation. Centred article subheader (h2) Many classes available for styling articles are, by design, not available across the rest of the blog. I have done this to enable the use\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/\" \/>\r\n<meta property=\"og:site_name\" content=\"KidStart Magazine\" \/>\r\n<meta property=\"article:published_time\" content=\"2018-06-13T17:23:30+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2019-11-22T14:31:45+00:00\" \/>\r\n<meta name=\"author\" content=\"kidstart\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kidstart\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/\",\"url\":\"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/\",\"name\":\"post toolkit and documentation - KidStart Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.kidstart.co.uk\/blog\/#website\"},\"datePublished\":\"2018-06-13T17:23:30+00:00\",\"dateModified\":\"2019-11-22T14:31:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.kidstart.co.uk\/blog\/#\/schema\/person\/267e9f8801debde95625022b91522cd0\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kidstart.co.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"post toolkit and documentation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kidstart.co.uk\/blog\/#website\",\"url\":\"https:\/\/www.kidstart.co.uk\/blog\/\",\"name\":\"KidStart Magazine\",\"description\":\"KidStart - a little help along the way\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kidstart.co.uk\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kidstart.co.uk\/blog\/#\/schema\/person\/267e9f8801debde95625022b91522cd0\",\"name\":\"kidstart\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.kidstart.co.uk\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d6cd4b0a1634c423d91f5963b78ad92a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d6cd4b0a1634c423d91f5963b78ad92a?s=96&d=mm&r=g\",\"caption\":\"kidstart\"},\"description\":\"KidStart is a free shopping club for parents, grandparents, family and friends. Once registered, a percentage of what you spend online at thousands of well-known retailers including John Lewis, Ebay, Amazon, Mothercare, Sainsbury's etc. will be collected and transferred into your child's or children's savings account. Find out more &gt;\",\"sameAs\":[\"https:\/\/www.kidstart.co.uk?t=lwk\"],\"url\":\"https:\/\/www.kidstart.co.uk\/blog\/author\/kidstart\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"post toolkit and documentation - KidStart Magazine","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/","og_locale":"en_GB","og_type":"article","og_title":"post toolkit and documentation - KidStart Magazine","og_description":"Article subheader (h2) The wordpress theme contains some grid classes from the Bootstrap framework. These classes are available for creating articles too. See the bootstrap documentation. Centred article subheader (h2) Many classes available for styling articles are, by design, not available across the rest of the blog. I have done this to enable the use","og_url":"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/","og_site_name":"KidStart Magazine","article_published_time":"2018-06-13T17:23:30+00:00","article_modified_time":"2019-11-22T14:31:45+00:00","author":"kidstart","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kidstart","Estimated reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/","url":"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/","name":"post toolkit and documentation - KidStart Magazine","isPartOf":{"@id":"https:\/\/www.kidstart.co.uk\/blog\/#website"},"datePublished":"2018-06-13T17:23:30+00:00","dateModified":"2019-11-22T14:31:45+00:00","author":{"@id":"https:\/\/www.kidstart.co.uk\/blog\/#\/schema\/person\/267e9f8801debde95625022b91522cd0"},"breadcrumb":{"@id":"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kidstart.co.uk\/blog\/post-toolkit-documentation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kidstart.co.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"post toolkit and documentation"}]},{"@type":"WebSite","@id":"https:\/\/www.kidstart.co.uk\/blog\/#website","url":"https:\/\/www.kidstart.co.uk\/blog\/","name":"KidStart Magazine","description":"KidStart - a little help along the way","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kidstart.co.uk\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.kidstart.co.uk\/blog\/#\/schema\/person\/267e9f8801debde95625022b91522cd0","name":"kidstart","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.kidstart.co.uk\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d6cd4b0a1634c423d91f5963b78ad92a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d6cd4b0a1634c423d91f5963b78ad92a?s=96&d=mm&r=g","caption":"kidstart"},"description":"KidStart is a free shopping club for parents, grandparents, family and friends. Once registered, a percentage of what you spend online at thousands of well-known retailers including John Lewis, Ebay, Amazon, Mothercare, Sainsbury's etc. will be collected and transferred into your child's or children's savings account. Find out more &gt;","sameAs":["https:\/\/www.kidstart.co.uk?t=lwk"],"url":"https:\/\/www.kidstart.co.uk\/blog\/author\/kidstart\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/posts\/15345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=15345"}],"version-history":[{"count":10,"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/posts\/15345\/revisions"}],"predecessor-version":[{"id":16466,"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/posts\/15345\/revisions\/16466"}],"wp:attachment":[{"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=15345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=15345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kidstart.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=15345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}