Beginners love how MOBLE styles UI (user interface) is intuitive and easy to use. Front-end developers love it as a gateway to getting under the hood and customising their own code.

Series 2 goes into detail of each area of the dynamic styles area. If you’ve already been playing around with our tools, you might like to jump ahead to Series 2 now, where you’ll find help, support, tips and best practice.

Below is a quick sampler video covering the features of the Styles area.

You’ll also find the notes below from Episode 3, as a quick refresher as to the importance of the Styles area to your website.

What is the Styles Area?

Before playing with layouts, we must input the websites' colours, fonts, header and granular elements like buttons and hover-over effects.

MOBLE's Dynamic Styles area brings CSS into a UI, so even a beginner can use it to design easily without code. You can start straight away with the website styles, playing with colours and fonts and previewing concepts of what the website might look like.

What is CSS?

For newbies, CSS (cascading styles sheet), is like the master control sheet of styles and is fundamental to UI design.

For example, in CSS you could control a colour and when you update it, that colour will update in every instance around the entire website. This saves huge amounts of time, especially when initial creating your website, or giving it a slight facelift. You can simply edit the styles and your website will be updated without having to edit a single page.

Before CSS, might have had to go back and change that colour in every location where it existed, taking up heaps of your project time.

Even worse: Imagine if you were doing a visual design in a program like Photoshop. You would have to change this in every location of every screen mock up. Programs like Sketch and its Symbols function go a long way to improving this process, though it still struggles with mass updating elements like padding and alignment.

What else is in the Styles area?

Elements like buttons, fonts and effects can also be updated swiftly across the website in CSS.

Dynamic Styles lets you control the main elements of your website CSS. Our clients are able to control more and more granular elements as demand for this grows. We’re releasing a range of buttons and hover-over options to pick and choose from.

As CSS advances, we’ll no doubt continue to release more elements to the Dynamic Styles area, so if you see something missing that you’d like to control, please let us know.

Can developers access the core CSS & JS?

MOBLE is an open CMS, meaning any designer or developer can access the core website CSS and JS.

If you’re a front-end developer, you have access to creating your own styles if what you’re looking for isn’t available in the MOBLE Styles UI.

When creating MOBLE, we didn't want to design a system that controlled the design economy, where clients would have to come to MOBLE to make changes. We’re open-source advocates. It’s important to us that teams can write their own code without steep barriers for new developers.

We also wanted a system that follows a consistent coding framework, meaning one developer may pick up another developer’s code, while at the same time receiving support and maintenance to help their website stay up to date and bug free.

You get the best of both worlds: A CMS that doesn’t lock you in and also assists in ongoing maintenance. You won’t find hidden fees or surprises along the way. You can read more about this in the final episode of this series, where we debates open-source vs. proprietary software, and where MOBLE sits between the two.

Can newbies really use the Styles to design a website look and feel?

Series 2 is an entire 'How to' video guide of the Styles area. It’s fairly intuitive and easy for anybody to follow, so go ahead and have a play and unleases your inner designer.