Jump to content

Modern Site Profiles


rafaoski
 Share

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

 

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 4 weeks later...

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
Link to comment
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
Link to comment
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
Link to comment
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
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Rudy
      Hi all 👋
      I made this searchable UIkit 3.x documentation site to share with everyone. The official doc is great but you can't search across the whole doc.
      Anyway, here is the URL: https://uikitdocs.netlify.app/
      What's missing is the live examples. Perhaps some of you can contribute? Github repo link is on the website as well.
      Cheers
    • By Chris Bennett
      https://github.com/chrisbennett-Bene/AdminThemeTweaker
      Inspired by @bernhard's excellent work on the new customisable LESS CSS getting rolled into the core soon, I thought I would offer up the module for beta testing, if it is of interest to anyone.

      It takes a different approach to admin styling, basically using the Cascade part of CSS to over-ride default UiKit values.
      Values are stored in ModuleConfig Module creates a separate AdminThemeTweaker Folder at root, so it can link to AdminThemeTweaker.php as CSS AdminThemeTweaker.php reads the module values, constructs the CSS variables then includes the CSS framework Can be switched on and off with a click. Uninstall removes everything, thanks to bernhard's wonderful remove dir & contents function.
      It won't touch your core. It won't care if stuff is upgraded. You won't need to compile anything and you don't need to touch CSS unless you want to.

      It won't do much at all apart from read some values from your module config, work out the right CSS variables to use (auto contrast based on selected backgrounds) and throw it on your screen.
      You can configure a lot of stuff, leave it as it comes (dark and curvy), change two main colors (background and content background) or delve deep to configure custom margins, height of mastheads, and all manner of silly stuff I never use.

      Have been developing it for somewhere around 2 years now. It has been (and will continue to be) constantly tweaked over that time, as I click on something and find something else to do.
      That said, it is pretty solid and has been in constant use as my sole Admin styling option for all of those 2 years.

      If nothing else, it would be great if it can provide any assistance to @bernhard or other contributor's who may be looking to solve some of the quirkier UiKit behavior.
      Has (in my opinion) more robust and predictable handling of hidden Inputfields, data-colwidths and showIf wrappers.
      I am very keen to help out with that stuff in any way I can, though LESS (and any css frameworks/tools basically) are not my go.
      I love CSS variables and banging-rocks-together, no-dependency CSS you can write with notepad.



       

    • By fruid
      could someone help me find the javascript bug?
      https://codepen.io/bbblgmsp/pen/LYxWJJa
      or here:
      https://foobar.roofaccess.org/carousell/
      I want it to be NOT draggable on desktop but draggable on mobile devices. Also, on mobile, the element that I drag into focus should automatically be active, but on desktop, only when I click it.
      It works fine on desktop, but when you drag on mobile, after the dragged element is active and you click it, it switches back and forth between this and the previous element (assigns the active class to the previous element).
      I already tried to find help elsewhere, since this is not directly PW related but only frontend, but it's hard to find support or a community for uikit. PW seems to be using it quite a lot though…
      Thanks for help
    • By Zendex
      Hi,
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
       
      HTML:
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Zendex</title>
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
      </head>
      <body>
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
      <ul>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
              </ul>
          </div>
          <div class="main"></div>
      </body>
      </html>
      CSS:
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      }
      body {
          line-height: 1;
          background-color: #6A6969;
      }
      ol, ul {
          list-style: none;
      }
      blockquote, q {
          quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      }
      table {
          border-collapse: collapse;
          border-spacing: 0;
      }
      /*-------------------------------------------------------------------------------------------------------------------------------------------------*/
      #nav_bar{
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
      }
      li{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
      }
      #Zendex{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
      }
      #home{
          
      }
      #about{
          
      }
      #films{
          
      }
      #contact{
          
      }
      ul{
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
      }
      a:link{
          color: white;
      }
      li:hover{
          height: 125px;
          background-color: #6A6969;
          color: white;
      }
       

    • By milo695
      Hello,
      I've added a class in ProcessPageEditLink but when I call it from Editor (attributes > class) nothing happens.
      Also, I've created the class in my custom.css, is there any other css file this class needs to be in?
      thanks
×
×
  • Create New...