PurityM Bootstrap Theme - Subtle and Romantic Look

* Article from our customer *

Related Topics

• Unicore Bootstrap Theme - the first independently developed Mobirise HTML template pack
• Bootstrap 4 review - Quick look over the new Bootstrap 4 framework
• What's new in the latest Bootstrap 4 framework? Bootstrap 4 Tutorial.
• Social comments block in the bootstrap website maker
• Bootstrap site creator affiliate program

Hi guys, my name is Filip and I run a small graphic and web design business in a small country somewhere in Europe. I started it practically from the scratch and worked my way up step by step. It all started as mostly graphic design business but soon some of the repetitive clients required websites for their businesses. So it kind of evolved towards web design.

As some of you might have figured, or maybe read in my previous article when I faced my first web site assignment I knew almost nothing about coding and CMS solutions and had to evolve these skills in no time at all. Anyway – somehow I managed to learn WordPress just enough to complete what I was meant to but being used to environments like Photoshop and Illustrator giving the freedom to follow my vision I just felt something in missing. Yes, I used the WordPress CMS framework, but didn’t liked it at all – wanted, needed something more.

Recently, while googling about new tends and resources I got on an article, which directed me to the Mobirise Website Builder site. I got instantly fascinated by the idea of creating entirely modern and appealing websites in a way closest to the natural as I think it should be. So I dig a little further getting familiar with the Mobirise’s features and the decision came easily – this was my design tool for the projects up to come.

Bootstrap themes of Mobirise

Since I’m curious by nature I took my time getting to know my new free (hard to believe, but YES – all the functionality’s absolutely free). I noticed that nevertheless the default Mobirise theme is fully customizable there is another PurityM bootstrap theme available to add at the symbolic price of $5. So I did a little further more again to find out what this fascinating software giving it all for free has for sale.

The answer is TIME – maybe the most valuable resource along with the health. I invested some of mine exploring each and every module of the both bootstrap 4 templates – Mobirise’s Default and PurityM. Both of them have absolutely the same functionality, but at the same time entirely different look. Maybe that’s why they call them themes ;)

The Mobirise theme: suitable for any purpose

Mobirise Default theme is crisp, fresh and appealing with its bold sharp edges and modern dark backgrounds. The clean san serif font came with no emotional load leaving the content to set the mood. Mobirise Default theme seemed to be neutral and suitable for any purpose. Looked like the development team plays fair giving the universal purpose theme for free.

The mild and romantic PurityM bootstrap theme

On the other hand PurityM bootstrap theme with its round corners light backgrounds and transparent navbar by default instantly set a mild smooth and romantic mood, calms the eye and sets the mind to piece. The gracious and gentle serif default font gets to be just the right one co complete the overall vision. Every little detail is being taken care of from the style of the modules and the color schemes to the very cool oval buttons and social free icons. Flawless - same functions, but entirely different appearance.

Only 20 minutes for building a website

So what you might say. If Mobirise’s Default theme is fully customizable why can’t I set it up to match the Purity – after all I’ve got the template to fallow in the demo (yes, there is a great demo of the PurityM bootstrap theme available at Mobirise’s website). And you’ll be right – I asked myself absolutely the same question.

And then I did the math. For an example I took the legal section website I recently created with Mobirise from my previous article. It consisted of about 10 sections with mostly text content, a contact and subscribe form and a bar with social icons. Let’s say 2 minutes over changing the title and subtitle font of each section and at least 5 minutes over finding the sweet looking fonts from PurityM name – remember it’s the time we’re taking count of here – makes about 20 minutes only for this.

How to round the buttons

The rounding of the buttons won’t be a problem either – it’s a very simple trick I learned on my own – just right click on any button on the page you’ve already published or previewing and select “Inspect element”. Just to be clear about it – I’m using Mozilla Firefox browser, but I’m sure if you are with something different the sequence is much the same (just a friendly advice – consider moving on to Firefox – it’s great! ;)

Anyway – after selecting the “Inspect element” option from the right click over any button on the webpage responsive menu you shall see an console like workspace emerging from the bottom of your browser showing you the code of the web page you are viewing. It’s spited in two tabbed areas – a wider left and much narrower right one. For the task we’re trying to accomplish what all the tabs say is not important – let’s keep it simple. So on the left in the inspector area the row where the button you’ve just right clicked is described is most probably highlighted it should look something like this:

<button type="submit" class="mbr-buttons__btn btn btn-lg btn-primary"><span class="btn-text">SUBSCRIBE</span><i class="btn-loader"></i></button>

What you need here is just to check out the “class=” value – here it says “mbr-buttons__btn” and “btn btn-lg btn-primary” – these are simple rules telling the button how it should look like – nothing special or mysterious about it – they actually do it in almost plain English – a bit like a slang though. Keeping in mind those two words go take a look to the right section and if necessary scroll down a little – you shall see each rule listed there. What you usually need is the first one written in the left section – for our example it’s “mbr-buttons__btn”. You shall see something like this:

.mbr-buttons__btn, .mbr-buttons__link,      style.css:1194

When you hover your mouse over the style.css a popup appears telling you exactly where is this file located and the “:1194” means this rule is on the 1194-th row. So all you need now is find this file and open it with a simple text editor – Notepad, Notepad++ or whatever you like (I personally use Notepad++ it got some mean coloring and search/replace functions which help me a lot) and go to this 1194th line. Since we’re using a theme generated by the Mobirise software, the style.css file should be located in

\assets\mobirise\css\ under the folder you’ve published the web page, and the lines in the file should look like this:

.mbr-buttons__btn,
.mbr-buttons__link,
.mbr-buttons__btn:hover,
.mbr-buttons__link:hover {
  text-decoration: none;
}

Here comes the little magic – as I told you css is a bit like a slang – I just googled “css button round corners” and hit on the first or second result – instantly got to knowledge that the code I need is

“border-radius: 15px;” where the larger the number the rounder the corners of the button.

So it’s now just a copy/paste job adding the code:

.mbr-buttons__link:hover {
  text-decoration: none;
   border-radius: 15px;
}

Save the file and reload the web page – VOILA! – you’ve got round corners and lost at least 10 minutes of your life on doing that. In my example I’ve got social icons too – it’s a bit trickier here, so let’s decide leaving them as they are.

PurityM theme: saved time for designing appealing websites

So at the bottom line it took more than half an hour tweaking the default Mobirise bootstrap theme to closely but not entirely match the PurityM theme. And every time when starting a new project with this kind of appearance this tweaking time should be considered.

Now let’s imagine for a moment that I was not a designer but a fast food worker making burgers for, let’s say $15 an hour. This half an hour effort cost me at least $7,50 and got nice, but not perfect results.

So what I’m saying here is – is it worth when for the price of a burger I’m getting a perfect set appearance every time I need it and even get more free time to think on what’s really important – the design and the structure of the mobile friendly website? Definitely not! So it seems buying the PurityM bootstrap template is the right way to go for. And it’s healthier too – burgers are bad for you ;)

Icon extension

Now let’s take a look at the other extension offered at the same price – the icons pack. For the same price as PurityM I got the opportunity to use about 750 crisp and expressive iconic images, scale and color them whatever I like.

Of course, being familiar with Photoshop and Illustrator it’s not a problem for me to sketch up whatever I need to suit my needs. I asked myself once more – is this worth the price?

Being critical and stubborn by nature I started listing the icons trying to find something topic I’ve used previously in my project but isn’t covered by this package. Believe me or not – I couldn’t. And since, as they say an image is worth a thousand words in my future projects I’ll most certainly try this pack and share my experience with you.

Mobirise: the freedom for web-designers

Mobirise is a great startup piece of software – really a rising star, giving us the designers the freedom to think of what’s important – the design of the site, not bothering on annoying stuff like forms, databases and code. It offers entirely for free all of its great fully responsive modules end even further more – for a symbolic price and a click of a button the clear and modern default appearance becomes mild, subtle and gracious.

With the help of this tool we, the designers can set aside the bothering technical details and keep our mind on what’s important – the vision, the structure, the content. In aid of expressing our ideas a powerful arsenal of crisp icons sits there for us waiting for our reach. So to the question – are the PurityM theme and Icons pack worth their price my answer is – yes, they are!

* Article from our customer Filip Filyov*