Themes

‘Yng.Dev.‘ and ‘Mr.Dev.‘ initially come with the themes ‘None’ and ‘Default’ with many layouts to choose from.
If you are a developer, you can create other themes and layouts, following the small steps and guidelines that will be given on the documentation soon.

None

The ‘None’ theme does not load any extra theme css file. It’s the perfect option if you are a developer that wants to add a completely new style, without having to create a new theme from scratch.  This theme does not bring layouts or extra options but you still have all of the global options available.

Default

The Default theme has a simple design to easily adapt to your current website template. It doesn’t have background colors and uses your current text color for some soft box shadows.
It comes with preset layouts made for any situation and a custom layout if you wish to set your own options instead. With the custom layout you can also choose to not add any style and still be able to use all other Default layouts’ options.
More details about the available options are described on each example below.

Default > Layouts:

Grid

  • Description

    by Marcos Rego Marcos Rego

    Choose the layout Grid to have your items with some style, organized in rows and columns, in containers of the same height and with some space between them.

  • Details

    by Marcos Rego Marcos Rego

    On this layout it can be useful to select the number of items per line and per page.
    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Scale Active
    • Opaque Active

    Of course you can change this options by changing to the Custom Layout.

  • Options

    by Marcos Rego Marcos Rego

    To add a little more to the default selected options of the Grid Layout, I used the following options for this example:

    • 3 items per line
    • Display published date and author

Collapsible

  • Description

    This layout collapses the description and bottom link on active (click or mouseover if selected).
    To easily understand the items that are collapsible, they will have arrows has toggles by default.

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Direction toggle
    • Reveal active
    • Portrait on landscape window

    By changing to the Custom Layout, you can also use a Plus Toggle or a Close Toggle on your collapsible items.

  • Options

    On this example of the Collapsible layout you can see the following options working:

    • Auto scroll to active.
    • Keep other actives opened.

Slider

  • Description (0)

    The Slider layout is basically a styled layout that by default only shows one item per page and one item per line, that can be navigated using arrows or other toggles.

Menu

  • Description

    A layout without style but with functionalities. By default ‘Menu’ will hide inactive items and it will show the child items of the active item. It will also underline the current item, according to the url/page/article/category that you are visiting. On mobile it will have an hamburguer toggle.

    Of course any of this options can be changed if you select the Custom Layout.

    And you can make it look even more like a menu by adding linked titles, removing the descriptions and adding mouseover.

    See all Mr.Dev. features…

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Style: Current categories or link
    • Toggles: Direction toggle, Close toggle and Hamburguer mobile
    • Reveal active
    • When active hide inactives

    It checks the following pagination option by default:

    • Infinite per page

    And by default it also checks the following global option:

    • Only show subcategories of active
    See all Mr.Dev. features…

  • Options

    For this example, I showcase Mr.Dev.’s option to add classes to the bottom link. The link you see below has the style associated to the class “btn”.

    See all Mr.Dev. features…

Tabs

  • Web
  • War’s Shout
  • Tabs
  • Slider
  • Revive
  • Phrase
  • Options
  • Options
  • Options
  • Options
  • Options
  • Options
  • Options
  • News
  • Music
  • Mr.Dev.
  • Mosaic
  • Grid
  • Graphic
  • Global
  • Details
  • Details
  • Details
  • Details
  • Details
  • Details
  • Details
  • Description
  • Description
  • Description
  • Description
  • Description
  • Description
  • Description
  • Default Theme
  • Custom
  • Collapsible
  • Accordion

  • For this example I decided to:

    • Not display each title inside the item because they already appear on the tab.
    • Pinned the item “Description” to start active.
    • And to showcase a working example of automatically sorting items and manually reorder them, I changed this example to descend items by title and then I manually reorder for this item to be between ‘Description’ and ‘Details’

    (Pin and manual reordering are only available on Mr.Dev)

  • By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Expand active
    • Portrait mode

    And the following global layout options:

    • Only show actives
    • Do not inactive on click

  • Although you can use tabs with any layout or theme, the layout “Tabs” will automatically select the most common options.
    By default it will show tabs for each item but you can still change the type of tabs to use for example: “Items parent” (for Categories) or “Tags” (for Articles/Posts).

Mosaic

  • Accordion
  • Collapsible
  • Custom
  • Default Theme
  • Description
  • Description
  • Description
  • Description
  • Description
  • Description
  • Description
  • Details
  • Details
  • Details
  • Details
  • Details
  • Details
  • Details
  • Global
  • Graphic
  • Grid
  • Mosaic
  • Mr.Dev.
  • Music
  • News
  • Options
  • Options
  • Options
  • Options
  • Options
  • Options
  • Options
  • Phrase
  • Revive
  • Slider
  • Tabs
  • War’s Shout
  • Web

  • Description

    The “Mosaic” layout is basically a “Grids” layout but by default has tabs and shows more than 1 item per line on mobile.
    The tabs on this layout usually show ‘Categories’ for tabs. But you can still change the type of tabs, just like I did on this example by selecting a tab per item.

    Tip: The tabs ‘Tags’ and the page toggles “Below” or “Scroll” also go very well with this layout.

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Landscape mode

    And the following global layout options:

    • On active hide inactives
    • Do not inactive on click

    This layout forces the items per line to not be infinite.

  • Options

    For this example the only change I made was to show a tab per item instead of the default type of tabs that this layout selects.

Popup

  • Description

    The “Popup” layout will fix the active item on the window, covering most of the content.

    On this example, you had to click on one of the items for this popup to appear. Using the “Pin” feature of Mr.Dev., it’s possible for the popup/item to appear immediately when opening the page.

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Fix active
    • Reveal active
    • Plus toggle
    • Close toggle

  • Options

    For this example, I selected to show 3 items per line because that also defines the width of the popup.

Custom

  • Description

    On the Custom Layout you will find all the options of the layouts shown above and some more, but this time each option is selected by you.

  • Details

    These are the options you can check or uncheck on this layout:

    Style:

    • Apply theme style
    • Current categories or link
    • Vertical titles

    Toggles:

    • Plus toggle
    • Direction toggle
    • Close toggle
    • Hamburguer mobile

    Transitions:

    • Reveal active
    • Expand active
    • Fix active
    • Scale active
    • Opaque active

    Modes:

    • Landscape on portrait window
    • Portrait on landscape window

    Besides other global layout options:

    • Window height
    • Pagination inside content
    • Do not inactive on click
    • Keep other actives opened
    • When active hide inactives
    • Only show subcategories of active
    • Show number of posts (on categories)
    • Active on mouseover
    • Auto scroll to active
    • Change URL on active
    • Remember last active (uses cookies)

And more new layouts to come!

 see all features

This website uses cookies to improve the performance and user experience without collecting any personal information that identifies the user. By continuing to navigate you are accepting these cookies.
ContinueKnow moreRemind me later