Recently Browsing 0 members
No registered users viewing this page.
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
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
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:
wireIncludeFile | wireRenderFile
Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )
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:
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:
Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
proxy: 'http://localhost/mix/', to your installation processwire folder like:
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
Web Font Loader
Verlok Lazy Load
By Noel Boss
Admin Theme Boss
A light and clear theme based on Uikit 3
Five unique color options Beautifully redesigned login screens Modern typography 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 Compatibility with AdminOnStreoids and other third party modules Updated and Releases
There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss. Color Variants:
Smooth Green *new with 0.6.1*
Requires a current ProcessWire version with AdminThemeUikit installed and activated.
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“
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
Hi everyone, here's the problem I'm trying to solve.
I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this:
Home Config Aesthetics Colours Red Field: Custom Label - "Red" Field: Class name - "theme--red' Green Field: Custom Label - "Green" Field: Class name - "theme--green' Blue Field: Custom Label - "Blue" Field: Class name - "theme--blue' etc... Sizes Small Field: Custom Label - "Small" Field: Class name - "sm' Medium Field: Custom Label - "Medium" Field: Class name - "md Large Field: Custom Label - "Medium" Field: Class name - "lg" etc... Icons Target Field: Custom Label - "Hands shaking Icon" Field: Icon SVG - "[svg code]' Target Field: Custom Label - "Target icon" Field: Icon SVG - "[svg code]' Success Field: Custom Label - "Happy face icon" Field: Icon SVG - "[svg code]' etc... HOW I USE THIS
I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page.
This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc.
I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client.
Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so:
Navy Blue Deep Blue Bright Blue Sea Blue ... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client.
Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like:
Hands shaking icon Target icon Happy face icon Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection.
I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above.
Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned?
Thank you in advance for anyone who's read this far and has any words of wisdom!
I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
I have found the following resources:
https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?