rafaoski

Modern Site Profiles

Recommended Posts

I would like every new Site Profile like new REGULAR Profile to have modern support for quick creation like browser sync, minify css, js . Something on the style below:

https://foundationpress.olefredrik.com/

https://understrap.com/

One profile that does not have any CSS frontend attached but has the features needed to quickly add eg pagination, comment form, or site menu something like:

https://roots.io/sage/

OR

https://laravel.com/docs/5.5/mix

I'm not very godd with js but webpack.js meybe is good for this solution ... I would like to know what advanced users in the front end think about this combination and what would be the best ...

 

Share this post


Link to post
Share on other sites

I'm not sure of the likely hood for a default site profile including these. Minify CSS/JS is included in AIOM and ProCache - I don't think this will make it's way to the core. There is a UIKit Site Profile which is using - https://getuikit.com

Am I miss understanding your question? 

  • Like 2

Share this post


Link to post
Share on other sites

As much as I like the idea of including more with the site profiles, I feel like a lot of these are user specific. I rather like the fact I can quickly add in what I need based on the project scope. I actually have a folder with a few dependencies (slideshows, data tables, grids) that I just copy over to a new install and can get up and running quite quickly. 

  • Like 1

Share this post


Link to post
Share on other sites

@rafaoski, do you know about the Site Profile Exporter module? You can make your own profile (or edit an existing one) and add in whatever technologies you want, then export it and use it for new PW installs.

I'm not sure why any of the things you are requesting need to be connected with the PW core as everyone's preferences are different.

When it comes to profiles that are bundled with the core I'd like the number to reduce (to, like, 1 maximum) because for me I never use them and it's just unnecessary megabytes that have to be downloaded and unpacked with every new core release. Currently nearly half the size of the PW downloadable core is made up of site profiles that for some users (most?) will just be immediately deleted.  I'd rather see each "official" profile in it's own GitHub repo where they can be downloaded only if needed.

  • Like 7

Share this post


Link to post
Share on other sites

Hello @Robin S In general, the simplest stack gulpfile.js + package.json is about 5kb in size, its not a big file, and it speeds up front-end frameworks.
I like the new UIKIT Starter and I would like to be able to edit it quickly with these tools without learning how to properly connect them to the profile.
Processwire is not only a framework for PHP developers, but there are many who are faced with the front end.
Note that the new users would like to see what Processwire can do and without Profiles it will not know anything else.
The new ones will not know how to add a profile to the Processwire installer, and not everyone will go to the Processwire forum to find out more.

You mentioned the reduction of the core and I agree with you 100% to throw out the profile but you could add an installer that gets profiles from github like the October CMS that can install automatic templates. I do not know if it's possible in Processwire (I know the basics of PHP but no more to create a new Download System).

And this profile above I created using ProcessExportProfile, which works great, I made it for new users who might have installed it sometime and discover it that in addition to Wordpress, Joomla and Drupal is also ProcessWire ( Except that they need to know how to add to the installer ).
I would like more developers and regular users to notice Processwire. But maybe the change I wanted was not the best way. Thanks to Robin for your point of view.

  • Like 2

Share this post


Link to post
Share on other sites
30 minutes ago, rafaoski said:

Hello @Robin S In general, the simplest stack gulpfile.js + package.json is about 5kb in size, its not a big file, and it speeds up front-end frameworks.
I like the new UIKIT Starter and I would like to be able to edit it quickly with these tools without learning how to properly connect them to the profile.
Processwire is not only a framework for PHP developers, but there are many who are faced with the front end.
Note that the new users would like to see what Processwire can do and without Profiles it will not know anything else.
The new ones will not know how to add a profile to the Processwire installer, and notice that not everyone will go to the Processwire forum to find out more.

You mentioned the reduction of the core and I agree with you 100% to throw out the profile but you could add an installer that gets profiles from github like the October CMS that can install automatic templates. I do not know if it's possible in Processwire (I know the basics of PHP but no more to create a new Download System).

And this profile above I created using ProcessExportProfile, which works great, I made it for new users who might have installed it sometime ago and discover that in addition to Wordpress, Joomla and Drupal is also ProcessWire ( Except that they need to know how to add to the installer ).
I would like more developers and regular users to notice Processwire. But maybe the change I wanted was not the best way. Thanks to Robin for your point of view.

I guess what you are asking is how do we get more casual developers interested into ProcessWire? As in you said, you don't want to learn how to connect these frameworks up to ProcessWire. 

I don't think ProcessWire currently fits in a market where everything is module or theme. While it has the features to be. It just doesn't have the audience. I would say nearly everyone here is a developer that writes bespoke websites for their clients. 

I think trying to compete with WordPress in its versatility to just pick up, install a theme and a couple of modules and off you go. Could damage ProcessWire. For example a lot of WordPress websites get hacked due to the fact that modules/plugins installed aren't secure.

I personally like where ProcessWire sits, it's really easy to pick up and learn, the API is by far the best of any other CMS available. However it takes the patience to learn. However not everything is handed to you. 

Go out and learn how to hook these frameworks into ProcessWire. I promise you, you won't regret it. 

And then why not release it as a profile? That's how the community and library gets bigger.

  • Like 3

Share this post


Link to post
Share on other sites

Hey @Tom., I added THIS profile the day before, but somehow it is no here. Just I tried sending it again called Class (SiteTwilight), but it looks like it is in profiles. I do not know why is not visible? on the modules page.

Quote

UPDATE:
This profile is already in modules. You can download from here:
http://modules.processwire.com/modules/site-twilight/

This is not my first profile that I added, this profile it was also added earlier.

I generally like @ryan words from this Roadmap: https://processwire.com/blog/posts/roadmap-2017/

Quote

New bundled site profile(s). This one was also mentioned in a previous blog post, and will be a high priority for 2017. At minimum, we'd like to drop the Classic profile that currently comes as an installation option, and replace it with a common CSS framework profile. We'd also like to have a bundled blog profile, which may be one and the same as the common CSS framework profile, or something different (we'll see). Regardless of which way it goes, we want to make sure that when someone installs ProcessWire for the first time, they have something that really shows off what's possible and inspires them to want to dig in to see how it works.

Which describes how he would like to put it all to some degree in 2017.
I'm also advocating his approach to creating two profiles.
1. CSS Framework for fast building sites.
2. The UIKIT Profile that contains the Blog.

I do not know if you've understood my message about modern site profiles, maybe I did not get it right as I started writing.
I do not want to add new site profiles just enrich existing profiles with 2 files, such as gulpfile.js + package.json (5kb), which gives me and many programmers the ability to quickly create new profiles, as in the above video. I like modern solutions that make my job easier. I do not want to create new startup profiles for myself, i like just start right away with the ones that give me the Processwire installer.

I would like to also have such users also be able to quickly install Blog Profile from default Installation Processwire:

After reading all the statements, it would be worthwhile to test it on the Processwire Weekly Which leads if I'm not mistaken @teppo ( Thanks to you Teppo for this Newsletter ).
My sugestion to polls:
1 - Leave one blank profile.
2 - One CSS starter + One startup blog based on Uikit 3

3 - One CSS starter + Startup blog based on Uikit 3 + New Multilingual Profile
4 - Remove all the profiles and leave only Administrative Core like Laravel Voyager https://laravelvoyager.com/

Edited by rafaoski
The profile ( SiteTwilight ) was added to the modules
  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
14 hours ago, rafaoski said:

You mentioned the reduction of the core and I agree with you 100% to throw out the profile but you could add an installer that gets profiles from github like the October CMS that can install automatic templates. I do not know if it's possible in Processwire (I know the basics of PHP but no more to create a new Download System).

+1 :)

  • Like 1

Share this post


Link to post
Share on other sites
4 hours ago, rafaoski said:

My sugestion to polls:
1 - Leave one blank profile.
2 - One CSS starter + One startup blog based on Uikit 3

3 - One CSS starter + Startup blog based on Uikit 3 + New Multilingual Profile
4 - Remove all the profiles and leave only Administrative Core like Laravel Voyager https://laravelvoyager.com/

Blank profile should stay no matter what, I guess. However, it is a good idea to make a poll. Formally I suggested that only two profiles are enough to be bundled with the core : a Blank Profile and a Multilingual Blog Profile. Should the Blog Profile be based on UIkit 3? That is debatable. (I myself use and like UIkit 3 so I vote for it...). The new Multilingual Blog Profile should only be based on UIkit 3 if there is a good tutorial for beginners on how to setup a development environment for it.

  • Like 1

Share this post


Link to post
Share on other sites
16 hours ago, rafaoski said:

You mentioned the reduction of the core and I agree with you 100% to throw out the profile but you could add an installer that gets profiles from github like the October CMS that can install automatic templates. I do not know if it's possible in Processwire (I know the basics of PHP but no more to create a new Download System).

i'm working on something in this direction :) i have to polish up a lot though. don't know when i find time...

  • Like 6

Share this post


Link to post
Share on other sites
1 hour ago, szabesz said:

Blank profile should stay no matter what, I guess. However, it is a good idea to make a poll. Formally I suggested that only two profiles are enough to be bundled with the core : a Blank Profile and a Multilingual Blog Profile. Should the Blog Profile be based on UIkit 3? That is debatable. (I myself use and like UIkit 3 so I vote for it...). The new Multilingual Blog Profile should only be based on UIkit 3 if there is a good tutorial for beginners on how to setup a development environment for it.

A great summary of @szabesz. Generally, the selection of the list in which I write about theUikit Frameworks 3 it for this because it is already a ready profile Regular and I do not see the point to change the whole now to another framework. Anyway before this profile I had no knowledge of this The Uikit Frameworks, however after looking through and hijacking the possibilities of the number of elements to code quality is probably the most modern of all I have dealt with.

33 minutes ago, bernhard said:

i'm working on something in this direction :) i have to polish up a lot though. don't know when i find time...

I keep my fingers crossed for you @bernhard

  • Like 1

Share this post


Link to post
Share on other sites
On 15/11/2017 at 12:54 AM, rafaoski said:

You mentioned the reduction of the core and I agree with you 100% to throw out the profile but you could add an installer that gets profiles from github like the October CMS that can install automatic templates.

One thing to consider here would be offline or LAN use, where you may not have access to GitHub.. and of course GitHub being offline, though that doesn't happen too often these days.

That being said, I personally think that we should limit the starting site profiles to a bare minimum – three or four being the absolute maximum in my opinion. Offering an online site profile installer as an additional option in case none of the starting profiles feel just right would be pretty awesome.

  • Like 4

Share this post


Link to post
Share on other sites

Hi @teppo. Yes you has a lot of experience and your point of view seems to me to be right. When it comes to slimming processwire it would generally be useful to compress all the images that are in the profiles.
I used a compressor from here:
https://compressor.io/compress
And I compressed the images in the Regular profile that you can download from here:
https://github.com/rafaoski/site-compress
Comparing it with the uncompressed profile from here:
https://github.com/ryancramerdesign/regular
I reduced regular profile  by 1.5MB, It would be nice to have some compression when adding profiles to the core.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites
2 hours ago, rafaoski said:

I reduced regular profile  by 1.5MB, It would be nice to have some compression when adding profiles to the core.

thats nice! so what about making a PR on github so that ryan can accept the compressed profile?

3 hours ago, teppo said:

Offering an online site profile installer as an additional option in case none of the starting profiles feel just right would be pretty awesome.

...and i'm pretty close to release something even more awesome ;) i have to see if the new online installer changed anything or if it still works.

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Site profiles: yes. Making Processwire out of the box by stuffing the core: no way.

  • Like 1
  • Sad 1

Share this post


Link to post
Share on other sites

It seems to me that a good definition of a ''Modern Site Profile'' should be: an mix of the UIKit Site Profile and  Multilingual Profile.
Multilingual:  of course,  does not need further explanations why this profile is important for many of us.
UIKit : for those who ask them selves about the hype around UIKit, I suggest a very basic test: 
Take a tablet, a smartphone, or any device with a touch screen, and then, go on the documentation page of each of the majors CSS frameworks:
-Bootstrap
-Foundation
-UIkit
Try EACH function, like it is supposed to work on a touch screen device: with the help of your ...finger.
At the end, I am pretty sure you will understand why UIKit is a good choice for PW:
Because IT WORKS.
(No more: expand..ooops... retract....Re expand...ooopss keep the finger too long on the item...f...k...try again.... @£¦@@$....will plug a mouse....)
Everything works.

It could be UIKit 2. Married with PW, It is way enough to make a terrific couple.
And.... Santa is coming...  :-)

  • Like 2

Share this post


Link to post
Share on other sites
On 11/18/2017 at 8:08 PM, teppo said:

One thing to consider here would be offline or LAN use, where you may not have access to GitHub.. and of course GitHub being offline, though that doesn't happen too often these days.

That being said, I personally think that we should limit the starting site profiles to a bare minimum – three or four being the absolute maximum in my opinion. Offering an online site profile installer as an additional option in case none of the starting profiles feel just right would be pretty awesome.

It would be nice if the installer treated site profiles installation like module installation. Currently it will pick up any profiles in the appropriate directory, and I use the export site profile module to create my own for reuse. Modules work this way too by scanning the modules directory, but also offer the option to install by providing a module class name to download from the official modules directory, a URL, or an upload.

Of course modules are installed like this after the base Processwire installation is already configured, whereas site profiles need to be chosen at install time, however if functionality were similar for site profiles, this would allow for both offline and online installation, and allow the included profiles to be kept to a bare minimum.

 

  • Like 1

Share this post


Link to post
Share on other sites
7 hours ago, Kiwi Chris said:

would be nice if the installer treated site profiles installation like module installation

Agreed, that's one reason why I'm working on this (where it will be possible to choose the local profile or to download one from a given URL):

 

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By AndZyk
      Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist.
      The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages.
      www.galerie-claeys.de
       
      Features:
      Exhibitions Page transitions  
      Exhibitions
      On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment.
       
      Page transitions
      The smooth fading page transitions are made with Barba.js.
       
      Modules used:
      Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts.
      The website was build with help of the framework UIkit.
      www.musik.stadtkirche-pforzheim.de
       
      Features:
      Events Download dates  
      Events

      The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact.
       
      Download dates

      It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date.
       
      Modules used:
      Email Obfuscation (EMO) Front-End Page Editor Import Pages from CSV Markup Sitemap XML ProCache Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
       
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Four unique color options Beautifully redesigned login screens Modern typografy using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
    • By Chris Bennett
      Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies.
      So here is my humble offering, rough and ready,  which can be thrown in at the bottom of your Uikit css as a starting point.
      Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size.
      It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently.
       
      .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }