Mojo3

Light Responsive Template for Joomla 3.x

The Mojo3 CCS is structured into various chapters, which follow the CSS & Joomla logic as much as possible. The commented CSS is only meant for understanding the structure when making changes, the minified (optimized) CSS is meant for production environments.
The template is fast loading, as the minified version is only 46KB.

Contents of the Mojo3 CSS

320 and up

00. Reset
01. Root
02. Grid
03. Helpers
04. Typography
    04-1. General Typography
    04-2. Editor styles
      04-2-01. Shared Rounded Corners 10px
      04-2-02. Notes - Light Color (7 types)
      04-2-03. Notes with Color Bar (7 types)
      04-2-04. Block Quotes (longer citations)
      04-2-05. Cite (author or source of quote)
      04-2-06. Pull Quotes (highlighted extracts, 7 types)
      04-2-07. Drop Caps (7 types)
      04-2-08. Code (smaller monospace for code excerpts)
      04-2-09. Horizontal rule
      04-2-10. Small
      04-2-11. Preformatted
      04-2-13. Bold (strong)
      04-2-14. Joomla System Message
04-2-15. Additional Bootstrap styles see 23.
05. Links
06. Images
07. Tables
08. Forms & Buttons
    08-01. Forms
      08-01-01. General forms & Input fields
      08-01-02. Search forms
    08-02. Buttons
09. Header (Header-image)
10. Logo (Sitename, Slogan, Site-logo)
    10-01. Sitename ------------------------------------ 44px
    10-02. Slogan -------------------------------------- 14px
    10-03. Site Logo ---------------------- hidden for mobile
11. Top
    11-01. Navigation (JumpTo buttons for mobile)
    11-02. Topmenu & TopSearch - menu to bottom, no topsearch
    11-03. Breadcrumbs
    11-04. Article navigation
12. Banners, Featured & Newsflash
12-01. Banners
    12-02. Featured (for hero-unit or full width image slider)
    12-03. Newsflash
13. Above modules ------------------------------- 4 rows of 1
14. Main content
    14-1. Main content
    14-2. Article Details
    14-3. Print, E-mail & Editor Icons
    14-4. Tooltips styling (editor button popup frontend)
    14-5. Article footer
    14-6. Content Rating
15. Complementary
16. Bottom modules ------------------------------ 6 rows of 1
17. Footer Modules & Credits
    17-1. Footer modules ------------------------ 4 rows of 1
    17-2. Credits
    17-3. Back to top
    17-4. Debug
18. Vendor-specific
19. Joomla-specific
19-01. Icons
    19-02. Single article
    19-03. Blogs & Readmore link
    19-04. More articles
    19-05. Category description
    19-06. Categories list
    19-07. Subcategories list
    19-08. Edit article
    19-09. List a category
    19-10. Archived Articles
    19-11. Contacts
    19-12. User profile (edit profile, login/logout form)
    19-13. Newsfeeds
    19-14. Tags
20. Module styles
20-01. General module style
    20-02. Archived Articles module --------------- NO CHANGES
    20-03. Article categories module
    20-04. Article category module
    20-05. Banners module ------------------------- NO CHANGES
    20-06. Breadcrumbs module (see 11-03) --------- NO CHANGES
    20-07. Feed Display module
    20-08. Footer module -------------------------- NO CHANGES
    20-09. Language Switcher module --------------- NO CHANGES
    20-10. Latest News module --------------------- NO CHANGES
    20-11. Latest Users module -------------------- NO CHANGES
    20-12. Login module
    20-13. Logo module ---------------------------- NO CHANGES
    20-14. Menu module ---------------------------- NO CHANGES
    20-15. Most Read module ----------------------- NO CHANGES
    20-16. Newsflash module ----------------------- NO CHANGES
    20-17. Random Image module
    20-18. Related Articles module ---------------- NO CHANGES
    20-19. Search module -------------------------- NO CHANGES
    20-20. Statistics module
    20-21. Syndication Feeds module
    20-22. Weblinks module ------------------------ NO CHANGES
    20-23. Who's Online module -------------------- NO CHANGES
    20-24. Wrapper module ------------------------- NO CHANGES
    20-25. Popular Tags module -------------------- NO CHANGES
    20-26. Similar Tags module -------------------- NO CHANGES
    20-27. Hero Unit module ----------------------- NO CHANGES
21. Print rules (for Joomla print popup)
22. Xmap
23. Additional Bootstrap styles
24. Additional Kunena forum stylingA. 480px  screen width

A. 480px  screen width

A-(480px)-01. Root ------------------------------- NO CHANGES
A-(480px)-02. Grid
A-(480px)-03. Helpers ---------------------------- NO CHANGES
A-(480px)-04. Typography ------------------------- NO CHANGES
A-(480px)-04-2. ---------------------------------- NO CHANGES
A-(480px)-05. Links ------------------------------ NO CHANGES
A-(480px)-06. Images ----------------------------- NO CHANGES
A-(480px)-07. Tables ----------------------------- NO CHANGES
A-(480px)-08. Forms & Buttons -------------------- NO CHANGES
A-(480px)-09. Header
A-(480px)-10. Logo
A-(480px)-10-01. Sitename (44px)
A-(480px)-10-02. Slogan (14px)
A-(480px)-10-03. Site Logo (visible)
A-(480px)-11. Navigation & Topsearch
A-(480px)-11-01. Navigation (JumpTo buttons for mobile)
A-(480px)-11-02. TopMenu & TopSearch (menu to bottom, no topsearch)
A-(480px)-11-03. Breadcrumbs
A-(480px)-11-04. Article navigation
A-(480px)-12. Banners, Featured & Newsflash ------ NO CHANGES
A-(480px)-13. Above modules (4 rows of 1) -------- NO CHANGES
A-(480px)-14. Main content ----------------------- NO CHANGES
A-(480px)-15. Complementary ---------------------- NO CHANGES
A-(480px)-16. Bottom modules (6 rows of 1) ------- NO CHANGES
A-(480px)-17. Footer modules (4 rows of 1) ------- NO CHANGES
A-(480px)-18. Vendor-specific -------------------- NO CHANGES
A-(480px)-19. Joomla-specific -------------------- NO CHANGES
A-(480px)-20. Module styles ---------------------- NO CHANGES

B. 600px  screen width

B-(600px)-01. Root ------------------------------- NO CHANGES
B-(600px)-02. Grid ------------------------------- NO CHANGES
B-(600px)-03. Helpers ---------------------------- NO CHANGES
B-(600px)-04. Typography ------------------------- NO CHANGES
B-(600px)-05. Links ------------------------------ NO CHANGES
B-(600px)-06. Images ----------------------------- NO CHANGES
B-(600px)-07. Tables ----------------------------- NO CHANGES
B-(600px)-08. Forms & Buttons -------------------- NO CHANGES
B-(600px)-09. Header ----------------------------- NO CHANGES
B-(600px)-10. Logo
B-(600px)-10-01. Sitename (48px)
B-(600px)-10-02. Slogan (16px)
B-(600px)-10-03. Site Logo (visible)
B-(600px)-11. Navigation (menubottom, no topsearch)NO CHANGES
B-(600px)-12. Banners, Featured & Newsflash ------ NO CHANGES
B-(600px)-13. Above modules (2 rows of 2)
B-(600px)-14. Main content
B-(600px)-15. Complementary
B-(600px)-16. Bottom modules (3 rows of 2)
B-(600px)-17. Footer modules (2 rows of 2)
B-(600px)-18. Vendor-specific -------------------- NO CHANGES
B-(600px)-19. Joomla-specific -------------------- NO CHANGES
B-(600px)-20. Module styles

C. 768px  screen width

C-(768px)-01. Root
C-(768px)-02. Grid ------------------------------- NO CHANGES
C-(768px)-03. Helpers
C-(768px)-04. Typography ------------------------- NO CHANGES
C-(768px)-05. Links ------------------------------ NO CHANGES
C-(768px)-06. Images------------------------------ NO CHANGES
C-(768px)-07. Tables ----------------------------- NO CHANGES
C-(768px)-08. Forms & Buttons
C-(768px)-09. Header ----------------------------- NO CHANGES
C-(768px)-10. Logo
C-(768px)-10-01. Sitename (48px)
C-(768px)-10-02. Slogan (16px)
C-(768px)-10-03. Site Logo (visible)
C-(768px)-11. Navigation - TopMenu & Topsearch (768px and up)
C-(768px)-11-01. Topmenu definition
C-(768px)-11-02. Topsearch definition
C-(768px)-12. Banners, Featured & Newsflash ------ NO CHANGES
C-(768px)-13. Above ------------------------------ NO CHANGES
C-(768px)-14. Main content
C-(768px)-15. Complementary ---------------------- NO CHANGES
C-(768px)-16. Bottom modules (3 rows of 2)
C-(768px)-17. Footer modules (2 rows of 2) ------- NO CHANGES
C-(768px)-18. Vendor-specific -------------------- NO CHANGES
C-(768px)-19. Joomla-specific -------------------- NO CHANGES
C-(768px)-20. Module styles

D. 992px  screen width

D-(992px)-01. Root ------------------------------- NO CHANGES
D-(992px)-02. Grid ------------------------------- NO CHANGES
D-(992px)-03. Helpers ---------------------------- NO CHANGES
D-(992px)-04. Typography ------------------------- NO CHANGES
D-(992px)-05. Links ------------------------------ NO CHANGES
D-(992px)-06. Images ----------------------------- NO CHANGES
D-(992px)-07. Tables ----------------------------- NO CHANGES
D-(992px)-08. Forms & Buttons -------------------- NO CHANGES
D-(992px)-09. Header ----------------------------- NO CHANGES
D-(992px)-10. Logo
D-(992px)-10-01. Sitename (48px)
D-(992px)-10-02. Slogan (16px)
D-(992px)-10-03. Site Logo (visible)
D-(992px)-11. Navigation - TopMenu & Topsearch (768px and up)
D-(992px)-12. Banners, Featured & Newsflash ------ NO CHANGES
D-(992px)-13. Above
D-(992px)-14. Main content ----------------------- NO CHANGES
D-(992px)-15. Complementary ---------------------- NO CHANGES
D-(992px)-16. Bottom modules (2 rows of 3)
D-(992px)-17. Footer modules (2 rows of 2) ------- NO CHANGES
D-(992px)-18. Vendor-specific -------------------- NO CHANGES
D-(992px)-19. Joomla-specific -------------------- NO CHANGES
D-(992px)-20. Module styles ---------------------- NO CHANGES

E. 1382px screen width

E-(1382px)-01. Root ------------------------------ NO CHANGES
E-(1382px)-02. Grid ------------------------------ NO CHANGES
E-(1382px)-03. Helpers --------------------------- NO CHANGES
E-(1382px)-04. Typography ------------------------ NO CHANGES
E-(1382px)-05. Links ----------------------------- NO CHANGES
E-(1382px)-06. Images ---------------------------- NO CHANGES
E-(1382px)-07. Tables ---------------------------- NO CHANGES
E-(1382px)-08. Forms & Buttons ------------------- NO CHANGES
E-(1382px)-09. Header ---------------------------- NO CHANGES
E-(1382px)-10. Logo ------------------------------ NO CHANGES
E-(1382px)-10-01. Sitename (48px) ---------------- NO CHANGES
E-(1382px)-10-02. Slogan (16px) ------------------ NO CHANGES
E-(1382px)-10-03. Site Logo (visible) ------------ NO CHANGES
E-(1382px)-11. Navigation - TopMenu & Topsearch -- NO CHANGES
E-(1382px)-12. Banners, Featured & Newsflash ----- NO CHANGES
E-(1382px)-13. Above ----------------------------- NO CHANGES
E-(1382px)-14. Main content ---------------------- NO CHANGES
E-(1382px)-15. Complementary --------------------- NO CHANGES
E-(1382px)-16. Bottom modules (2 rows of 3) ------ NO CHANGES
E-(1382px)-17. Footer modules (2 rows of 2) ------ NO CHANGES
E-(1382px)-18. Vendor-specific ------------------- NO CHANGES
E-(1382px)-19. Joomla-specific ------------------- NO CHANGES
E-(1382px)-20. Module styles --------------------- NO CHANGES

F. Retina / HighRes screens

F-(Retina)-01. Root ------------------------------ NO CHANGES
F-(Retina)-02. Grid ------------------------------ NO CHANGES
F-(Retina)-03. Helpers --------------------------- NO CHANGES
F-(Retina)-04. Typography ------------------------ NO CHANGES
F-(Retina)-05. Links ----------------------------- NO CHANGES
F-(Retina)-06. Images ---------------------------- NO CHANGES
F-(Retina)-07. Tables ---------------------------- NO CHANGES
F-(Retina)-08. Forms & Buttons ------------------- NO CHANGES
F-(Retina)-09. Header ---------------------------- NO CHANGES
F-(Retina)-10. Logo ------------------------------ NO CHANGES
F-(Retina)-10-01. Sitename (48px) ---------------- NO CHANGES
F-(Retina)-10-02. Slogan (16px) ------------------ NO CHANGES
F-(Retina)-10-03. Site Logo (visible) ------------ NO CHANGES
F-(Retina)-11. Navigation - TopMenu & Topsearch -- NO CHANGES
F-(Retina)-12. Banners, Featured & Newsflash ----- NO CHANGES
F-(Retina)-13. Above ----------------------------- NO CHANGES
F-(Retina)-14. Main content ---------------------- NO CHANGES
F-(Retina)-15. Complementary --------------------- NO CHANGES
F-(Retina)-16. Bottom modules (2 rows of 3) ------ NO CHANGES
F-(Retina)-17. Footer modules (2 rows of 2) ------ NO CHANGES
F-(Retina)-18. Vendor-specific ------------------- NO CHANGES
F-(Retina)-19. Joomla-specific --------------------NO CHANGES
F-(Retina)-20. Module styles ----------------------NO CHANGES

G. Responsive behavior in this template

320
above, bottom & footer = rows of 1, no module box
sidebar modules to bottom, 100% width, no module box, 1 module per row

480
above, bottom & footer = rows of 1, no module box
sidebar modules to bottom, 47.5% width, no module box, 1 module per row

600
above & footer = 2 rows of 2, with module box
bottom 3 rows of 2, with module box
sidebar modules to bottom, 47.5% width, 2 modules per row

768
topmenu & topsearch display start here
sidebar modules to side, 1 modules per row

992
above & footer = 2 rows of 2, with module box
bottom 2 rows of 3, with module box
sidebar modules to side, 1 module per row

1382
above & footer = 2 rows of 2, with module box
bottom 2 rows of 3, with module box
sidebar modules to side, 1 module per row

HighRes/Retina
above & footer = 2 rows of 2, with module box
bottom 2 rows of 3, with module box
sidebar modules to side, 1 module per row
all sizes specified in rem (px fallback for older browsers)

H. Device widths

Crappy Android portrait             240 x  320
Crappy Android landscape            320 x  240
HTC Desire HD                       320 x  533
iPhone 3+4 portrait                 320 x  480
iPhone 5 portrait                   320 x  568
Motorola DROID 2 Global A956        320 x  569
Android (Samsung Galaxy) portrait   380 x  685
iPhone 3+4 landscape                480 x  320
Google Nexus One                    480 x  800
iPhone 5 landscape                  568 x  320
Kindle portrait                     600 x 1024
Android (Samsung Galaxy) landscape  685 x  380
iPad portrait                       768 x 1024
Google Nexus One landscape          800 x  480
Kindle landscape                   1024 x  600
iPad landscape                     1024 x  768

Width breakpoints

  px    em        Device
  --    --        ------
  320   22.8571   most mobiles
  380   27.1428   Samsung Galaxy portrait
  480   34.2857   iPhone3+4 landscape, Google Nexus portrait
  568   40.5714   iPhone5 landscape
  600   42.8571   Kindle portrait
  685   48.9285   Android landscape
  768   54.8571   iPad landscape
  800   57.1428   Google Nexus landscape
 1024   73.1428   Kindle landscape, iPad landscape