Drupal CMS Bootstrap Tutorial 1: Introduction and Overview
With Drupal CMS Bootstrap you can build a beautiful responsive CMS website in 5 minutes
[[{"fid":"507","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Drupal CMS Bootstrap","field_file_image_title_text[und][0][value]":false},"type":"media","field_deltas":{"1":{"format":"default","field_file_image_alt_text[und][0][value]":"Drupal CMS Bootstrap","field_file_image_title_text[und][0][value]":false}},"attributes":{"alt":"Drupal CMS Bootstrap","class":"media-element file-default","data-delta":"1"}}]]
That basically covers the primary goal of the CMS Bootstrap distribution: to make Drupal easier and less intimidating to new users. Drupal has a problem: it is relatively difficult to set up and has a steep learning curve. This impedes Drupal's growth as a small-business CMS and by extension it is costing the Drupal community as a whole precious talent: beginning developers, designers and enthusiasts who learn Wordpress and develop awesome plugins and themes for Wordpress because it was too difficult to get started with Drupal.
Another project that tries to make Drupal into something more comprehensible is Backdrop CMS, but I believe Drupal can be user-friendly and developer friendly without needing a fork. While Backdrop focuses on creating a more newbie-friendly code architecture I'm trying to focus on awesome tools Drupal offers to 'develop' websites without writing any code.
If you are reading this, you probably at some point installed Drupal and realized that it's powerful modular architecture and contrib modules make it a way more extendable and customizable tool than say, Wordpress. We love Drupal because in many ways its better than the competition, better than Joomla, Django, sharepoint or Wordpress. Still, somehow even very prominent Drupal agencies choose to build their site in Wordpress. And they are right, for a small responsive website, you can download and customize a themeforest theme and be done much quicker than with Drupal. What does Wordpress have that we lack? A built in WYSIWYG editor, handy shortcodes, WYSIWYG site building tools... and an enormous selection of premium themes. But it doesn't have a fine-grained permission system, views (unless you shell out 100 dollars for a premium plugin), webform etc.
In flexibility and extendibility Drupal is still better than Wordpress, but I think Drupal doesn't have to lag behind in user-friendliness and that's why I built this distribution; to offer fully configured CMS components and responsive design out of the box. Building this distribution was a challenge but it also showed me that Drupal has potential outsmart Wordpress in the areas where Wordpress is currently better. A common complaint about themeforest Wordpress themes is that their installations are heavy and slow. Thanks to the configuration-in-code architecture of CMS Bootstrap I was able to make a custom-build interface so that you only get the code you really need:
https://www.sooperthemes.com/minisites/drupal-cms-bootstrap-custom
Just pick the features you plan to use in your project and download a customized build.
What do I get?
At a Glance
- Responsive Design
- Fully configured CKEditor 4 WYSIWYG
- Light and heavy WYSIWYG profiles
- Media library for content images
- Shortcodes for graphical elements
- Shortcodes for complete Bootstrap 3 support in content
- Image resizing that matches Bootstrap grid
- Integrates Views and blocks with Bootstrap 3
- Blog component*
- Events component
- Event registrations component
- Portfolio component
- News component
- Contact form component
- Demo content
- SEO Optimized
- Frontend and backend performance optimized
*In CMS Bootstrap a component is a fully configured feature, often including a content type and one or more views and whatever else is needed to create a user-friendly, good looking website component.
Author Empowerment
WYSIWYG
Especially for beginning Drupal users, adding a WYSIWYG editor is a difficult task. Even experienced Drupal professionals can be surprised by some the capabilities of modern WYSIWYG systems like CKEditor 4. WYSIWYG editors are an important part of the author experience on your website and CMS Bootstrap has ships with 2 fully configured WYSIWYG profiles. There is a 'full' profile that offers a wide range of rich content tools and a 'simple' profile that shows a toolbar with only simple text editing tools.
Shortcodes
Shortcodes allow you to create rich content and layouts without using any HTML or CSS code. Using WYSIWYG integration you can even generate all the codes without having to remember the codes. This is great for clients who want to have control over columns and buttons in long pages but it can also be great for site builders who know HTML and CSS. I personally prefer to use shortcodes over HTML to great bootstrap grids within content because using the WYSIWYG button I get a form that listsall the breakpoints that bootstrap uses and I can easily fill in column sizes that fit the content I'm working on right now.
Other shortcodes I like to use as a site builder are Bootstrap tooltips, popovers, carousels and other interactive elements, because I don't know all the syntax of these elements by heart. It's great to just highlight a text or image in CKEditor and then use the shortcode button to create a popover bubble with additional information.
Media Library
A media library is great because it allows you to re-use assets on your website without having to re-upload them for every page. The Drupal media module is pretty incredible, it pulls together uploaded files, it can integrate media from many internet sources including youtube, media, soundcloud etc. It also gives you a nice overview and history of files that are part of your website and gives you a sense of control over content added by yourself and other contributors on your website. The downside of the media module is it's complexity: It was a lot of work to create a nice basic media library experience in CMS Bootstrap and the finaly product uses the latest development branch and a number of patches to create a smooth user experience and integration with Bootstrap 3 column sizes in the image resizing interfaces. Luckily for you, this is now available to you in the CMS WYSIWYG component in Bootstrap.
Site builder tools
Plug and Play CMS Components
Drupal CMS Bootstrap is built as a core distribution with add-on components. This architecture was chosen because from my experience with other Drupal distributions (and wordpress themes) I know that you often get much more features than you need. The result of this is not only a slower, heavier website but also an interface that is more complicated than it needs to be. If you want a website with a blog and a news section, you need need to have modules, content types, blocks and views for events and portfolio content. Your administration interface is cleaner and simpler if you only install the modules you will actually need, and that is what the custom build interface is for.
Bootstrap 3
Nowadays any website that isn't responsive is leaving money on the table. More and more internet users access websites on their portable devices. Google has also started integrating mobile-friendliness in their results page rankings so possible you are even missing out on desktop users when your site is not mobile friendly. This is why CMS Bootstrap has made responsiveness an integrated part of the project. The powerful Bootstrap 3 responsive grid system is used throughout the Bootstrap components: views, fields, and blocks are responsive out of the box.
The WYSIWYG component also includes an extensive bootstrap shortcodes library, giving you access to all Bootstrap 3 components right in the WYSIWYG.
If you are not familiar with Bootstrap 3, you can still use Bootstrap together with a custom theme and custom grid. Being a designer myself I used to dislike any grid frameworks because it limits what you can do creatively, but the 12 column grid in Bootstrap 3 is divisible by 2, 3, and 4, making it a hugely practicaly tool to translate any content smoothly to devices of all sizes. I previously used custom grid system tools like Susy and Singularity but now I feel confident I can create anything I need with the Bootstrap 3 system. Bootstrap isn't the best choice to create that unique 7 column layout that you have in mind for some funky design concept, but really when is the last time you actually used a unique layout system for an edgy design concept? It's not worth the hassle.
Themes
Works with any theme, 25 officially supported themes
The extra benefit you get from the officially supported themes is that I tested them and added code to the installer that puts blocks in the right regions. Bootstrap is built to look as good as possible out of the box but to be as extendable as Drupal itself. This means you can develop themes (and modules) for CMS Bootstrap as you would for any Drupal website. You can build a theme with or without Bootstrap 3 for Bootstrap, but I would recommend giving Bootstrap a shot, it has proven to be a big time saver for me.
Premium Themes
Premium themes, especially the Glazed theme are available to take your Bootstrap site to the next level, on a small budget. The Glazed premium theme is built for and with the CMS Bootstrap distribution. It offers additional features including advanced theme options, premium shortcode elements and an advanced mega menu. The Glazed project and the CMS Bootstrap distribution were developed together, and I hope that revenues generated from the premium themes club allow me to keep improving Bootstrap, and to port it to Drupal 8.
SEO done right
Drupal's SEO is not bad out of the box, but with additional modules and metatag configuration you can have top tier SEO, on par with the popular Wordpress+Yoast combination that is used by many SEO professionals. CMS Bootstrap comes with automatic semantic path aliases and redirects, but also implements more advanced techniques to Drupal. For instance, the metatag module is used to limit duplicate content problems and focus your link power on the right pages. In the Events component this is done by putting no-index metatags on the Events archive views, which basically only contain duplicate content of your event pages. This makes sure your link juice is spent on actual event pages.
100% Drupal
The CMS Bootstrap project is a Drupal distribution. Distributions are installation profiles that install Drupal + a number of features that relate to a specific type of website. For example, for e-commerce there is Drupal Commerce and for advanced group/community websites there is Drupal Commons. Dries wrote about distributions in 2006:
The fact that Drupal 5.0 will support distributions is big, and most people have yet to see its full potential. I don't think that any other Open Source project has done something like this before -- or at least, not on the scale that we might end up doing this.
Clearly there were high expectations of distributions in Drupal, even in 2006. From what I can see the concept of distributions did not really catch on as much as expected. I think this is in part because the framework to create distributions needed to mature but also because Drupal.org is not offering a good portal for distributions. That's why I chose to create a separate interface for composing and downloading CMS Bootstrap. The one Distribution that did breaking through the 10.000 active users barrier is Drupal Commerce Kickstart, and it's easy to see why. They put a ton of effort into both the distribution and the installer. If CMS Bootstrap gains some traction I hope to develop it into something of similar quality.
I will try to regulary write more tutorials to show you how Bootstrap can be used to create awesome websites like civinex.nl and lorenagarcia.nl in record-breaking time. I promise the next tutorials will also be more tutorial-esque than this introduction.