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 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; }  

    • By AndZyk
      With around 3,400 employees worldwide, IMS Gear develops and produces specific drive solutions for international customers. In addition to the focus on the automotive industry, the focus is on applications for industry and e-mobility concepts.
      Finding new employees is important for the day-to-day business of IMS Gear. For this reason our agency designconcepts developed a job portal, where potential employees can easily inform themselves about the company, the application process and find the job they are looking for. The website was build with help of the framework UIkit.
      jobs.imsgear.com
       
      Features:
      Job finder Job offer PDF Newsletter Fly-in information pages  
      Job finder
      Core of the website is the job exchange with the job finder. Here you get a list of all available jobs which you can filter by three main areas (categories, task areas and locations). Or you can type in anything in the search field and filter by various keys (for example ID, title, country and hidden tags). The job finder was build with jQuery Typeahead, which was really helpful in building this complex logic. If you want to know which job is the closest to you, you can sort them by distance.

       
      Job offer PDF
      Every job offer has a printable PDF version for newspapers or other job platforms. The job offer PDF can be created by checking a checkbox in the back-end and saving the page. The PDF will then be created with all needed fields of that page and DocRaptor. This workflow is really easy for editors and guarantees a consistent layout for all created PDFs.

       
      Newsletter
      If there is no job for you available at the moment, you can subscribe to a newsletter with your areas of interest. Then you will be notified daily if a job is available with your interests. Instead of using a separate newsletter tool, the nice module Newsletter Subscription was used to manage subscribers. The newsletter will be send via a shell script executed by a daily cron job.
       
      Modules used:
      Continents and Countries Front-End Page Editor Functional Fields Markup Sitemap XML Newsletter Subscription ProCache Repeater Matrix Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
    • By AndZyk
      S. Siedle & Söhne Telefon- und Telegrafenwerke OHG is one of the leading manufacturers of building communications technology in Germany and Europe. For a company of this size it is important to have a solid brand communication. For this reason our agency designconcepts developed a portal where the employees of the company as well as others who work with or have interest in their brand can find everything that is important for the brand Siedle.
      The website introduces the brand, provides informations for different topics (for example logos, typography, colors etc.) and has a large Media-Center with images, videos and documents. The website was build with the framework UIkit.
      brand.siedle.com
       
      Features:
      Repeater Matrix Protected Content Media-Center Cart Auotcomplete Search  
      Repeater Matrix
      The information pages are build with a Repeater Matrix field and have a two columns layout. To be even more flexible, a section is a content element containing two Repeater Matrix fields for each column. This maybe sound crazy at first but was no problem and made complex layouts possible. 😀

       
      Protected Content
      Not all of the informations are meant for guests, so we made it possible to protect each page, section and content element with a checkbox. If this checkbox is checked, the content will only be visible for logged-in users.
       
      Media-Center
      The core of the brand portal is the Media-Center. The Media-Center is actually a mirror of a separate digital assets management database where the client can manage images, videos and documents with a nice interface in a protected environment.
      All new assets will be synced via a shell script containing PHP and curl commands calling the API of the database. This script will be executed every 15 minutes via cron job. This way all of the assets are saved as pages in ProcessWire and we can expand them with our own logic and fields. Also for the unlikely case that the database is not available, the Media-Center would still work.
       
      Cart
      Inside the Media-Center you can add assets to your cart. This cart is for downloading selected assets or sharing them with others. A cart will be accessible for 30 days.
       
      Modules used:
      Admin Custom Files Continents and Countries Email Obfuscation (EMO) Front-End Page Editor Functional Fields Markup Sitemap XML ProCache Repeater Matrix Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      The Katharinenhöhe is a rehabilitation clinic in the Black Forest (Germany) for teenagers, young adults and families with children who suffer from cancer. Our agency designconcepts was lucky to relaunch their website.
      Our goal was to unify the previous separated areas (families and teenagers/young adults) and provide a clear structure for potential patients. Also we wanted to show that the clinic is a nice place to live, despite the circumstances. We rebuild the website from scratch with the framework UIkit and used large images as well as videos.
      www.katharinenhoehe.de
       
      Features:
      Repeater Matrix Tour Contrast Theme Glossary Autocomplete Search Facebook  
      Repeater Matrix
      Most of the pages use a basic page template which have one Repeater Matrix field. This field has around 15 different content elements, so it is easy to build a page with different elements in various amounts.

       
      Tour
      On the site tour we build a image map with markers showing interesting places of the clinic. For this task the nice module Image Marker and the Marker component of UIkit came in handy. The tour is available on every page containing a marker.

       
      Contrast Theme
      For a better reading experience you can switch to a more contrasting theme of the website by clicking the theme switcher (on the top right). This is a separate stylesheet with darker color variables. The choice will be saved in a session variable and stays as long as the browser is opened.
       
      Glossary
      To explain complicated medical terms better, we highlight a set of terms in every textarea they occur and explain them with a tooltip. For this task we wrote a simple Textformatter module which looks for the terms in a page and replaces the terms with the tooltip.
      This tutorial by @benbyf helped me. Thank you! 😉
       
      Modules used:
      Color Email Obfuscation (EMO) Front-End Page Editor Functional Fields Image Marker Markup Sitemap XML Phone ProCache Repeater Matrix Tracy Debugger Upgrades  
      Regards, Andreas