Search the Community
Showing results for tags 'SASS'.
Found 6 results
Bootstrap 4 Minimal site profile
flydev posted a topic in Themes and ProfilesBootstrap-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
Rudy posted a topic in Module/Plugin DevelopmentHi 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/
Animated hamburger icon mixin (Sass/Stylus/Less)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
Out of interest, who's using Less/Sass vs plain old CSS
onjegolders posted a topic in Dev TalkOne 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
Bootstrap 3 SASS Fontawesome Blank Site Profile
Foundation 5 / SASS / CodeKit 2 setup
Peter Knight posted a topic in Dev TalkDoes 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?