Monday – Friday from 6.00 am to 6.00 pm
Saturday from 7.00 am to 5.00 pm
Sunday & holidays closed
The „Arabica“ Theme for Contao
Arabica is a full responsive and dynamic scaling one-pager theme, developed by SYNTAXYS, Achim Lammerts, for the Contao content management system.
This elegant theme is mainly designed for small websites with less content, i. e. to present weekly offers of a coffee shop or a bakery. Just fill in your own content and present your business with a new Look & Feel.
Download the theme files
As a protection against automatic download from bots, please log in with username „public“ and password „download“ to access all the files you need:
„mobile first“
This layout is made simple as possible to fit perfectly in every screen. Based on the paradigma „mobile first“ it is optimized for small devices as well as for large and high resolution monitors.
Keep in mind:
Less is more respective to the bandwith. If you only use the needed parts, your website will be very fast. The CSS part is produced with the Sass engine which comes with Contao by default.
Compatibility
Browser: FF, Chrome, IE9+, Opera, Safari
Contao: up from 4.9 LTS
It doesn't make sense to support older versions.
Elements
The essential basic elements like accordion, teaser elements and slider are already pre-designed. Further components can be easily setup if needed.
As a one-pager, this theme doesn't need a navigation. For legal content you might use the accordion.
Some impressions of our coffee house
That's our team
Bruce Lee
The Head
A mathematician is a device for turning coffee into theorems.
A mathematician is a device for turning coffee into theorems.
Brocco Lee
Our service in the kitchen
Vegetarian, loves to style your food! Brings the power in your day.
Vegetarian, loves to style your food! Brings the power in your day.
Heaven Lee
Our barista
Coffee is her life, she judge a restaurant by the bread and by the coffee.
Coffee is her life, she judge a restaurant by the bread and by the coffee.
How to use
If you know what you're doing it will be easy for you to setup your own site with this example. Otherwise get payed help, some is for free but nothing is for less.
It's developed with Contao 4.9 LTS and you might start with it „out of the box“, no further extensions are needed for a basic setup.
Download the theme files
If you like my work and it's useful to you I would appreciate a donation very much. Thank you!
Just download the CTO-File containing all files you need. Import the SQL-File to your database, if you want to use the example content of this website.
Getting help
If you don't want to do the job by yourself, I'm available for hire. Just deliver your content and we'll start.
Setup of a fresh Contao installation with this theme:
29,90 €
Setup a one-pager web site with this theme in a fresh Contao installation:
299,- €
Elements
The main focus during the development of this theme was performance and compatibility with as many devices as possible, including older ones. This site works also great with an iPhone 4.
Therefore the code was kept as small as possible and only the necessary elements were used and designed with CSS.
Easy grid system
For the column layout of this sample website, I use only some classes to define the respective widths of the blocks. Just use the CSS classes for adjusting the column width respective to the parent elements width:
- for a quarter:
col25 - for a third:
col33 - for a half:
col50 - for two thirds:
col66 - for three quarters:
col75
For smaller devices the columns are stacked automatically. The gap between two columns is set to 2% respective to the parent element.
Wrap multiple content elements into div and clear the floats with the clearFloat class. Normally Contao appends itself the classes first and last but not to the HTML content element. In this case use it manually together with your column classes.
This example website will show you the possibilities.
Color presets
There are different color schemes for content areas pre-defined, just use the respective selectors:
bright - example
medium - example
dark - example
For defining your own CSS selectors, just use the Sass variables:
$color-primary-0
$color-primary-1
$color-primary-2
$color-primary-3
$color-primary-4
$color-primary-5
$color-primary-6
References
You can use this theme for free under the conditions respective to the Creative Commons CC-BY-SA license. Neither Contao nor the parts of the visual content (images, icons and vector artwork) are included to the themes license.
Images / Icons / Vectors
Header: unsplash, Mike Kenneally, Photo-ID zlwDJoKTuA8 (License: Unsplash License)
Slider:
unsplash, Charisse Kenion, Photo-ID w4VtT8jQL6A (License: Unsplash License)
unsplash, Valentin B. Kremer, Photo-ID 4ia_6JMu6Mg (License: Unsplash License)
unsplash, S O C I A L . C U T, Photo-ID UD57QdzIj_8 (License: Unsplash License)
Team:
Achim, Selfie 2017 (License: CC-BY-SA)
unsplash, Brooke Cagle, Photo-ID WfV4KscvvBQ (License: Unsplash License)
unsplash, Brooke Cagle, Photo-ID 9fHMo1-5Io8 (License: Unsplash License)
Logo: Johnny's Cup of Coffee Coloured (License: Public Domain)
Design
Color palette generated with paletton.com
Google Fonts: Nunito, Vujahday Script (License: Open Font License)