[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-573457-105":53,"doc-detail-573457-en":126},{"code":4,"msg":5,"data":6},0,"success",[7,14,19,24,29,34,39,44,49],{"id":8,"doc_module":9,"doc_module_name":10,"category_name":11,"show_sort_weight":12,"slug":13},11,1,"Template","Presentations",90,"presentations",{"id":15,"doc_module":9,"doc_module_name":10,"category_name":16,"show_sort_weight":17,"slug":18},12,"Resumes",80,"resumes",{"id":20,"doc_module":9,"doc_module_name":10,"category_name":21,"show_sort_weight":22,"slug":23},14,"Invoices",70,"invoices",{"id":25,"doc_module":9,"doc_module_name":10,"category_name":26,"show_sort_weight":27,"slug":28},15,"Posters",60,"posters",{"id":30,"doc_module":9,"doc_module_name":10,"category_name":31,"show_sort_weight":32,"slug":33},16,"Social Media",50,"social-media",{"id":35,"doc_module":9,"doc_module_name":10,"category_name":36,"show_sort_weight":37,"slug":38},17,"Forms",40,"forms",{"id":40,"doc_module":9,"doc_module_name":10,"category_name":41,"show_sort_weight":42,"slug":43},18,"Letters",30,"letters",{"id":45,"doc_module":9,"doc_module_name":10,"category_name":46,"show_sort_weight":47,"slug":48},21,"Paper Templates",5,"papers-templates",{"id":50,"doc_module":9,"doc_module_name":10,"category_name":51,"show_sort_weight":4,"slug":52},158,"General","general-158",{"code":4,"msg":54,"data":55},"ok",{"site_id":56,"language":57,"slug":58,"title":59,"keywords":60,"description":61,"schema_data":62,"social_meta":119,"head_meta":121,"extra_data":123,"updated_unix":125},105,"en","blueprint-css-version-071-css-layout-and-style-cheat-sheet","Blueprint CSS - Version 0.7.1 - CSS layout and style cheat sheet","","Blueprint CSS v0.7.1 provides a column-based grid system and supporting utilities for layout. It defines span, append, prepend, push, and pull classes to control element widths and movement across columns, including guidance for using the last column to prevent wrapping. It also documents typography defaults, color and font settings, grid size calculations, common grid and typography helper classes, and basic RESET and FORMS styles with example selectors.",{"@graph":63,"@context":118},[64,80,101],{"@type":65,"itemListElement":66},"BreadcrumbList",[67,71,74,77],{"item":68,"name":69,"@type":70,"position":9},"https://docshare.wps.com","Home","ListItem",{"item":72,"name":10,"@type":70,"position":73},"https://docshare.wps.com/template/",2,{"item":75,"name":11,"@type":70,"position":76},"https://docshare.wps.com/template/presentations/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/blueprint-css-version-071-css-layout-and-style-cheat-sheet/573457/",4,{"url":78,"name":59,"@type":81,"image":82,"author":87,"headline":59,"publisher":90,"fileFormat":93,"inLanguage":57,"description":61,"dateModified":94,"datePublished":95,"encodingFormat":93,"isAccessibleForFree":96,"interactionStatistic":97},"DigitalDocument",{"url":83,"@type":84,"width":85,"height":86},"https://docshare.wps.com/thumbnails/blueprint-css-version-071-css-layout-and-style-cheat-sheet/573457.png","ImageObject",442,249,{"name":88,"@type":89},"EvelynWrites","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-15","2026-10-14",true,{"@type":98,"interactionType":99,"userInteractionCount":73},"InteractionCounter",{"@type":100},"ViewAction",{"@type":102,"mainEntity":103},"FAQPage",[104,110,114],{"name":105,"@type":106,"acceptedAnswer":107},"How do span classes work in Blueprint CSS?","Question",{"text":108,"@type":109},"Use span-x to set a column width, where x ranges from 1 to 24. Apply it to a div (or the intended column container) to control the grid span.","Answer",{"name":111,"@type":106,"acceptedAnswer":112},"What are append and prepend classes used for?",{"text":113,"@type":109},"Append-x adds empty columns after a column, while prepend-x adds empty columns before it. They help extend spacing without additional markup.",{"name":115,"@type":106,"acceptedAnswer":116},"How do push and pull classes affect elements?",{"text":117,"@type":109},"Use push-0 to push an element into the next column, and pull-x to pull it into the previous column. These classes adjust horizontal placement within the grid.","https://schema.org",{"og:url":78,"og:type":120,"og:title":59,"og:site_name":91,"og:description":61},"article",{"robots":122,"canonical":78},"index,follow",{"doc_id":124,"site_id":56},573457,1792023035,{"code":4,"msg":5,"data":127},{"doc_id":124,"user_id":128,"nickname":88,"user_avatar":129,"doc_module":9,"category_id":8,"category_name":11,"doc_title":59,"doc_description":61,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":73,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":9,"language":135,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":136,"faqs":137,"seo_title":138,"seo_description":61,"update_tm":139,"read_time":4},687212989558,"https://ap-avatar.wpscdn.com/davatar_a8503ba1806abce46bf441b54a3ca4cd","| \u003Cbr>SPAN CLASSES\u003Cbr>Use these classes to set the width of a column\u003Cbr>span-1 span-13 |\n| --- |\n| span-2 span-14 |\n| span-3 span-15 |\n| span-4 span-16 |\n| span-5 span-17 |\n| span-6 span-18 |\n| span-7 span-19 |\n| span-8 span-20 |\n| span-9 span-21 |\n| span-10 span-22 |\n| span-11 span-23 |\n| span-12 span-24 |\n\n\n| \u003Cbr>APPEND CLASSES\u003Cbr>Add these to a column to append empty columns.\u003Cbr>append-1 append-13 |\n| --- |\n| append-2 append-14 |\n| append-3 append-15 |\n| append-4 append-16 |\n| append-5 append-17 |\n| append-6 append-18 |\n| append-7 append-19 |\n| append-8 append-20 |\n| append-9 append-21 |\n| append-10 append-22 |\n| append-11 append-23 |\n| append-12 |\n\n\n| \u003Cbr>PREPEND CLASSES\u003Cbr>Add these to a column toprepend empty columns.\u003Cbr>prepend-1 prepend-13 |\n| --- |\n| prepend-2 prepend-14 |\n| prepend-3 prepend-15 |\n| prepend-4 prepend-16 |\n| prepend-5 prepend-17 |\n| prepend-6 prepend-18 |\n| prepend-7 prepend-19 |\n| prepend-8 prepend-20 |\n| prepend-9 prepend-21 |\n| prepend-10 prepend-22 |\n| prepend-11 prepend-23 |\n| prepend-12 |\n\nPUSH/PULL CLASSES  \nUse these classes on an element to push it into the next column, or pull it into the previous column.  \npush-0  \n\n| push-1 | pull-1 |\n| --- | --- |\n| push-2 | pull-2 |\n| push-3 | pull-3 |\n| push-4 | pull-4 |\n| push-5 | pull-5 |\n\nBlueprint CSS version 0.7.1 ([http://code.google.com/p/blueprintcss/](http://code.google.com/p/blueprintcss/))  \nv.0.7.1  \nCopyright © 2007-2008 Olav Bjorkoy ([http://bjorkoy.com](http://bjorkoy.com))  \nCheat sheet v.1.1 by Gareth J M Saunders, based on Help Sheet v.0.3 by Alejandro Vasquez  \n\n| STYLESHEET LINK |\n| --- |\n| Download the latest version from [http://code.google.com/p/blueprintcss/ and](http://code.google.com/p/blueprintcss/ and) add these lines into the \u003Chead> of your page. Check that your href path is correct.\u003Cbr>\u003Clink rel=\"stylesheet \" href=\"blueprint/screen .css \" type=\"text/css \"media=\"screen, projection\">\u003Cbr>\u003Clink rel=\"stylesheet \" href=\"blueprint/print .css \" type=\"text/css \"media=\"print\">\u003Cbr>\u003C!- - [if IE]>\u003Cbr>\u003Clink rel=\"stylesheet \" href=\"blueprint/ie .css \" type=\"text/css \"media=\"screen, projection\">\u003Cbr>\u003C![endif]--> |\n\nUSAGE  \n\u003Cbody>\u003Cdiv class=“container”>  \n\u003Cdiv class=“span-15”>  \n\u003Cp>Column 1\u003C/p>\u003C/div>\u003Cdiv class=“span-6 last”>  \n\u003Cp>Column 2\u003C/p>\u003C/div>  \n\u003C/div>  \n\u003C/body>  \ndiv.span-x now implies a column. Remember to use “last” for the last column of the row to avoid it jumping to the next row. Columns can be nested inside one another.  \nTYPOGRAPHY  \ntypographic. css sets up some sensible default typography. The font-size percentage is of 16px (0 .75 * 16px = 12 px) . Line-heights and vertical margins are automatically calculated from this inems.  \nThe base line-height is 18px (1 .5ems) . This means that every element, from line-heights to images have a height that is a multiple of 18 (or 1.5 if you use ems) .  \nColor is \\#222 (dark grey); font-family is“Helvetica Neue”, “Helvetica”, “Arial”, sans-serif; Also defines tables, lists and misc. classes.  \n\n| GRID |\n| --- |\n| If you need more or fewer columns use this formula to find the new total width:\u003Cbr>total width = (columns *40) - 10\u003Cbr>~~ ~~ 950px (24 columns) ~~ ~~ |\n| |\n| 750px (19 columns) 790px (20 columns) 830px (21 columns) 870px (22 columns) 910px (23 columns) |\n\n\n| GRID CLASSES\u003Cbr>\u003Cbr>.container | \u003Cbr>A container should group all your columns; use on \u003Cdiv> . |\n| --- | --- |\n| .showgrid | Use this on any div.span / container to see the grid. |\n| .border | Shows a border on the right hand side of a column; use on \u003Cdiv> . |\n| .colborder | Shows a border with more whitespace, spans one column; use on \u003Cdiv> . |\n| .box | Creates a padded box inside a column. (padding: 1.5em; margin-bottom: 1.5em;) . |\n| [hr.space](hr.space) | Use this to create a horizontal ruler across a column; can also simply use \u003Chr /> . |\n| .clear | Regular clearing, apply to column that should drop below previous ones. |\n| .clearfix | Clearing floats without extra markup. |\n| div.last | The last column in a row needs th","cbCaiuMZbLDtN7t1","https://ap.wps.com/l/cbCaiuMZbLDtN7t1","pdf",36617,"English","# Span and column width classes\n## Append and prepend classes\n# Push and pull classes\n# Stylesheet link and version notes\n# Usage and grid principles\n# Typography defaults\n# Grid sizing formula and grid classes\n# Reset and typography helper classes\n# Forms styles","[{\"question\":\"How do span classes work in Blueprint CSS?\",\"answer\":\"Use span-x to set a column width, where x ranges from 1 to 24. Apply it to a div (or the intended column container) to control the grid span.\"},{\"question\":\"What are append and prepend classes used for?\",\"answer\":\"Append-x adds empty columns after a column, while prepend-x adds empty columns before it. They help extend spacing without additional markup.\"},{\"question\":\"How do push and pull classes affect elements?\",\"answer\":\"Use push-0 to push an element into the next column, and pull-x to pull it into the previous column. These classes adjust horizontal placement within the grid.\"}]","Blueprint CSS - Version 0.7.1 - CSS layout and style cheat sheet | PDF",1791940073]