No clear instructions about CSS grid

[olivierdalang]

Hi !

I need to develop a custom modular with a specific responsive layout.

I didn't find clear information about what I'm supposed to use. From what I understood, Antimatter includes Nucleus, a custom CSS grid, and Pure-CSS.

But it seems both of them are not complete, as they don't really include breakpoints classes. This simple example from Pure-CSS doc doesn't work :

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

It seems pure-u-md-1-3 class doesn't exist.

Also looking at source, it seems like Nucleus doesn't allow this either. I don't really get how this is thought, especially since the feature and highlights modulars include nice responsive breakpoints.

Would it be possible to ship the whole Pure-CSS with antimatter ? Or to give a few points about how to achieve custom responsive layouts ? I think since Antimatter is the default Grav theme, it should really try to be as extensible as possible.

Thanks !!

Olivier

[hughbris]

I am also noticing this with class="pure-u-1 pure-u-md-1-2". Inspector shows the browser applying the class pure-u-1 only so I get no columns on medium screens and higher.

I am pretty sure this used to work, though grepping this repo for "pure-u-md" returns nothing.

[hughbris]

The Pure button classes e.g. pure-button don't seem to work under Antimatter either. I am starting to think we are missing something.

[hughbris]

OK this issue may not get much attention from the maintainers. For what it's worth, I found a workaround.

I've noticed this theme uses a quite old version of PureCSS and that that version does not seem to include responsive grid, forms, buttons, etc modules.

I'm slightly confused by the PureCSS documentation about exactly which modules are required for certain functionality, but the basic idea is to amend the default template (using an inherited theme) by extending the base template, and then make every template you use on your site embed that default template. The other important change is to use the latest PureCSS by referencing their CDN.

Example

mytheme/templates/default.html.twig:

{% extends 'partials/base.html.twig' %}

{% block stylesheets %}
    {# use whichever modules you need from https://purecss.io/customize/#individual-modules
        or a rollup from https://purecss.io/customize/#rollups - I think that's how it works :/ #}
    {% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/base-min.css', 103) %}
    {% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', 103) %}
    {% do assets.addCss('theme://css-compiled/nucleus.css', 102) %}
    {% do assets.addCss('theme://css-compiled/template.css', 101) %}
    {% do assets.addCss('theme://css/custom.css', 100) %}
    {% do assets.addCss('theme://css/font-awesome.min.css', 100) %}
    {% do assets.addCss('theme://css/slidebars.min.css') %}

    {% if browser.getBrowser == 'msie' and browser.getVersion == 10 %}
        {% do assets.addCss('theme://css/nucleus-ie10.css') %}
    {% endif %}
    {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
        {% do assets.addCss('theme://css/nucleus-ie9.css') %}
        {% do assets.addJs('theme://js/html5shiv-printshiv.min.js') %}
    {% endif %}
{% endblock %}

Then any other templates you use should embed that default template and could add additional PureCSS modules required. For example, if I have a form page template in my theme, it might look like:

mytheme/templates/formcover.html.twig:

{% embed 'default.html.twig' %}
    {# … any custom blocks #}

    {% block stylesheets %}
      {{ parent() }}
      {% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/forms-min.css', 103) %}
    {% endblock %}
{% endembed %}

Works for me. I hope it's helpful to you or someone else :)