Jump to content
rafaoski

I just added a new Milligram Site Profile ...

Recommended Posts

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:

Screenshot.thumb.png.41444dbd9bee29647299cf518d5249fe.png

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

 

 

 

 

  • Like 7
  • Thanks 1

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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

 

  • Like 2

Share this post


Link to post
Share on other sites

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

 

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 1

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 flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By rafaoski
      This profile can be used as a simple business card or blog.
      The profile does not use any framework css structure, only styles based on CSS GRID and FLEX.
      To minimize page loading, I added lazy load for images ( Tupola Lazy Load ).
      With include functions like:
      MarkupRegions
      FunctionsAPI
      CAN DOWNLOAD FROM THIS LINK:
      https://github.com/rafaoski/site-grayscale-pw
      https://github.com/rafaoski/site-min-grayscale-pw
      Screenshot:

       
    • By rafaoski
      Hello All ... I just added a new Site Profile Based on Spectre.css ...
      A lightweight profile that can be the basis for your blog . There are several pages like About Us, Blog, Contact Page, Categories, Authors ...
      He also uses the Font Awesome.
      CAN DOWNLOAD FROM THIS LINK:
      http://modules.processwire.com/modules/site-spectre/
      https://github.com/rafaoski/site-spectre
      Live Example
      Some Screenshots:






      If you enable multilingual support, you will have a simple menu for switching between languages.

    • By MateThemes
      Hello everyone!
      I use Ryan's site profile blog for my new website. Everything works great, but i am not able to change the url of the blog categories. Currently the url is root_url/categories. My client wants the url root_url/news/categories. 
      If change the url in the tab url from /categories to news/categories Processwire change it to news-categories!
      How can I change that or can I change it in the php file too?
      Thanks for your help for a beginner!
×
×
  • Create New...