Compiling Foundation 5 without gulp but with Symfony2 - symfony

I'm running a project where Symfony2 serves the api and back-end; I use bower to install my front-end dependencies, including Angularjs and Zurb Foundation. We're using Assetic––a Symfony2 bundle––to minify, uglify, pre-render and combine our assets. We're also using Sass (as .sass), compiled by Assetic.
I want to work with Foundation's _settings.scss and understand that Foundation needs to recompile itself whenever I change a variable. I've tried running compass watch path_to_file but that doesn't update my Foundation project.
As I understand it, a lot of people run foundation using Compass or gulp. I've read through several docs but am unsure how it relates to my particular case. One source suggests running compass init to start a project and that compass watch to update the project when I make changes, but that doesn't seem appropriate to do with Symfony2, but I may be wrong. Anyone got tips?
I'm using this foundation repo: https://github.com/zurb/bower-foundation,
but there's also this one: https://github.com/zurb/foundation-apps. The second repo seems more suited for people who are running a Foundation project with gulp, the foundation cli, or by running compass init when starting a project.

The answer is incredibly simple:
I use Assetic to compile my sass. It typically looks like this:
{% stylesheets
"#SiteBundle/Resources/public/vendor/foundation/scss/app.scss"
filter="compass" %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
{% endstylesheets %}
app.scss is a file I created because that seems to be how everyone works with foundation. app.scss then imports the foundation components I want as well as normalize.scss and _settings.scss. I don't have to run compass watch because Assetic is already compiling for me.
I might move my app.scss and _settings.scss out of my vendors directory to ensure I don't write over either when updating foundation. But at the moment here's what my app.scss looks like, for anyone interested:
#charset "UTF-8";
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// Import normalize and settings
#import "normalize.scss";
#import "foundation/settings";
// Make sure the charset is set appropriately
// Behold, here are all the Foundation components.
#import "foundation/components/grid";
// #import "foundation/components/accordion";
#import "foundation/components/alert-boxes";
#import "foundation/components/block-grid";
// #import "foundation/components/breadcrumbs";
#import "foundation/components/button-groups";
#import "foundation/components/buttons";
#import "foundation/components/clearing";
#import "foundation/components/dropdown";
#import "foundation/components/dropdown-buttons";
#import "foundation/components/flex-video";
#import "foundation/components/forms";
#import "foundation/components/icon-bar";
#import "foundation/components/inline-lists";
// #import "foundation/components/joyride";
#import "foundation/components/keystrokes";
#import "foundation/components/labels";
// #import "foundation/components/magellan";
// #import "foundation/components/orbit";
#import "foundation/components/pagination";
#import "foundation/components/panels";
// #import "foundation/components/pricing-tables";
#import "foundation/components/progress-bars";
#import "foundation/components/range-slider";
#import "foundation/components/reveal";
#import "foundation/components/side-nav";
#import "foundation/components/split-buttons";
#import "foundation/components/sub-nav";
#import "foundation/components/switches";
#import "foundation/components/tables";
#import "foundation/components/tabs";
#import "foundation/components/thumbs";
#import "foundation/components/tooltips";
#import "foundation/components/top-bar";
#import "foundation/components/type";
#import "foundation/components/offcanvas";
#import "foundation/components/visibility";

Related

Laravel with laravel-mix setup and Bootstrap-5.1.3 - postcss error only in production build

I have a Problem when running npm run prod on a Laravel, VueJS APP.
#npm run dev works well but prod say's:
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: none - 1px
^..^
at /Users/*/Work/*/resources/sass/app.scss:3801:3
at Object.parseError (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:1200:15)
at Object.lexer_parseError [as parseError] (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:2333:44)
at Object.lexer_next [as next] (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:3328:22)
Is there a way to get more output from npm by processing to find the line of code which is affected here? When I google, I can only find this error in old Bootsrap Versions like 4.* but that seems not the same solution here. On the Bootstrap side, they want me to get them debugging output so that they can be shure it came from bootstrap not my setup.
I use bootstrap like this in my scss files:
app.scss:
#charset "UTF-8";
#use "sass:math";
// 1. Utils/Abstracts - variables, functions, mixins
#import "utils/variables";
#import "utils/mixins";
#import "utils/functions";
// 2. Vendors
#import "vendors/bootstrap/bootstrap";
#import "vendors/bootstrap/bootstrapicons";
after this came my own CSS stuff...
The bootstrap file looks like this:
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "~bootstrap/scss/functions";
// 2. Include any !default variable overrides for Bootstrap here
#import "./variables";
// 3. Include remainder of required Bootstrap stylesheets
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/utilities";
// 4. Include any optional Bootstrap CSS as needed
#import "~bootstrap/scss/root";
#import "~bootstrap/scss/reboot";
#import "~bootstrap/scss/type";
#import "~bootstrap/scss/images";
#import "~bootstrap/scss/containers";
#import "~bootstrap/scss/grid";
//#import "~bootstrap/scss/tables";
//#import "~bootstrap/scss/nav";
//#import "~bootstrap/scss/navbar";
#import "~bootstrap/scss/forms";
#import "~bootstrap/scss/placeholders";
#import "~bootstrap/scss/buttons";
#import "~bootstrap/scss/button-group";
#import "~bootstrap/scss/dropdown";
#import "~bootstrap/scss/modal";
#import "~bootstrap/scss/close";
#import "~bootstrap/scss/transitions";
#import "~bootstrap/scss/list-group";
#import "~bootstrap/scss/breadcrumb";
#import "~bootstrap/scss/alert";
#import "~bootstrap/scss/toasts";
#import "~bootstrap/scss/progress";
#import "~bootstrap/scss/badge";
#import "~bootstrap/scss/tooltip";
#import "~bootstrap/scss/popover";
#import "~bootstrap/scss/spinners";
#import "~bootstrap/scss/offcanvas";
#import "~bootstrap/scss/card";
#import "~bootstrap/scss/accordion";
#import "~bootstrap/scss/carousel";
#import "~bootstrap/scss/pagination";
#import "~bootstrap/scss/helpers";
// overwrite and extend some utilities
#import "./utilities";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
#import "~bootstrap/scss/utilities/api";
// 6. Add additional custom code here
// the project code needs to be placed after this
Maybe it is clearly if there is a more detailed debugging output if I ran. npm run prod, to find the problem and solve it.
Thanks for each Hint you gave me.
Marcel

live sass compiler in vs code doesn't recompile partials, only the main.scss

I'm learning sass, and using the live sass compiler extension in vs code. I'm also using the live server extension to view it in the browser. I have a main scss file which compiles fine every time I save the file and shows the updated code in the live browser. However, when I modify the partial files (_vaiables.scss for example), the browser reloads with no css, just the html; then, I need to re-save main.scss so I can see those changes in _variables.scss. Is that how it usually works? It is kind of annoying having to save two different files to see changes on the screen. I'm pretty sure there is a better way.
Here is my main.scss
#import "abstracts/functions";
#import "abstracts/mixins";
#import "abstracts/variables";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/button";
#import "components/composition";
#import "components/feature-box";
#import "components/card";
#import "layout/header";
#import "layout/grid";
#import "pages/home"
Here is some of the settings.json file for live sass compiler extension.
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": "/advanced-css-course/Natours/starter/css/sass-compiler"
}
],
Here is the link to css in html
<head>
<link rel="stylesheet" href="css/sass-compiler/main.css" />
</head>
Thanks in advance.
I ended up installing node-sass to compile the code

Correct way to customize bootstrap theme (Using SCSS source files)

Right now I have all the unmodified bootstrap files a copy of those files for customization.
These folders:
--> Bootstrap
--> Custom (copy of the above)
I first include boostrap files and then the custom files, which right now are an exact copy.
Let's say I start changing values in "Custom" in order to get the desired looks. Then I update boostrap to a new version, by updating the bootstrap folder. A lot of changes might not come through since the previous version is basically copied to "Custom" even if the css rules haven't been changed at all.
Is this the correct way to do it, or should I try a different approach?
There are 2 ways to do this
First i need to understand you project folder struture i would reccomend this
dist
-/css
-/styles.css
src
-/scss
-styles.scss
-/bootstrap
-bootstrap.scss (taken from the scss folder)
-_variables.scss (taken from the scss folder)
Using this stucture your project only needs the styles.scss which will import the bootstrap folder below it and then compile into your dist folder to ouput your CSS (i would reccommend webpack or gulp for this if you know how to do thiat)
The main this in that the bootstrap.scss file is set-up like this below (in this example i am using node_modules as i have imported bootstrap using npm into my project. But this is a relative path for where the files live, so make your path to the same files is correct to how you have strutured your project)
Bootstrap.scss
Just notice that the variables file is pointing to the local one, not the one that sits in the main repo folder.
/*!
* Bootstrap v4.2.1 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
#import "./node_modules/bootstrap/scss/functions";
#import "../bootstrap/_variables.scss";
/*#import "./node_modules/bootstrap/scss/variables.scss";*/
#import "./node_modules/bootstrap/scss/mixins";
#import "./node_modules/bootstrap/scss/root";
#import "./node_modules/bootstrap/scss/reboot";
#import "./node_modules/bootstrap/scss/type";
#import "./node_modules/bootstrap/scss/images";
#import "./node_modules/bootstrap/scss/code";
#import "./node_modules/bootstrap/scss/grid";
#import "./node_modules/bootstrap/scss/tables";
#import "./node_modules/bootstrap/scss/forms";
#import "./node_modules/bootstrap/scss/buttons";
#import "./node_modules/bootstrap/scss/transitions";
#import "./node_modules/bootstrap/scss/dropdown";
#import "./node_modules/bootstrap/scss/button-group";
#import "./node_modules/bootstrap/scss/input-group";
#import "./node_modules/bootstrap/scss/custom-forms";
#import "./node_modules/bootstrap/scss/nav";
#import "./node_modules/bootstrap/scss/navbar";
#import "./node_modules/bootstrap/scss/card";
#import "./node_modules/bootstrap/scss/breadcrumb";
#import "./node_modules/bootstrap/scss/pagination";
#import "./node_modules/bootstrap/scss/badge";
#import "./node_modules/bootstrap/scss/jumbotron";
#import "./node_modules/bootstrap/scss/alert";
#import "./node_modules/bootstrap/scss/progress";
#import "./node_modules/bootstrap/scss/list-group";
#import "./node_modules/bootstrap/scss/close";
#import "./node_modules/bootstrap/scss/toasts";
#import "./node_modules/bootstrap/scss/modal";
#import "./node_modules/bootstrap/scss/tooltip";
#import "./node_modules/bootstrap/scss/popover";
#import "./node_modules/bootstrap/scss/carousel";
#import "./node_modules/bootstrap/scss/spinners";
#import "./node_modules/bootstrap/scss/utilities";
Styles.scss
This is the file that you will need to complie and then that will output your custom CSS
#import 'bootstrap/bootstrap.scss';
the variables file so long as you copied this from the repo version you are using (important as with the various version, if you use the incorrect version then you will get complie errors for variables not being present) You should be able to customise bootstrap colours, breakpoints, cols, rows and much more to get bootstrap the way you want it.

Laravel on server fails find all the classes in app.css

I'm designing a site using Laravel Mix on local. I have lots of scss lifes in resources/assets/sass and through app.scss I combine them it looks just the way it's supposed to be on local using npm run watch and php artisan serve
But when I set the site up on a server, all the css classes are missing, therefore design doesn't implement itself on the website. For instance I have a class future-concerts which styles the element it suggests. So I check for .future-concerts inside public\css\app.css there is no such class. What might be causing this? Even just copying app.css file to the server doesn't work. It just deletes most of the lines I wrote.
app.scss file
// Fonts
#import url('https://fonts.googleapis.com/css?family=Abhaya+Libre|Mitr|Raleway');
// Variables
#import "variables";
#import "custom";
#import "directives";
// Bootstrap
#import "bootstrap.min";
#import "bootstrap-theme.min";
// Fotorama
#import "fotorama";
// Animate.css
#import "animate";
// Font Awesome
#import "font-awesome.min";
webpack.mix.js file:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

Using Twitter Bootstrap in my Rails app, missing markup

I installed twitter-bootstrap-rails gem with less support by adding the following in my Gemfile:
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
After running a bundle install, I went ahead and ran the generator:
rails generate bootstrap:install static
My application.css in app/assets/stylesheets/ has the following in it:
*= require_self
*= require_tree .
If I view source, I do see the following there:
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
So that's there. Then I started playing with the Grid system and added the markup show-grid and noticed there's no style for it. I proceeded to add the following in my bootstrap_and_override.css.less file:
#import "twitter/bootstrap/reset.less";
#import "twitter/bootstrap/variables.less";
#import "twitter/bootstrap/mixins.less";
#import "twitter/bootstrap/scaffolding.less";
#import "twitter/bootstrap/grid.less";
#import "twitter/bootstrap/layouts.less";
#import "twitter/bootstrap/type.less";
#import "twitter/bootstrap/forms.less";
#import "twitter/bootstrap/wells.less";
#import "twitter/bootstrap/component-animations.less";
#import "twitter/bootstrap/buttons.less";
#import "twitter/bootstrap/close.less";
#import "twitter/bootstrap/navs.less";
#import "twitter/bootstrap/navbar.less";
#import "twitter/bootstrap/labels-badges.less";
#import "twitter/bootstrap/hero-unit.less";
#import "twitter/bootstrap/utilities.less";
#import "twitter/bootstrap/responsive";
After adding these, I started the local Rails server up and still don't see the markup in the application. Must be doing something wrong here. Does application.css need to be renamed application.css.less? Do I need to recompile something? I'm guessing show-grid styling is on one of the imports below (probably grid.less), and I'm guessing that something I'm doing incorrectly is not importing those stylesheets.
Where's a good step to begin troubleshooting this?
The Bootstrap show-grid class comes from the docs.css that Bootstrap use on their own demo site.
I don't think it's really meant to be used by folk who download Bootstrap but I guess there's nothing stopping you using it.
The css is in this file:
http://twitter.github.com/bootstrap/assets/css/docs.css
And it's used here on Bootstrap:
http://twitter.github.com/bootstrap/scaffolding.html

Resources