Draft Website Builder

Description

Build beautiful websites faster by adding TailwindCSS utility classes to Gutenberg blocks.

Free plugin responsive utility classes:

  • Margin [‘responsive’ ]
  • padding [‘responsive’,’child’]
  • Display [‘responsive’ ]
  • Flex Basis [‘responsive’ ]

Pro plugin utility classes:

  • Margin [‘responsive’ ]
  • Padding [‘responsive’ ]
  • Display [‘responsive’ ]
  • Flex Basis [‘responsive’ ]

All the FREE utility classes PLUS

  • accessibility [‘responsive’ ]
  • alignContent [‘responsive’]
  • alignItems [‘responsive’]
  • alignSelf [‘responsive’]
  • animation [‘responsive’]
  • appearance [‘responsive’]
  • backdropBlur [‘responsive’]
  • backdropBrightness [‘responsive’]
  • backdropContrast [‘responsive’]
  • backdropFilter [‘responsive’]
  • backdropGrayscale [‘responsive’]
  • backdropHueRotate [‘responsive’]
  • backdropInvert [‘responsive’]
  • backdropSaturate [‘responsive’]
  • backdropSepia [‘responsive’]
  • backgroundAttachment [‘responsive’]
  • backgroundBlendMode [‘responsive’]
  • backgroundClip [‘responsive’]
  • backgroundColor [‘responsive’, ‘hover’,’focus’,’group-hover’ ]
  • backgroundImage [‘responsive’]
  • backgroundOpacity [‘responsive’, ‘hover’,’focus’,’group-hover’ ]
  • backgroundPosition [‘responsive’]
  • backgroundRepeat [‘responsive’]
  • backgroundSize [‘responsive’]
  • backgroundOrigin [‘responsive’]
  • blur [‘responsive’]
  • borderCollapse [‘responsive’]
  • borderColor [‘responsive’, ‘hover’,’focus’,’group-hover’ ]
  • borderOpacity [‘responsive’, ‘hover’,’focus’,’group-hover’ ]
  • borderRadius [‘responsive’]
  • borderStyle [‘responsive’]
  • borderWidth [‘responsive’]
  • boxDecorationBreak [‘responsive’]
  • boxShadow [‘responsive’, ‘hover’,’focus’,’group-hover’]
  • boxSizing [‘responsive’]
  • brightness [‘responsive’]
  • clear [‘responsive’]
  • container [‘responsive’]
  • contrast [‘responsive’]
  • cursor [‘responsive’]
  • divideColor [‘responsive’]
  • divideOpacity [‘responsive’]
  • divideStyle [‘responsive’]
  • divideWidth [‘responsive’]
  • dropShadow [‘responsive’]
  • fill [‘responsive’]
  • filter [‘responsive’]
  • flex [‘responsive’]
  • flexDirection [‘responsive’]
  • flexGrow [‘responsive’]
  • flexShrink [‘responsive’]
  • flexWrap [‘responsive’]
  • float [‘responsive’]
  • fontFamily [‘responsive’]
  • fontSize [‘responsive’]
  • fontSmoothing [‘responsive’]
  • fontStyle [‘responsive’]
  • fontVariantNumeric [‘responsive’]
  • fontWeight [‘responsive’]
  • gap [‘responsive’]
  • gradientColorStops [‘responsive’,’hover’,’focus’]
  • grayscale [‘responsive’]
  • gridAutoColumns [‘responsive’]
  • gridAutoFlow [‘responsive’]
  • gridAutoRows [‘responsive’]
  • gridColumn [‘responsive’]
  • gridColumnEnd [‘responsive’]
  • gridColumnStart [‘responsive’]
  • gridRow [‘responsive’]
  • gridRowEnd [‘responsive’]
  • gridRowStart [‘responsive’]
  • gridTemplateColumns [‘responsive’]
  • gridTemplateRows [‘responsive’]
  • height [‘responsive’]
  • hueRotate [‘responsive’]
  • inset [‘responsive’]
  • invert [‘responsive’]
  • isolation [‘responsive’]
  • justifyContent [‘responsive’]
  • justifyItems [‘responsive’]
  • justifySelf [‘responsive’]
  • letterSpacing [‘responsive’]
  • lineHeight [‘responsive’]
  • listStylePosition [‘responsive’]
  • listStyleType [‘responsive’]
  • maxHeight [‘responsive’]
  • maxWidth [‘responsive’]
  • minHeight [‘responsive’]
  • minWidth [‘responsive’]
  • mixBlendMode [‘responsive’]
  • objectFit [‘responsive’]
  • objectPosition [‘responsive’]
  • opacity [‘responsive’, ‘hover’,’focus’,’group-hover’]
  • order [‘responsive’]
  • outline [‘responsive’,’focus’ ]
  • overflow [‘responsive’]
  • overscrollBehavior [‘responsive’]
  • placeContent [‘responsive’]
  • placeItems [‘responsive’]
  • placeSelf [‘responsive’]
  • placeholderColor [‘responsive’,’focus’ ]
  • placeholderOpacity [‘responsive’,’focus’ ]
  • pointerEvents [‘responsive’]
  • position [‘responsive’]
  • resize [‘responsive’]
  • ringColor [‘responsive’,’focus’ ]
  • ringOffsetColor [‘responsive’,’focus’ ]
  • ringOffsetWidth [‘responsive’,’focus’ ]
  • ringOpacity [‘responsive’,’focus’ ]
  • ringWidth [‘responsive’,’focus’ ]
  • rotate [‘responsive’,’hover’]
  • saturate [‘responsive’]
  • scale [‘responsive’, ‘hover’]
  • sepia [‘responsive’]
  • skew [‘responsive’, ‘hover’]
  • space [‘responsive’]
  • stroke [‘responsive’]
  • strokeWidth [‘responsive’]
  • tableLayout [‘responsive’]
  • textAlign [‘responsive’]
  • textColor [‘responsive’,’hover’,’focus’,’group-hover’]
  • textDecoration [‘responsive’,’hover’,’focus’,’group-hover’]
  • textOpacity [‘responsive’, ‘hover’,’focus’,’group-hover’]
  • textOverflow [‘responsive’]
  • textTransform [‘responsive’]
  • transform [‘responsive’]
  • transformOrigin [‘responsive’]
  • transitionDelay [‘responsive’]
  • transitionDuration [‘responsive’]
  • transitionProperty [‘responsive’]
  • transitionTimingFunction [‘responsive’]
  • translate [‘responsive’,’hover’]
  • userSelect [‘responsive’]
  • verticalAlign [‘responsive’]
  • visibility [‘responsive’]
  • whitespace [‘responsive’]
  • width [‘responsive’]
  • wordBreak [‘responsive’]
  • zIndex [‘responsive’,’hover’]

Screenshots

Installation

This section describes how to install the plugin and get it working.

  1. Upload the draft website builder plugin files to the /wp-content/plugins/ directory, or upload the website-builder.zip file through the WordPress plugins screen directly by clicking ‘Add New’ and selecting the zip file from your computer.
  2. Install and active the Gutenberg WordPress plugin.
  3. Activate the Draft Website Builder plugin through the ‘Plugins’ screen in WordPress.
  4. Use the Draft Website Builder plugin on your pages and posts.

FAQ

Will TailwindCSS utility classes conflict with other plugins?

No.

What themes is the Draft plugin compatible with?

Any theme built for the Gutenberg editor.

Reviews

October 22, 2021
Hi Lee, Really enjoyed your demo on the Page Builder Summit yesterday. While I am not a Tailwind CSS user, more a Divi user, I totally agree with the way you have implemented your system from a minimalist point of view, where only the existing blocks in core are extended or, as you have done, reduced to be manipulated with the Tailwind CSS only. So far I have some niggles with the Gutenberg project which I see as fundamental design flaws in the long run; the fact that they didn’t nail the main layout and structural elements (Sections/containers, rows and columns + better responsiveness on device breakpoints ) and make these, along with all the other blocks, a restricted set which third parties could extend, via an API, with their own UI, bells and whistles. So far I see many vendors out there making their own implementations of block sets where they are reinventing the wheel. Seems to me that they are perpetuating the age old problem where, if you disable any one of these solutions you potentially lose content, layout or both, whereas, if WordPress had a core foundation of set blocks, turning off or switching to another solution would retain content and maintain layout to some degree. Having this systematic approach would have had more buy-in from page builder vendors and subsequently a better overall direction in the development of the Gutenberg project. It would have also driven better consistency and interoperability between builders. What you have done makes the whole enterprise of using the block editor "Safer" and in this context third party vendors should only be allowed to override existing blocks in core by plugging in their own UI and features.
Read all 1 review

Contributors & Developers

“Draft Website Builder” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.1

  • Added missing utility classes to class picker (py-72,py-80,py-96)

1.0.0

  • Plugin Release