{"id":1624,"date":"2022-01-20T16:45:49","date_gmt":"2022-01-20T16:45:49","guid":{"rendered":"https:\/\/shuffle.dev\/blog\/?p=1624"},"modified":"2022-01-23T08:33:44","modified_gmt":"2022-01-23T08:33:44","slug":"plain-ui-simple-template-for-tailwind-bootstrap-and-bulma","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/","title":{"rendered":"Plain UI – Simple template for Tailwind, Bootstrap and Bulma"},"content":{"rendered":"\n

Start your project with a simple template that allows you to find your own style. Use our Plain UI and build a page layout that is easy to customize with details.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A simple template means more time for styling<\/h2>\n\n\n\n

We created Plain UI as a foundation that does not impose a style and is a comfortable starting point. Minimalist design does not dictate the character of the website, but allows you to choose for yourself which information to show and where to emphasize<\/strong>.<\/p>\n\n\n\n

You will find here the right elements to build the page layout using the Tailwind drag and drop editor<\/a>. Each of them you can conveniently edit later and adjust to your needs. You can use low-code tools in the editor, edit the code under the components, or export the whole thing and work on it in your favorite environment.<\/p>\n\n\n\n

How to build a simple template with Plain UI?<\/h2>\n\n\n\n

In the Plain UI set there are over 130 ready-made components<\/strong>. They are divided into the different types of content they contain. This makes it easy to build a page outline by interweaving different types of components with each other. Simply select the right category and drag the component of your choice onto the canvas.<\/p>\n\n\n\n

\"simple
Drag and drop components into the canvas using our left menu<\/figcaption><\/figure>\n\n\n\n

Each of them has 8 color variations. Of course, you can easily change these colors using the class editor in the right menu<\/strong>. This way you can give the components their own character. You can save the changed component so that you can use it later in this or other projects.<\/p>\n\n\n\n

Try it now in our demo editor. There is no need to register, just click nad play.<\/strong><\/a><\/p>\n\n\n\n

\"CSS
Right menu allows you to change classes on elements inside a component. You can change text and images, but also add new classes, edit custom classes or edit component in custom code.<\/figcaption><\/figure>\n\n\n\n

Of course, you can also change all graphics and texts<\/strong>.<\/p>\n\n\n\n

After a while working with the editor you will quickly get the first working version of the page. You can show the modified project to your coworkers and clients by clicking “Preview in new tab”. This way you can quickly collect all comments and move on with the project<\/strong>.<\/p>\n\n\n\n

Before showing your coworkers, it’s a good idea to review how the built website performs on phones.<\/p>\n\n\n\n

\"Checking
Checking responsiveness of components in Tailwind Editor.<\/figcaption><\/figure><\/div>\n\n\n\n

Keep it DRY with our low code editor<\/h2>\n\n\n\n

DRY – or “Don’t repeat yourself”<\/a> is a programming principle that is generally hard to disagree with. After all, who likes to do the same work all the time?<\/p>\n\n\n\n

In Shuffle we go against this approach. Using ready-made UI libraries, you don’t have to build entire sections from scratch. You can choose options that fit right away and get on with refining them.<\/p>\n\n\n\n

By saving classes and components, you can quickly build an entire page. This way, you can use the time you save to work in code where it will bring real profit<\/strong> and allow you to make something unique.<\/p>\n\n\n\n

You can easily edit each component by clicking the custom HTML button.<\/p>\n\n\n\n

\"Custom
Code editor inside Tailwind Editor<\/figcaption><\/figure>\n\n\n\n

Plan UI is also available in Bootstrap and Bulma<\/h2>\n\n\n\n

You can use a set of simple components in other frameworks as well. Use the Bootstrap online editor<\/a> and start building your site!<\/p>\n\n\n\n

Dont forget to check out our other UI libraries<\/a>. There are over 27 of them now! <\/p>\n","protected":false},"excerpt":{"rendered":"

Start your project with simple a template that allows you to find your own style. Use our Plain UI and build a page layout that is easy to customize with details.<\/p>\n","protected":false},"author":6,"featured_media":1646,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"yoast_head":"\nPlain UI - Simple template for Tailwind, Bootstrap and Bulma<\/title>\n<meta name=\"description\" content=\"Start your project with simple template that allow you to find your own style. Use minimalist design with drag and drop editor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Plain UI - Simple template for Tailwind, Bootstrap and Bulma\" \/>\n<meta property=\"og:description\" content=\"Start your project with simple template that allow you to find your own style. Use minimalist design with drag and drop editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/\" \/>\n<meta property=\"og:site_name\" content=\"Shuffle\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BootstrapShuffle\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-20T16:45:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-23T08:33:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/01\/Plain.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"S\u0142awomir Pawlak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/01\/Plain.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"S\u0142awomir Pawlak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/\"},\"author\":{\"name\":\"S\u0142awomir Pawlak\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/3bc78df53e2d5db26b5b0ec8d3087168\"},\"headline\":\"Plain UI – Simple template for Tailwind, Bootstrap and Bulma\",\"datePublished\":\"2022-01-20T16:45:49+00:00\",\"dateModified\":\"2022-01-23T08:33:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/\"},\"wordCount\":584,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"UI Library\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/\",\"name\":\"Plain UI - Simple template for Tailwind, Bootstrap and Bulma\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2022-01-20T16:45:49+00:00\",\"dateModified\":\"2022-01-23T08:33:44+00:00\",\"description\":\"Start your project with simple template that allow you to find your own style. Use minimalist design with drag and drop editor.\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Plain UI – Simple template for Tailwind, Bootstrap and Bulma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"name\":\"Shuffle\",\"description\":\"Build Websites Faster with an AI Visual Editor\",\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shuffle.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\",\"name\":\"Shuffle\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"contentUrl\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Shuffle\"},\"image\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/\",\"https:\/\/www.facebook.com\/BootstrapShuffle\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/3bc78df53e2d5db26b5b0ec8d3087168\",\"name\":\"S\u0142awomir Pawlak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/96c62afa0672a20d8601c9ed9b9df2b1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/96c62afa0672a20d8601c9ed9b9df2b1?s=96&d=mm&r=g\",\"caption\":\"S\u0142awomir Pawlak\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Plain UI - Simple template for Tailwind, Bootstrap and Bulma","description":"Start your project with simple template that allow you to find your own style. Use minimalist design with drag and drop editor.","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:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/","og_locale":"en_US","og_type":"article","og_title":"Plain UI - Simple template for Tailwind, Bootstrap and Bulma","og_description":"Start your project with simple template that allow you to find your own style. Use minimalist design with drag and drop editor.","og_url":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2022-01-20T16:45:49+00:00","article_modified_time":"2022-01-23T08:33:44+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/01\/Plain.png","type":"image\/png"}],"author":"S\u0142awomir Pawlak","twitter_card":"summary_large_image","twitter_image":"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/01\/Plain.png","twitter_misc":{"Written by":"S\u0142awomir Pawlak","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/"},"author":{"name":"S\u0142awomir Pawlak","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/3bc78df53e2d5db26b5b0ec8d3087168"},"headline":"Plain UI – Simple template for Tailwind, Bootstrap and Bulma","datePublished":"2022-01-20T16:45:49+00:00","dateModified":"2022-01-23T08:33:44+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/"},"wordCount":584,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["UI Library"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/","url":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/","name":"Plain UI - Simple template for Tailwind, Bootstrap and Bulma","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2022-01-20T16:45:49+00:00","dateModified":"2022-01-23T08:33:44+00:00","description":"Start your project with simple template that allow you to find your own style. Use minimalist design with drag and drop editor.","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2022\/01\/plain-ui-simple-template-for-tailwind-bootstrap-and-bulma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Plain UI – Simple template for Tailwind, Bootstrap and Bulma"}]},{"@type":"WebSite","@id":"https:\/\/shuffle.dev\/blog\/#website","url":"https:\/\/shuffle.dev\/blog\/","name":"Shuffle","description":"Build Websites Faster with an AI Visual Editor","publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shuffle.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shuffle.dev\/blog\/#organization","name":"Shuffle","url":"https:\/\/shuffle.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","contentUrl":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","width":400,"height":400,"caption":"Shuffle"},"image":{"@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/","https:\/\/www.facebook.com\/BootstrapShuffle\/"]},{"@type":"Person","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/3bc78df53e2d5db26b5b0ec8d3087168","name":"S\u0142awomir Pawlak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/96c62afa0672a20d8601c9ed9b9df2b1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/96c62afa0672a20d8601c9ed9b9df2b1?s=96&d=mm&r=g","caption":"S\u0142awomir Pawlak"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1624"}],"collection":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/comments?post=1624"}],"version-history":[{"count":3,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1624\/revisions"}],"predecessor-version":[{"id":1662,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1624\/revisions\/1662"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media\/1646"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=1624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=1624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}