Search the Community
Showing results for tags 'SASS'.
Found 6 results
-
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
- 39 replies
-
- 12
-
-
- responsive
- bootstrap
- (and 3 more)
-
Hi all, I am new to ProcessWire module development. Just recently getting back to using PW again after a couple of years away from it. I was looking for a SASS/SCSS/Compass pre-processor module for PW and couldn't find any. The closest I could find was AllInOneMinify but it doesn't do SASS/SCSS. I decided to make this module (with heavy inspiration from AOIM). This is a pretty basic module that takes one or more sass/scss/compass file(s) and compile them automatically in your template. Github link https://github.com/lesaff/ProcessWire-Sassify I really appreciate any comments, suggestions, bug fixes, etc. Hopefully this is the first of many modules. Thanks Rudy Note: Added to Modules directory, under http://modules.processwire.com/modules/sassify/
- 18 replies
-
- 17
-
-
Here's a mixin I put together for creating hamburger icons. It utilizes the checkbox hack so you can use CSS only to show a mobile menu (or off-canvas menu, etc). Unlike other mixins here you can specify a selector for the label tag if it's not directly below the checkbox, so the label (the icon) can be placed anywhere in the DOM. There is also a "hamburger_tint" helper mixin included to easily colorize the icon/text on hover or in a checked state. Parameters: width: the width of the icon. default: 32px thickness: the thickness of the bars. default: 3px gap: the vertical space between the bars. Overall height is: thickness*3 + gap*2. default: 7px color: the color of the icons. default: #000 (black) radius: border-radius value to round edges. default: 0 anim: seconds of animation duration (transition-duration) or timing function + duration (eg. "ease-out 0.3s"). Use -1 to disable morphing to an "X". default:0.25s labelselector: in case the label is not right after the checkbox, use this setting to tell the mixin where to find it. Eg. "~ div.content header nav label". default: "+ label" padding: extra spacing around the icon. default: 0 text: show text next to the icon, by default on the right. Values: "left" or false to disable. Requires an extra "span" tag. default: "right" CodePen demo GitHub
-
One of the things I've put off learning has been LESS/SASS, seeing as I've always managed ok with CSS and there's never time enough to learn every new technology is there?! Was just interested to see who used it occasionally, the whole time, never at all, waste of time, lifesaver etc... I've certainly never struggled with just CSS but that's the way with so many new things, you don't know what you're missing until you try it
-
Since I've been working on a few projects where I used Bootstrap 3 and will be using it for future projects, I put together a blank site profile with Bootstrap 3 Sass, Fontawesome and a few markup render functions for Bootstrap dropdown menu, image carousel and accordion. You can find it at https://github.com/gebeer/site-pwbs Features bootstrap-sass-official font-awesome SASS version jquery modernizr render functions for:BS3 dropdown menu BS3 accordion from PageArray BS3 carousel from PW images array Prerequisites compass bower How to install from zip: download the zip extract the folder "site-pwbs" into a clean ProcessWire install's root folder during install of ProcessWire choose the profile "bootstrap-sass-official fontawesome blank profile" After installation The last step after installing the profile is to install all assets with bower: open a terminal in site/templates and execute "bower install" How it works The profile is based on the blank site profile that comes with PW 2.5 and uses the delegate template approach. It comes with a top navbar, a main container and a footer section. Rest is up to you. CSS gets compiled through compass. You can easily override BS variables and exclude BS components that you don't need. I intentionally did not add structure to the sass folder so you can structure your partials yourself as you please. There is only one folder "generic" with _mixins.scss whith a very lean and flexible breakpoint mixin that I discovered here. JS Since I only use the BS javascript plugins I really need, I usually copy them over to my plugins.js file. I use bower to install bootstrap-sass-original and fontawesome because it gives more flexibility than requiring them through ruby gems. This way you can tweak the BS and FA partials to your liking (of course only if you don't intend to do "bower update" further down the road) Enjoy!
- 6 replies
-
- 8
-
-
- Fontawesome
- Blank Site Profile
- (and 2 more)
-
Does anyone here use Foundation 5 and CodeKit 2 and SASS? Things have changed since v5 was released and I wanted to sanity check my setup and my understanding of it. In CodeKit 2, I've created a Foundation project and pointed it at a folder called Foundation within my site/assets/scripts directory. _settings.css (foundation > scss) This is the place to make fundamental changes to the framework. IE change the background color or base font size. This is then compiled by CodeKit 2 into a file called: app.css (foundation > css > css) This file should be referenced in my HEAD as follows (your paths may differ) <!-- Foundation 5 --> <link rel="stylesheet" href="<?php echo $config->urls->site; ?>assets/scripts/foundation/css/app.css"> Previously I'd created a file called foundation-custom.css at the end of my HEAD and used that for custom over-rides. With Foundation 5 and the _settings.css, is this bad practice or no longer necessary or not important?
