getgrav/grav-theme-antimatter

Grav Antimatter Theme

Antimatter

Antimatter is the default Grav theme. Simple, fast and modern.

Installation

Installing the Antimatter theme can be done in one of two ways. Our GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.

The theme by itself is useful, but you may have an easier time getting up and running by installing a skeleton. The Antimatter theme can be found in both the One-page and Blog Site which are self-contained repositories for a complete sites which include: sample content, configuration, theme, and plugins.

GPM Installation (Preferred)

The simplest way to install this theme is via the Grav Package Manager (GPM) through your system's Terminal (also called the command line). From the root of your Grav install type:

bin/gpm install antimatter

This will install the Antimatter theme into your /user/themes directory within Grav. Its files can be found under /your/site/grav/user/themes/antimatter.

Manual Installation

To install this theme, just download the zip version of this repository and unzip it under /your/site/grav/user/themes. Then, rename the folder to antimatter. You can find these files either on GitHub or via GetGrav.org.

You should now have all the theme files under

/your/site/grav/user/themes/antimatter

NOTE: This theme is a modular component for Grav which requires the Grav, Error and Problems plugins.

Updating

As development for the Antimatter theme continues, new versions may become available that add additional features and functionality, improve compatibility with newer Grav releases, and generally provide a better user experience. Updating Antimatter is easy, and can be done through Grav's GPM system, as well as manually.

GPM Update (Preferred)

The simplest way to update this theme is via the Grav Package Manager (GPM). You can do this with this by navigating to the root directory of your Grav install using your system's Terminal (also called command line) and typing the following:

bin/gpm update antimatter

This command will check your Grav install to see if your Antimatter theme is due for an update. If a newer release is found, you will be asked whether or not you wish to update. To continue, type y and hit enter. The theme will automatically update and clear Grav's cache.

Manual Update

Manually updating Antimatter is pretty simple. Here is what you will need to do to get this done:

• Delete the your/site/user/themes/antimatter directory.
• Download the new version of the Antimatter theme from either GitHub or GetGrav.org.
• Unzip the zip file in your/site/user/themes and rename the resulting folder to antimatter.
• Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in terminal and typing bin/grav clear-cache.

Note: Any changes you have made to any of the files listed under this directory will also be removed and replaced by the new set. Any files located elsewhere (for example a YAML settings file placed in user/config/themes) will remain intact.

Features

• Lightweight and minimal for optimal performance
• Fully responsive with off-page mobile navigation
• SCSS based CSS source files for easy customization
• Built-in support for on-page navigation
• Multiple page template types
• Fontawesome icon support

Supported Page Templates

• Default view template
• Blog view template
• Error view template
• Blog item view template
• Modular view templates:
  • Features Modular view template
  • Showcase Modular view template
  • Text Modular view template
• SnipCart view template

Menu Features

Dropdown Menu

You can enable dropdown menu support by enabling it in the antimatter.yaml configuration file. As per usual, copy this file to your user/config/themes/ folder (create if required) and edit there.

dropdown:
  enabled: true

This will ensure that sub-pages show up as sub-menus in the navigation.

Menu Text & Icons

Each page shows up in the menu using the title by default, however you can set what displays in the menu directly by setting an explicit menu: option in the page header:

menu: My Menu

You can also provide an icon to show up in front of the menu item by providing an icon: option. You need to use name of the FontAwesome icon without the fa- prefix. Check out the full list of current FontAwesome 4.2 icons:

icon: bar-chart-o

Custom Menu Items

By default, Grav generates the menu from the page structure. However, there are times when you may want to add custom menu items to the end of the menu. This is now supported in Antimatter by creating a menu list in your site.yaml file. An example of this is as follows:

menu:
    - text: Source
      url: https://github.com/getgrav/grav
    - icon: twitter
      url: http://twitter.com/getgrav

The url: option is required, but you can provide either or both text: and/or icon:

Blog Features

Daring Fireball Link Pages

Antimatter supports the ability for a page to have a link: header option. This will then in turn create a link page where the title of the page will actually be linked to the link provided and a prefexid double angle >> will link to the page itself. Simply provide the link in the page header:

link: http://getgrav.org/blog

Setup

If you want to set Antimatter as the default theme, you can do so by following these steps:

• Navigate to /your/site/grav/user/config.
• Open the system.yaml file.
• Change the theme: setting to theme: antimatter.
• Save your changes.
• Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in Terminal and typing bin/grav clear-cache.

Once this is done, you should be able to see the new theme on the frontend. Keep in mind any customizations made to the previous theme will not be reflected as all of the theme and templating information is now being pulled from the antimatter folder.

grav-theme-antimatter's Issues

< and > cause twig exception with summary and on a short published blog item

When creating a blog item under a blog that is short (shorter than the summary length?), that includes less than and greater than symbols, and a summary is enabled causes the following Twig runtime exception:

An exception has been thrown during the rendering of a template ("DOMDocumentFragment::appendXML(): Entity: line 1: parser error : Premature end of data in tag user line 1") in "partials/blog_item.html.twig" at line 50.

For instance, the following causes an error by itself with summary enabled:

admin add <user>

Disabling the summary on the blog item fixes this.

Additionally, adding the above to a larger blog item (larger than the summary length?) does not cause the issue.

Missing fancy animation in FF and Chromium

I noticed that Win7 64b IE 11.0.17 has this animation that content seems to slide in from left and right sides (both for the navigation bar elements and the main content itself).
This animation is missing in FF 37.0.1 (on win7 64b) and for the browsers on Ubuntu 15.04 FF 38.0 and Chromium 41.0.2272.76
It would be nice to have as it add some extra touch to once page. And keeping a common look and feel in all browsers seems once of the main points of CSS ...

Modular page scroll misplace

When viewing modular page the SinglePageNav.js configuration offset selector is #header (user/themes/antimatter/templates/modular.html.twig line 20). This misplaces the scroll cause when page is scrolled the header height changes. Correct placing selector for scrolled header is #header.scrolled?

printing multiple pages doesn't put the header on first page but on all following pages

If you print simple text, which is longer then 1 page, you get no header on the first page but on all other pages 2 to n you get a header which also cuts some of the text of.

Tags work from the right sidebar, but are broken on the document

On site: https://www.sendthemtomir.com/

On the right under Popular Tags we have food that correctly links to https://www.sendthemtomir.com/tag:food. The tag for food on the left content column incorrectly links to https://tag:food

Menu with placeholder directories contains non-existing links

This probably affects all the themes:

• Create empty directory user/pages/02.placeholder (where 02 is replaced by the order)
• Under that directory create existing page under 01.submenu

Now refresh the site and click on Placeholder menu item.

You will get 404 error page.

Solution: in the menu, check page.isPage() before adding the links (there are multiple places).

Antimatter: The little menu icon is late appearing when shrinking the window size

I have quite a few menu headings that stretch across the top of the page.
When I reduce the page size, the normal menu doesn't reduce to the menu icon soon enough – the whole of the normal menu disappeared.
When reduced even further, the menu icon does appear and the normal menu disappears. this happen between the screen width of 960px and 1199px, which no menu toolbar or menu icon can be found.
How can I make it that the normal menu disappears as soon as the left most item in the normal menu bumps into the logo/site title?
Screenshot.pdf

Single Page Menu missing in Hamburger Menu

to reproduce:

• visit a modular page with "onpage_menu: true" e.g. http://demo.getgrav.org/onepage-skeleton/
• resize your browser so the top navigation/menu becomes a hamburger button
• click hamburger

should:

• the opened menu should show the same navigation as the not collapsed one (anchor links to navigate the single page site)
• the global menu should remain hidden

is:

• the opened menu shows the global menu

Multisite configuration

antimatter.yaml

streams:
  schemes:
    theme:
      type: ReadOnlyStream
      paths:
        - user/themes/antimatter

these lines causing issue when you trying configure multisite config.
getgrav/grav#627

Hidden under header/menu navigation bar

When clicking a bookmark or using the simple search, the anchor is scrolled into view but in the top-left corner of the browser window. Typically hidden under the header/menu-nagivation bar.
Issue on Win7 64bit IE 11.0.17, FF 37.0.1 and Ubuntu 15.04 FF 38.0, Chromium 41.0.2272.76

Pagination missing?!

Hey guys,

again an obvious issue but pagination does not work for me because... there is no file in partials which can be included?! (pagination.html.twig)
https://github.com/getgrav/grav-theme-antimatter/blob/develop/templates/blog.html.twig#L27

Bug in Menu Linking

If you download and install Grav; don't change any settings. Then under pages create a new folder called “02.blog”; then upload a file called “blog.md” (wherein the page is also titled “Blog” in the header text); then the clear-cache and refresh the home page so the new page shows in the menu.

Here is where it gets interesting … browse to the new “Blog” page and check the link under the current “GRAV” logo. Clicking on the GRAV logo It is suppose to take you to the root page (home in this case), but instead it wants to take you to the “Blog” page which is your current location.

I've tested this with other pages and it seems to only be a problem when the uploaded page is named “blog.md”.

Broken tag urls in blog items

File: templates/partials/blog_item.html.twig.
Template generates tag url like <a href="//tag:howto">howto</a>. You may need to fix the line L27 from

<a href="{{ blog.url }}/tag{{ config.system.param_sep }}{{ tag }}">{{ tag }}</a>

to

<a href="{{ base_url }}/tag{{ config.system.param_sep }}{{ tag }}">{{ tag }}</a>

slidebars.js

slidebars.js is actually 0.10.2
a version 2.0.2 is available here
it's given as a complete rewrite
thanks in advance

Dark Theme

Would it be possible to at some point get an optional dark theme version of this?

Meta charset missing

Meta charset is missing by default.

Simple question : small screens, why a sidebar ?

Hi,
This was a side question of getgrav/grav-skeleton-onepage-site#9 that I'm asking here because it's more appropriate.
I was wondering if the sidebar menu on small device is a deliberate UI choice by design ?

I'm not feeling so comfortable with the hamburger icon on the right and sidebar which opens on the left... But only a matter of personal taste.

More often, on modern website I find menu on top as a dropdown when clicking/tap the hamburger. That's the case for most of grav's themes available....So I'm curious to know :)

Thanks !

ERR_ICANN_NAME_COLLISION on page 2

I have a fresh Grav blog skeleton install using the default antimatter theme. Clicking on the pagination navigation at the bottom to go to page 2 leads to an error page.

The url for the link is malformed. It's just page:2 without the baseUrl part.

I just downloaded the skeleton a few minutes ago, so I assume it is completely current.

navigation below navbar

Too many top level menu items (in my instance 5) push the navigation below the navbar.

Declared language should not be hard coded

The declared language of a page is hard coded to en:

<html lang="en">

See file /templates/partials/base.html.twig

However, it should match the actual language. For example, create a page in two languages (say item.en.md and item.fr.md) and install the plugin LangSwitcher. When visiting this page and clicking Français in the lang switcher menu, the declared language should be <html lang="fr">, not <html lang="en">.

"Previous Post" and "Next Post" in the wrong order

Hi,

"Previous Post" and "Next Post" are in wrong order in templates/partials/blog_item.html.twig

I tried to clone the repository and push the changes, but I guess my knowledge of Git is too limited.
I cloned, added the file, commited, but when I tried to push it rejected me.

Thanks,
Javier

Update to font awesome 4.6.3

Hello, can you guys update to font awesome version 4.6.3 ? Thanks !

Pagination and Taxonomy List Problem?

Is there a problem with the baseurl for Pagination and the Taxonomy List in theme ANTIMATTER? When the page Blog is used as the homepage, the pagination url seems to be wrong: /grav/page:2 instead of /grav/blog/page:2.
And also the Taxonomy List URL's are wrong: /grav/tag:support instead of /grav/blog/tag:support

FontAwsome is out of date

Some icons didn't appear and it transpired antimatter is using an old version. I just copied the new versions over the old files and it worked.

breadcrumb styling issue

the last arrow should not be showing, please see pic.

this is not an issue when using the bootstrap theme.

callouts can clash

put two modular/text items next to each other and the picture from one can drop into the other causing a clash.

here's the fix i made here:

// variables                                 =  // variables
$text-bg:        #f6f6f6;                       $text-bg:        #f6f6f6;
------------------------------------------------------------------------
$text-padding:   6rem;                       <> $text-padding:   4rem;
------------------------------------------------------------------------
$image-margin:      2rem;                    =  $image-margin:      2rem;


// styling                                      // styling
.callout {                                      .callout {
    background: $text-bg;                           background: $text-bg;
    padding: $text-padding $content-padding;        padding: $text-padding $content-padding;
------------------------------------------------------------------------
                                             -+     overflow: auto;
------------------------------------------------------------------------
    @include breakpoint(desktop-only) {      =      @include breakpoint(desktop-only) {
        text-align: center;                             text-align: center;
    }                                               }

    .align-left {                                   .align-left {
        float: left;                                    float: left;
------------------------------------------------------------------------
------------------------------------------------------------------------
            margin-right: 0;                 =              margin-right: 0;
        }                                               }
    }                                               }

    .align-right {                                  .align-right {
        float: right;                                   float: right;
------------------------------------------------------------------------
                                             -+         clear: both;
------------------------------------------------------------------------
        margin-left: $image-margin;          =          margin-left: $image-margin;
        @include breakpoint(desktop-only) {             @include breakpoint(desktop-only) {
            float: none;                                    float: none;
            margin-left: 0;                                 margin-left: 0;
        }                                               }
    }                                               }
    img {                                           img {
        border-radius: $border-radius;                  border-radius: $border-radius;
    }                                               }
}                                               }
------------------------------------------------------------------------

rendering of characters

Hi guys, not sure if this is a theme issue of font issue.

It seems that the characters are displayed properly in English/Spanish but not in Romanian. They seem narrower, unbolded weird when rendered both in chrome and safari.
Could this be due to the font used?

Header disappears, when opening sidemenu

To reproduce:

• make viewport just small enough for the hamburger button to appear in the header
• scroll down the page, so the header changes
• click hamburger

what happens:

• the header bar disappears (without animation).

tested in chrome.
It has something to do with the transform of the body

see also: adchsm/Slidebars#29

pure-g class missing parameter for mozilla browsers

to reproduce if possible:

when using Mozilla browser, pure-g flex box design is not output.

can simply be fixed by adding css;
.pure-g { display: flex; }

surprising!

Rendering of paragraphs with different sizes

Hi guys,
i ran into this issue somehow and I am not sure why.

i write and format articles using MacDown - copy the folder to grav/user and the article is live.

however it seems a random thing that rendering of the articles (most of them anyway) will have the following issue

• first paragraph font-size is size 16
• second paragraph font-size is size 18/20
• all the remaining paragraphs font-size are size 16

(where the font-size is guestimated)

Not sure if this has anything to do with the Romanian language being rendered (we have a few different characters glyphs) or is just a setting within the antimatter css somewhere.

"Continue Reading..." displayed even when no summary is used

Currently, the "Continue Reading..." link is displayed no matter if summaries are enabled, disabled, or enabled but not needed on the blog list for each item. I don't think it makes much sense to display the link when summaries are disabled or the content is less than the size of the summary.

For instance, I'm not sure it makes sense to display the "Continue Reading..." link if the blog item itself is only 1 line and a handful of characters as that's the entire item and there's nothing else to read.

I think the link should probably only be displayed if summaries are turned on and the article length is more than the max summary length.

I believe a fix might be moving this line to line 55, only displaying when the summary is being shown.

SCSS inheritance/extensibility -- fix for variables

The current SCSS scheme allows for easy extensibility (and also inheritance) through template/_custom.scss. However, this is insufficient for variables that are defined in e.g. the template configuration files -- SCSS apparently sticks with the first value for any variable it encounters. I haven't had much time to look into this, but the fix should be to add

// Load Custom Config
@import "configuration/template/custom";

as the first or second item in template.scss, which should enable the user to override the config variables inside configuration/template/_custom.scss

Please add styles for dropdown navigation

Why the javascript block is not at the end of the page on base.html.twig ?

Grav and the antimatter theme are very optimized and load fast but there is still render blocking scripts.

Why not moving the {% block javascripts %} in the {% block bottom %} ?

Preview works, but full page view is a mess

https://www.sendthemtomir.com/blog/ping-times-to-google

protect dropdown menu links on procted site

If you're setting up a protected site with subpages and enabling the dropdown menu for those subpages the drop down menu(links to subpages) is also shown when you're not logged in. It would be better if the dropdown menu is also hidden when the parent page is protected.

Style guide?

Perhaps I just missed it, but is there some kind of style guide for the classes and such, ala bootstrap?

I'm trying to build a custom template using this theme and having trouble figuring out what styles I have available and what they do?

Thanks!

Loading mixed (insecure) display content

When I access my page with https:// firefox complains about loading a non http file:
Loading mixed (insecure) display content "http://www.mypage.com/user/themes/antimatter/images/favicon.png" on a secure page[Learn More]

Text underneath menu banner when clicking footnote return (↩)

In order to use Markdown footnotes, my user/config/site.yaml includes the setting:
markdown_extra: true

When I click the ↩ for a given footnote, it scrolls upwards, but the text is now beneath the menu banner. I see this behavior on both Safari and Chrome browsers, on a Mac.

Font awesome in modular onpage menu

I tried to set "icon" parameter for one of modular subpages to display font-awesome icon, but it didn't work.

I tried to hotfix the .../antimatter/templates/modular.html.twig with following code but unsuccessfully

`

{% if page.header.icon %}{% endif %}
{{ module.menu }}

`

May be there is a quick way to make it work?

Thanks

It should be possible to customise the titles in the sidebar

eg "SimpleSearch" and "Some Text Widget". strings from the config file?

Scrolled Nav-bar link changing size

I have changed the title with my own. Also I have added a logo when scrolled to appear with the site title as per the picture

The issue appears when scrolling - the clicking area of the logo/site title seems to be changing size to a really small clickable size as per the picture (only these letters

any ideas how to fix it ?

dropdown is not working.

i enabled the dropdown and created a subpage with gravcms.
if i look in the source code i only see the items from the main menu...

Redundant option?

7c8c12e introduced the option to set the default language. Isn't this redundant?

If translations are not enabled, the site is in english. Otherwise if the site is not in english, you need to set your site language in the system settings.

The code

<html lang="{{ grav.language.getLanguage ?: 'en' }}">

should work in all cases, and should be used by all themes, removing the need of a separate setting.
I added it to Learn2 for example: getgrav/grav-theme-learn2@08e619b

Thoughts?

optional callout image link

i wanted an optional link for the modular/text called "image_link". here's my code.

grav-theme-antimatter\templates\modular\text.html.twig

<div class="modular-row callout">                                                    =  <div class="modular-row callout">
    {% set image = page.media.images|first %}                                               {% set image = page.media.images|first %}
    {% if image %}                                                                          {% if image %}
------------------------------------------------------------------------
                                                                                     -+         {% if header.image_link %}
                                                                                                  <a href="{{header.image_link}}">
                                                                                                {% endif %}
------------------------------------------------------------------------
        {{ image.cropResize(400,400).html('','','align-'~page.header.image_align) }} =          {{ image.cropResize(400,400).html('','','align-'~page.header.image_align) }}
------------------------------------------------------------------------
                                                                                     -+         {% if header.image_link %}
                                                                                                </a>
                                                                                                {% endif %}
------------------------------------------------------------------------
    {% endif %}                                                                      =      {% endif %}
{{ content }}                                                                           {{ content }}
</div>                                                                                  </div>
------------------------------------------------------------------------

Broken blog layout on browsers without flexbox support

I noticed on my smartphone (Nokia N9) that I can't access the right column in http://getgrav.org/blog or the antimatter blog skeleton site in general.
The main column takes full screen width as intended, but the sidebar stays outside the right screen edge and doesn't wrap below the main content. To make matters worse, the viewport-meta prevents horizontal scrolling, so the contents of the sidebar are inaccessible on many mobile devices.

According to http://www.crossbrowsertool.com/ (just run it on http://getgrav.org/blog), there are still a lot of browsers showing similar behaviour, especially on mobile devices. (And nothing is more frustrating than a "pseudo" optimized-for-mobile webpage were you have to make your smartphone mimic a Desktop browser in order to view all page content)

Digging into the code I found that you rely on the CSS flex property to do the responsive layout with Nucleus' .block and .size-* classes.

The 3rdparty pure-0.5.0/grids-min.css is included only for IE 8+9 as a workaround, so the sidebar's .pure-u-* do nothing in any other browser (wich got me a little confused during my initial debug attempts).

While looking for a possible solution, I also found that the .pure-g-r class (e.g. in blog.html.twig:30) is without effect and defined nowhere in the template, even when grids-min.css is loaded. (The Pure Release Notes say it was deprecated in 0.5.0., scroll down to "Removing .pure-g-r")

A possible solution might be to use modernizr.js to check for flexbox support and (transparently, so you don't have to care in the .twig's) decide between Nucleus Grid and Pure Grid?

Please add tools for concatanating js&css

Who can add a tools to combine many files into one. This helps to reduce the number of HTTP requests, which is great for front-end performance. It also allows you to maintain the files more easily by splitting them into manageable parts. This can help with re-usability as you can easily split project-specific files from those which can be used in other applications, but still serve them as a single file. Somsing like this:

javascripts( array( '@AppBundle/Resources/public/js/*', '@AcmeBarBundle/Resources/public/js/form.js', '@AcmeBarBundle/Resources/public/js/calendar.js', ) ) as $url): ?>

<script src="<?php echo $view->escape($url) ?>"></script>

{% javascripts
'@AppBundle/Resources/public/js/*'
'@AcmeBarBundle/Resources/public/js/form.js'
'@AcmeBarBundle/Resources/public/js/calendar.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
taken here: http://symfony.com/doc/current/assetic/asset_management.html

sidebar

when you scroll a large site and hit the menu button in mobile view you can't see the menu.

.sb-slidebar.sb-static, html.sb-static .sb-slidebar {
position: absolute
}

position: fixed

solved the problem.

Regression: Can't scroll on mobile (my bad)

My commit 543a0cd seems to completely disable vertical scrolling on (at least some) mobile browsers, which is of course a real show stopper. Sorry for not noticing that earlier.

According to a StackOverflow answer it seems to be the combination of height: 100% and Siidebar's overflow-x: hidden on html and body. (Which is strange, since overflow-x should not interfere with vertical scrolling).

I managed to overcome the issue by adding even more override !important rules (see my branch), but this neither makes the code more beautiful nor is tested for any other regressions it might cause.

So maybe it would be cleaner for now to just revert 543a0cd (and 17c9d1a) until I find another solution to get my 100%-high elements on page.

modernizr (newer version available)

modernizr is actually 2.7.1
a 3.3.1 version exists for the same build here
Thanks in advance