Yii Framework Forum: Bootstrap - Sass - Gulp - Toolchain - Yii Framework Forum

Jump to content

  • (4 Pages)
  • +
  • « First
  • 2
  • 3
  • 4
  • You cannot start a new topic
  • You cannot reply to this topic

Bootstrap - Sass - Gulp - Toolchain The ultimate toolchain for JS and CSS Rate Topic: -----

#61 User is offline   Geoide 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 20
  • Joined: 13-January 13
  • Location:Zaragoza - Spain

Posted 19 January 2016 - 05:37 AM

¬°Solved! It was a permissions problem. I'm sorry and thanks.
0

#62 User is offline   jacmoe 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 3,694
  • Joined: 10-October 10
  • Location:Denmark

Posted 19 January 2016 - 05:38 AM

Sounds good :)
Let me know if anything needs to be added to the readme.
"Less noise - more signal"
0

#63 User is offline   jacmoe 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 3,694
  • Joined: 10-October 10
  • Location:Denmark

Posted 29 March 2016 - 04:10 AM

The sample application templates has been updated to Gulp 4 and the latest asset build tool-chain pipeline principles :)

BOOTSTRAP (3.3):

Basic: yii2-app-basic-gulp-sass

Advanced: yii2-app-advanced-gulp-sass

FOUNDATION (6.2):

Basic: yii2-app-basic-zurbified

Advanced: yii2-app-advanced-zurbified
"Less noise - more signal"
0

#64 User is offline   Larry Jr. 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 23
  • Joined: 13-March 13
  • Location:Tomohon

Posted 07 October 2016 - 07:21 PM

View Postjacmoe, on 28 November 2015 - 03:43 PM, said:

Bootstrap 4 will be out any day now, and it is now based on Sass.

So, my advice is to grab the Sass package for Bootstrap 3.x - you can get it from the Bootstrap site.

And set up a tool-chain separate from Yii.
Using PHP for this is in my opinion a very bad idea.
We are using Node.js and Gulp for our build script at https://github.com/y...iiframework.com

You can easily find tutorials on how to set up Gulp and Sass together.

Then you need to define an asset bundle where you reference the generated css.
Check the guide.

And you probably need to disable the 'official' Yii Bootstrap assets.
Here's instructions: http://www.yiiframew...g-asset-bundles

Note that you can also go the route of configuring the asset manager to call the third-party tool-chain for you, but I haven't really bothered.
Instructions here: http://www.yiiframew...sset-conversion

Personally, I just run a 'gulp build' or 'gulp watch' and then code..


Thanks. I've sucessfully compiled it and running with bootstrap-sass:
https://github.com/j...-bootstrap-sass
JoenMarz
0

#65 User is offline   bazzz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 15-November 16

Posted 15 November 2016 - 06:13 PM

Hey Guys,

Just wondering how you handle other assets such as images with this method of registering all your own assets. Do you put in a routine in the gulp chain to just copy these across?

Specific example is just using one of Kartik's modules, the password strength validator where the css references an image for the password input strength meter.

Cheers,
0

#66 User is offline   bazzz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 15-November 16

Posted 16 November 2016 - 07:35 PM

Replying to my own question, I did get it working by setting up gulp to copy image asses too. But the relative folder paths are of course important so you have to be pretty specific rather than using any generic images sub folder.

I'm using the basic-gulp-sass project from jacmoe and I found that the bootstrap glyph icons were not working (like the gridview edit/view/delete) because the gulp copying fonts routine does copy the font files but does not replicate the sub directories, so the path references to the glyphs was wrong.

Not sure what the best way to resolve this is but I just rewrote the font-face definitions to take out the bootstrap sub directory references in my sass:
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("../fonts/glyphicons-halflings-regular.eot");
    src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

1

#67 User is offline   jacmoe 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 3,694
  • Joined: 10-October 10
  • Location:Denmark

Posted 17 November 2016 - 12:12 PM

I can't answer your question because I haven't got a machine with anything set up just yet - been doing a hard upgrade (format and clean install) of my Linux box (the only box I've got) Posted Image

I will keep this in mind, though - thanks for letting me know!
"Less noise - more signal"
0

#68 User is offline   bazzz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 15-November 16

Posted 21 November 2016 - 11:11 PM

No worries jacmoe! Let me know what you think if you get a chance to look at it.

Cheers,
0

#69 User is offline   larsonreever 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 07-July 17

Posted 13 July 2017 - 06:03 AM

I will definitely look to apply this very soon, understood the functionality of all the modules etc rather than just blindly plugging it in. I will probably look to strip out unwanted style/scripts for those Bootstrap elements which my project will not be using.
Thanks
Larson
Website - Made in Yii
0

Share this topic:


  • (4 Pages)
  • +
  • « First
  • 2
  • 3
  • 4
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users