GithubHelp home page GithubHelp logo

pmoreno-rodriguez / grav-theme-future2021 Goto Github PK

View Code? Open in Web Editor NEW
19.0 2.0 10.0 25.74 MB

Future Imperfect theme by HTML5UP ported from scratch to Grav. Version 2021

License: Other

PHP 0.21% Twig 27.17% CSS 34.76% JavaScript 5.95% SCSS 31.90%

grav-theme-future2021's Introduction

Future Theme for Grav CMS

Future Imperfect theme by HTML5UP ported from scratch to Grav. Version 2021

future_screenshot

Future Imperfect by HTML5UP, features a clean, minimalistic design, styling for all basic page elements and HTML5/CSS3 code designed for quick and easy customization.

If you enjoy this theme, please consider sponsoring:

Buy Me A Coffee

Features

Redesigned from scratch (version 2021)

  • HTML5 and CSS3
  • Fully Responsive
  • Microdata for blogs
  • ARIA accessibility conformance
  • Various templates for presenting your content
  • Full dropdown menu integrated in menu bar and sidebar.
  • Styling for all basic page elements
  • Styling for various modules
  • Cross browser compatible
  • Sharing buttons for Facebook, Twitter, Whatsapp and Telegram.
  • Top content pages in sidebar
  • Fully responsive with full-page mobile navigation
  • SCSS based CSS source files for easy customization
  • Blueprints for Footer, Slogan and Social icons.
  • Full Portfolio template with Glightbox library
  • Ready to work with Archives, Breadcrumbs, Editable with Contenttools, Feed, Langswitcher, Maintenance, Reading time, Related pages, Twig extensions, Simplesearch and Taxonomylist.

Supported Page Templates

  • Default view template default.md
  • Error view template error.md
  • Blog view template blog.md
  • Blog item view template item.md
  • Portfolio view template
  • Form view template form.md
  • Modular view templates: modular.md
    • Features Modular view template features.md
    • Banner Modular view template banner.md
    • Contact Modular view template contact.md
  • Owlcarousel template
  • Recent posts partial template
  • Related posts partial template

Installation

Installing the Future 2021 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.

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 future2021

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

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 future2021. 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/future2021

Default Options

Future2021 comes with a few default options that can be set site-wide. These options are:

production-mode: true         # In production mode, only minified CSS is used. When disabled, nested CSS are enabled
sidebar:                      # Enable/Disable sidebar in non-editable pages such as simplesearch results, offline, etc.
google_fonts_local:           # Option to load Google Fonts from the theme or from Google servers.
favicon:                      # Choosse your own favicon
custom_logo:                  # A custom logo rather than the default (see below)  
custom_logo_mobile:           # A custom logo to use for mobile navigation
type_logo_header:             # Choose how the logo is displayed in header. Options: Image, Text or Both
slogan:                       # Custom text for slogan
menu_langswitcher:            # Enable/Disable langswitcher icon in menu (langswitcher plugin needed)
menu_search:                  # Enable/Disable search icon in menu (simplesearch plugin needed)
menu_login:                   # Enable/Disable login icon in menu
blog-page: '/blog'            # The route to the blog listing page, useful for a blog style layout
miniposts:                    # Enable/Disable miniposts in left sidebar
miniposts_category:           # Select category name for miniposts (configured in taxonomies)
miniposts_number:             # The number of mini posts will be displayed on the left sidebar
recent_posts_enabled:         # Enable/Disable recent posts in left sidebar
recent_posts_number:          # The number of recent posts will be displayed on the left sidebar
footer.title:                 # Footer block title in left sidebar
footer.description:           # Footer block description in left sidebar
footer.copyright_text:        # Footer block copyright text in left sidebar
footer.button_text:           # Footer block button text in left sidebar
footer.button_url:            # Footer block button url in left sidebar
enable_social:                # Enable/Disable social icons in footer
social_style:                 # Select the style for Fontawesome icons
custommenus.enabled:          # Enable/Disable custom menus in top menu

To make modifications, you can copy the user/themes/future2021/future2021.yaml file to user/config/themes/ folder and modify, or you can use the admin plugin.

NOTE: Do not modify the user/themes/future2021/future2021.yaml file directly or your changes will be lost with any updates

Custom Logos

To add a custom logo, you should put the log into the user/themes/future2021/images/logo folder. Standard image formats are support (.png,.jpg, .gif, .svg, etc.). Then reference the logo via the YAML like so:

custom_logo:
    - name: 'my-custom-logo.png'
custom_logo_mobile:
    - name: 'my-custom-mobile-logo.png'    

Alternatively, you can you use the drag-n-drop "Custom Logo" field in the Future2021 theme options.

Portfolio Options

Option Type Default Description
openEffect string zoom Name of the effect on lightbox open. (zoom, fade, none)
closeEffect string zoom Name of the effect on lightbox close. (zoom, fade, none)
slideEffect string slide Name of the effect on slide change. (slide, fade, zoom, none)
moreText string See more More text for descriptions on mobile devices.
moreLength number 60 Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description.
closeButton boolean true Show or hide the close button.
touchNavigation boolean true Enable or disable the touch navigation (swipe).
touchFollowAxis boolean true Image follow axis when dragging on mobile.
keyboardNavigation boolean true Enable or disable the keyboard navigation.
closeOnOutsideClick boolean true Close the lightbox when clicking outside the active slide.
startAt number 0 Start lightbox at defined index.
width number 900px Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width
height number 506px Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vh For inline elements you can set the height to auto.
descPosition string bottom Global position for slides description, you can define a specific position on each slide (bottom, top, left, right).
loop boolean false Loop slides on end.
zoomable boolean true Enable or disable zoomable images you can also use data-zoomable="false" on individual nodes.
draggable boolean true Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable="false" on individual nodes.
dragToleranceX number 40 Used with draggable. Number of pixels the user has to drag to go to prev or next slide.
dragToleranceY number 65 Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag).
dragAutoSnap boolean false If true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released.
preload boolean true Enable or disable preloading.

Downloads template

Future2021 theme includes a simple template to manage downloads of files uploaded to a page. These files are automatically found and processed by Grav using page.media.all and displayed in a table with four columns: name, size, modification date and download button.

Demo page

https://future2021.pmdesign.dev

Documentation

You can read extra documentation of Future2021 Theme at https://pmoreno-rodriguez.github.io/#/./gravthemes/future2021/index. This is Spanish document site for Future2021 Theme

Future plans

  • Create a Flex Directory for authors and avatars.

grav-theme-future2021's People

Contributors

pmoreno-rodriguez avatar pikim avatar gigago avatar mjz68 avatar

Stargazers

Simon Weiss avatar James <Mr. Squirrely> avatar  avatar  avatar  avatar  avatar Markus Frei avatar Thalyn avatar DrDroid avatar Jordán Pérez avatar Aitor Arozamena avatar Roman avatar abel avatar Matthias Penke avatar Vinceslas L. avatar Hugh Barnes avatar May Kittens Devour Your Soul avatar Bagheera Tomahawk avatar

Watchers

 avatar  avatar

grav-theme-future2021's Issues

Can't disable social icons completely

This happens on 1.0.1 and 1.0.2 as well.
Setup: Grav v1.7.37.1 with Admin v1.10.36 in a Docker container.
Go to Themes -> Future 2021 configuration page.
Under social icons, when deleting all social icons, all of them (Twitter, FB, Instagram) will reappear.
Leaving just one is the least worse case if you not plan to use any social icons.

Logo in image format to be implemented in the header

Hi Pedro,

One nice nice-to-have improvement for the Future2021 template would be for users to be able to add a custom .jpg/.png version of a logo in the header of the website. See below where exactly I am referring to:
image

The idea is that logo image maintains the same clickable properties as the text currently does.

Thanks a lot

Donation BuyMeACoffee

Hey,

thanks for adding the donation button. I tried using that service, however there seem to be a issue with the payment and I always get an error.

For 1 time only, could you share your paypal.me link with me, so I can donate using paypal?

Faulty heading formatting

Hi, great theme.

H1 (#) is rendered smaller than H2 (##). I found that in main.css there is no size given for h1. Adding a style definition for h1 = 1.3em there doesn't change anything. I also changed it in main.css.min without success.

Commenting out the uppercase style for Hx is working.

Tested on actual Firefox and Chrome on Debian 12.

Your theme 'Editorial' behaves as expected as well as 8 other themes I tested.

Best
Nikolaus

Issues with login

When logged in and still on the login status site, it's not possible to open the menu. This is because

{% block menu %}
  {% include 'partials/sidebar_right.html.twig' %}
{% endblock %}

is missing in partials/login-status.html.twig.

On the other hand when you log out and goto the login site again, there is a message saying that you were successfully logged out.

Suggestion: add a crossmark to close the side menu

When you click on the burger menu at the top right, the button (the icon with the 3 slices) disappears, hidden by the menu that appears sliding from the right. To close the menu you have to move the cursor and click on the page.

From an ergonomic point of view, I think it would be more comfortable if the icon of the burger menu became a crossmark, to allow closing the menu in a more intuitive way and without having to move the cursor. To illustrate the idea: https://codepen.io/erikterwan/pen/EVzeRP

Unfortunately I don't have the necessary skills to modify the code and suggest a solution.

Improve Portfolio customization

Hi Pedro,
would it be possible to add more options to the portfolio, for example I don't want and don't need OWL, but I would like to add combos of blocks to customize columns, and lines below I share the link of an example of the layout I'm putting together, but I wanted to use the future2021 template.

Blocks I'd like to create:
Minicases (like miniposts)
Portfolio Cases
    Layout in 3, 4 and 6 columns
    Blox with title, background image and pilltags
Portfolio Case
    Title
    pilltags
    Client Name (link and icon)
    Period (text input)
    Case link (if have link show)
    My role on case (textearea block)
    
    Modular block
        Add section (after add 1, could be added more and than create new lines)
            Title
            Description
            Background image
            Add sub section (after add 1, could be added more and than create a new columns)
                Title
                Description
                Cover image
                Add List options (if added more than 1, create a UL list on layout)

My based idea is here.

Demo site

Not a big deal. But, the demo site link in the admin panel of grav should probably be changed or redirected?
Feel free to close this ticket anytime you feel like it.
Have a wonderful day :)

image

How to properly delete the right toolbar ?

Hello,

I'm trying to remove the menu on the right especially the login form from the template.

I didn't figure it out how to do this properly without deeply changing the core / theme.

The option menu_login: false doesn't work.

Do you have a proper solution ?

Thanks.

Screenshot_20230830_112405

Screenshot_20230830_1124108

Snippet from :

user/config/themes/future2021.yaml

Screenshot_20230830_112533

Social Icons not visible

The Social Icons are not visible while being in html code (see picture) but with a size of 0. (Both in Sidebar mode as well as in normal footer). I also tried to add the social icon in the header to cross-check but there one out of the two sizes is 0 as well.
This is on a fresh Grav installation without any plugins or changes to the template.

image

Width issue

Hello!

I am building a rework of my blog with your theme. Everything is great so far, but I have one issue.

On my macbookpro I have a article which is behaving like this:

image

while all other posts look like

image image image

I have no idea how to debug this, but I am sure its the content width (since its the biggest post, with loads of codeblocks, long sentences etc.).

Maybe its because my "featured" posts doesnt have images?

This was on 1.0.5, I tested 1.0.6 with demo data (had the demo data on 1.0.5 too) and it doesnt happend there.

I am an absolute noob in anything css/template related.
Can you could help me?, your next beer is on me for sure! :)

Miniposts Template uses page object, instead of minipost object to parse date

See here:

https://github.com/pmoreno-rodriguez/grav-theme-future2021/blob/develop/templates/partials/miniposts.html.twig#L35-L39

{% if config.plugins["translate-date"].enabled %}
            <time class="published" itemprop="datePublished" datetime="{{ page.date|td(null, "Y-m-d") }}">{{ page.date|td(null, "M j, Y") }}</time>
          {% elseif config.plugins["twig-extensions"].enabled %}
            <time class="published" itemprop="datePublished" datetime="{{ page.date|localizeddate('medium', 'none', lang) }}">{{ page.date|localizeddate('medium', 'none', lang) }}</time>
          {% else %}
            <time class="published" itemprop="datePublished" datetime="{{ page.date|date("Y-m-d") }}">{{ page.date|date("M j, Y") }}</time>
          {% endif %}

instead of page should simply use p from

{% for p in page.evaluate({'@taxonomy.category':miniposts_category}).order('header.order', 'asc').slice(0,miniposts_number) %}

https://github.com/pmoreno-rodriguez/grav-theme-future2021/blob/develop/templates/partials/miniposts.html.twig#L11

Missing |raw Twig filter in simplesearch_item.html.twig

In order to render images in search results, I had to modify in simplesearch_item.html.twig

{% if banner %}
    <div class="search-image">
        <a href="{{ page.url }}">{{ banner }}</a>
    </div>

into

{% if banner %}
    <div class="search-image">
        <a href="{{ page.url }}">{{ banner|raw }}</a>
    </div>

Brilliant theme

Hi

I really like your theme and I'm using it here - https://soundscapes.woollypigs.com/

Made a few edits to fit my needs.

Though for the life of me I can't figure out how to get post into the Featured/minipost on the left handside on the front page.

Any hints is much appreciated, thanks.

SMC

Sticky menu for blog posts

Is a sticky menu planned? ie. left for long blog posts
Like the mini-post sidemenu, but stickied, and with information from the post, like "table of contents"

Demo content request

Hello out there,
I hope this finds you in good health.
I don't really get behind the structure yet. Is it possible that you can share your demo content and your requirements? It doesn't matter that it's in Spanish.
Best regards from Berlin

Issues with breadcrumbs and pagination in blog

          Thank you so much - I'll try using SVG format unril new version (also it would be nice if the images scaled to the same height - just a suggestion for future improvement) :)

However, on my website, the pagination on the blog doesn't show even when I have more than five articles. The first few articles don't show up (breadcrumbs also do not show). :/

Originally posted by @Misha-N in #31 (comment)

Installation results in an error

Tried to install theme via bin/gpm install future2021

Got the following error
/home/robertso/moko-papa.nz/grav/user/themes/future2021/templates/partials/taxonomylist.html.twig

{% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags() : taxonomylist.get() %}

{% if taxlist %}

  • {% for tax,value in taxlist[taxonomy]|sort %} {% set active = uri.param(taxonomy) == tax? 'active' : '' %} {{ tax }} {% endfor %}
{% endif %}

Arguments

"The sort filter only works with arrays or "Traversable", got "NULL"."

I have not had a lot of time to look into it - tried commenting out the template, but no luck. Might be able to look on a better machine later.

Remove the menu 'hamburger' from the top bar

I have looked everywhere in the settings and cannot find anyway to completely remove the menu from displaying. I am not using and it shows as empty, but I want to completely remove it. Is this possible?

HTML/CSS bugs

Hello I found some bugs in HTML/CSS in new version.
In Blog page - share options are displayed as list and missing:
border-left: solid 1px rgba(160, 160, 160, 0.3);
display: inline-block;
font-size: larger;
font-weight: 400;
margin: 0 0 0 1em;
padding: 0 0 0 1em;
text-transform: uppercase;

also I was also not able to hide "image featured" in feature page block - it display one big image every time.

suggestion

hello

not an issue, but suggestion

could you maybe make main container to have option to be set narrower?
like to have option for us to choose width of it. or you know just have some size modifiers

2023-11-05 08 38 05 getuikit com 9a16077ece5a

*image is for illustrative purposes

No Sidebar with demo files.

future

I am not sure why I dont have the left sidebar at all. It all seems off without it.
I just installed the theme over grav theme installer, than deployed _demo/pages into pages and _demo/config into config.

I am new to grav but checked it several times and checked with other themes but I cant get this one to work.

Cannot show any entry inside the "Featured" section

Hello, maybe this is a dumb question but I cannot manage to show anything inside the left sidebar "Featured" section.
I've read the docs and couldn't end up with anything useful.
The Theme settings tips are a little misleading to me.
Can you please specify how to get that feature working?
Thanks and congratulations for the awesome job in developing this gorgeous theme.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.