ro-a-fi / conflatao

Das neue Contao 3 Backend Themes

Das neue Contao BE Theme

Hier entsteht ein neues Contao 3 Backend Theme im Rahmen meiner Bachelorarbeit. Soweit vielen Dank an die Contao Community. Ich freue mich sehr über das viele positive Feedback, das aufgebrachte Engagement und das Interesse!

conflatao's Issues

Coding Style: Tabs or Spaces

I suggest to build everything upon one coding style. Do you prefer tabs or spaces and how much do you like to indent them?
I always use two spaces for css because this is the recommendation from Google and SassGuidelines. Yeah, this topic is a debate on it's own but because you are the creator, what do you like more?

Hope this is ok, that I am pushing forward but maybe this theme might end up being in Contao 4.0 :D

core styling

Add styling for core elements:

• accordion
• download
• gallery
• table
• text
• images
• pagination

Strange hover behaviour on rows

When hovering rows at articles or site structure, there is some strange behaviour, please see video: http://screencast.com/t/1qp0pptsn

Browser: Chrome latest
Contao: 3.5.0
ConFlatao: Master Branch (05.06.2015)

Prefixes: remove vendor prefixes

According to CanIUse opacity, box-sizing and box-shadow can be omitted.
If we need some prefixes, I suggest to include a build process using autoprefixer but I would shift this to tackle later on

missing indent of nested folders in the file management

There is an missleading or missing indent of folders that are nested. This occurs only in the lightbox window when accessing files via a content element.

In the Screenshot below the "layout" folder is actually nested in "images".

Relative Units

Hey, how do you like relative units? Currently everything is coded in px.
I personally use rems since a few months. Before I used ems but rems work a bit nicer. The benefit of this technique would be that everything builds upon a base size. I suggest using e.g. 14px ~ 0.875rems and use multiples / divisions for spacing. E.g. .25rem, .5rem, .75rem, 1rem, 1.5rem. This will be a more consistent approach and also be very simple to code.
The only downside of rems is that it is only supported in IE9+. My go would be using rems with a fallback of px so it is easy to drop IE8 support in the near future.
Of course this will cause that the theme looks slightly different but I think this is a more consistent way. Also the big benefit of this is that it will scale according to the browser settings. If the user changes the default text size to e.g. 24px everything will scale up.

media query: mobile-first

https://github.com/ro-a-fi/ConFlatao/blob/master/main.css#L1785

I recommend using @media (min-width: XXX):
Mobile-first approach is better for smartphones because it lowers file size and reduces css parsing

theme license?

Under which license is your work, public domain?

clean up colors

Currently there are way to many different colors in use. You pretty much can not tell any difference between them, so my suggestion is to limit these. This will help us to maintain the project better and saves some bytes if gzip is activated.
@ro-a-fi Are you okay with that?

Sass Support

Hey Raphael,

I really like this theme and would help you with it, if you want to.
My suggestion is to code it in Scss instead of regular CSS, so we can take advantage of variables for spacing and colors, functions and loops. This way, everything is more dynamic and consistent.
If you agree, I can take care of this and send you a PR :)

remove platform specific styles

I suggest removing platform specific styles like webkit, firefox, safari, opera, ie and js.
Use some browser normalisation instead.

Off canvas navigation

I think this would be a nice approach on mobile devices.
http://tympanus.net/Development/SidebarTransitions/

dripicons

Can we remove src/dripicons? They are not used in the theme.
Iconfonts are not the best solution for an icon system. Best way would be to use an SVG iconsprite but unfortunately this is not supported by Contao. I think using pngs for now is the best solution.

Themes > Bildgrößen durch fehlendes Icon nicht aufrufbar

Man kann in Contao 3.5.x die Bildgrößen-Einstellungen nicht öffnen, da in der Theme Übersicht das Icon dafür nicht vorhanden ist.

Webfonts: License and Loading

Are we allowed to include Source Sans Pro in the project? I am a bit confused.

Google Fonts repo:

WARNING: NOTE THAT ONLY GOOGLE INC MAY DISTRIBUTE MODIFIED VERSIONS WITH THE TRADEMARK NAME "SOURCE" and only then with approval

Wikipedia:

It is the first open source font family from Adobe, distributed under the SIL Open Font License.

Fontsquirrel:

The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves.

So I think it is ok to include it into the project but I am not 100% sure.
If we have the permission I suggest to generate and only serve woff and woff2 because they are supported by mostly any browser (~90%). Older browsers which do not support woff also lack on supporting other features so in my opinion it is ok to fall back to a system font. Old browsers will not have to download heavy fonts with this way of serving the font.
If we want to get a bit further we can load the font async and store it in localstorage. I've done some tests and this works really well

Ist das Theme noch in Bearbeitung?

Hallo Raphael, wie weit ist denn Dein Theme inzwischen? Ist es noch in Bearbeitung oder schon fertig?

Coding Style: Sort CSS Declarations

Google and SassGuidelines suggest to sort css declarations alphabetically. This ways there is a clear coding style.

Also this article shows that sorting reduces the file size when gzip is enabled