I just added a new Milligram Site Profile ...

[rafaoski]

This profile can be used as a business card or very simple blog.

Requires the latest version processwire 3.0.101 !!!

Milligram Site Profile For Processwire 3x with include functions like:

MarkupRegions

FunctionsAPI

wireIncludeFile | wireRenderFile

Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex

 

Live Example

CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )

https://github.com/rafaoski/site-milligram

https://github.com/rafaoski/site-milligram-blog

Screenshot:

If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.

Basic example to Debian and Ubuntu based Linux distributions:

Node.js

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs

See more installation options LINK

npm is installed with Node.js just check in linux terminal like below:

node -v
npm -v

Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url

proxy: 'http://localhost/mix/', to your installation processwire folder like:
proxy: 'http://localhost/your-processwire-installation-folder/',

Next install npm packages in your templates folder with command npm install
Now, boot up the dev server npm run watch, and you're all set go!
On completion, use the command npm run production to build styles and scripts in the dist folder

Simple Usage ( Basic Command )

• Run npm install
• Watch npm run watch
• Build npm run production

All files to Webpack build steps is inside file ( webpack.mix.js )

Folder With all SCSS files is inside templates/src/scss

All build styles and scripts is inside the ( dist ) folder

References:

Milligram
Gridlex
Laravel Mix
Feather Icons
Web Font Loader
Verlok Lazy Load
Cookie Consent
Particles.js

 

 

 

 

[Pixrael]

Excellent! Thanks! Please add this profile to: https://modules.processwire.com/categories/site-profile/

[rafaoski]

Thanks to @Pixrael ... I have already added this profile, but as usual, it will take some time before the profile is approved ?I think that in a few hours the profile should be in the module catalog

[dragan]

Looks nice. But I would remove the negative margin @ [class~=grid] - it causes horizontal scrollbars (at least here, on Chrome)
 

 

[rafaoski]

Thanks to @dragan ... It looks like it's okay now after adding the margin auto to the grid

    /* eliminate horizontal scrollbars */
        .grid {
                margin-right: auto;
                margin-left: auto;
            }

 

[JeevanisM]

wow.. this is Amazing

[MilenKo]

Just on time for my learning curve about markup regions and so forth. Thanks for sharing your work ?