Lego up a bootstrap Drupal theme

hello everyone it's um thanks for coming i'm not sure how many people here in this room so i can't really see anyone so i suppose everything started right now so i'm going to do the demo right now um so if you have any questions um just uh raise um i just put in a question in a in the pool so i will answer the question later so uh so next 20 minutes i'm going to show you how to build a bootstrap thing in triple h so my name is e so um this session doesn't sound very interesting who want to actually build a bootstrap right now in jupiter but let's go in so about myself i live in canberra and helping work for a couple of government agencies and i work for working on multicultural projects from seven to eight apparently i'm working for abs as developer today i'm going to wear frontend developers hat for this presentation i have a i'm not really on i'm not really on the top of the fountain so don't show me very hard question in the end so so about presentation so this is just a bit of a background about this presentation i think i put it was here just saying because we're in a triple gal so we we're in a government space meeting so i want to imagine you could have a similar situation in one of your projects everything is running perfectly but just need a responsive scene as a project delivery success port but also as developer you're always thinking how can i pick up a proper solution for fill up this missing part i'll put the images here just try to get some laughing but anyway so let's go in what was trap so i think books are still probably popular though and um easy to pick up and we're documented so so i think i'm trying to say is bootstrap is not a very bad solution for now i mean um right now four yeah so there's two outstanding bootstraps in in drip arc so one is radix other one is bootstrap storybook so reddit's been there for a while it got a huge uh usages um but bootstrap storybook is uh just started recently i'm not sure how what time it is started but it looks very young to me um so this topic this presentation i'm going to show you is only talk about bootstrap storybook so um so bootstrap style book is actually upgraded radical version so but it's put other couple of things in there so let's just jump into this bootstrap storybook theme um so it used laravel mix uh it's actually a easy wrapper for webpack so i i hope everyone sitting here is actually pretty good with fountain so that exactly know what i'm talking about so i'm just give a general introduction for uh laravel mix it's you go to broadsync it could automatically compile the css.js for you the good things also is can shipping components from one location to other location there are heaps of goodies in there so you can use post css and critical css versioning come from the box you can just use that as the package from the package so uh the length of couple slice um is gonna just do a script dump for you guys i'm sorry for that because um it's i probably don't want to do live demo so that's just going to be a couple of dummy um screenshots and to get into this bootstrap storybook theme um so first so if you're looking to to the um singing website in a drupal.org you get all information as you can get from there so easy to installation so once you finish your installation so first part you jump into here is uh i'm trying to show you is the package jason so um as you can see is so there's a couple wrappers here so top five command is actually come from a laruer mix it's come from box the the the bottom five command is actually it just developers um came and wrapper in there so basically you can for as your developer you could actually wrap anything any npn command in in this section so the second section is talk about it's actually about packaging in store into the theme so it's actually my work version so the default one is all come to the dev dependencies so my work was version is actually i i separate this into two sections so with two section separates you can easily shipping only everything you want while you try to deliberate or shipping all your code to us environment such as production so i guess um for me it's just a better practice so the these things just show you why you install when you install a theme you get package.json you also get a webpackmix.js so what's happening here you can wrap your command or any event command here so this example just tell you is basically um compile your your components section to assets session eventually by using npn wrong watch or npn compile stuff like that so yeah basically just a exam so the main part of this thing is components so basically components been there for a while so for all the fountain developers that knows exactly components does so i guess um in this screenshot i'm just going to show you in in your left side in the basic this this section just tells you you can actually put your components um in a one folder so uh boost uh bootstrap storybook will do this scene we're going to do everything automatically for you if you wrap and everything into one folder so components so um second this part it's just going to show you because everything is already written in the theme so basically use hook library info build actually what this function does is everything you put into rcs folder assets components folder you will automatically load to the your website so you don't need to worry too much to write actually your customer css or js location in in library vmf file so they will it is actually automatically loaded to your website so that's two things i'll try to introduce so the final part is actually with some bootstrap storybook it's actually got actual things called a storybook so that's exciting part you basically get a um attributing start guide so what happening you can play everything every components in this canvas and they eventually will wrap into the website so how cool is that so that's pretty much how i kind of i was very enjoying doing these same things and i i feel like very excited so let's go to into everything behind these things so there's no more yep oh yeah so um this this slide just tells you how you wrap things behind a scene so basically for example you want to write your customer customer um button so you basically wrap your everything in your um in your sas file so that's actually starts um you can say it's actually attendant book strap size spot um but then you you wrap with button dot yes you wrap with button tick bar and eventually you write your story.js and then we'll automatically show your show to the bootstrap storybook uh storybook um ui so this uh visitors example tells you you can write your simple uh story storage as what happening you just need to yeah so basically and you import your button tweak file and you actually import a triple attribute so it's actually in in a in a in a code base already so you can just copy and paste and write something you kind of like it and that will automatically show to um store book ui the other things good things is actually with this design which will be the same you actually can write your netting from ideas you don't need to about worry about triple behaviors so in this case you can write a jquery native.js that's that's how you just make uh maybe buys like a book menu um button so you wrapped in this way and this this um this thing going automatically wrap this in in in a triple behavior gs so as a front developer you don't need to worry too much about drupal so i think the previous couple slides i just try to show you what's exactly what exactly seems behind it now i'm come back to this developer use case so um the best practice from from this thing is actually why the component uh even a drupal layout in a in a sales folder so which include trickstars action.js um native actuator yes what do you what what's kind of any js you could write into there so it will um then if you like if you like you can wrap it with stories.js and then you will show it will automatically show and and the story canvas as a as a stagger um then you use um lateral mix and um storybooker.js will compile it in an assets folder and dribble will automatically load it to the side that's actually kind of workflow in this thing they try to encourage you to do this way um so let's just do a recap for this what i have done for the last couple of minutes so um bootstrap storybook is a fully component-based approach everything in bootstrap storybook is in a component folder and all the template template files are including a component this is not the case in radix because of full components driven the style of as js necessary for each component is handled into its own component folder so let's just say if you if you want to add a button component to your page you load all the necessary css and js by just to include the component and then the whole thing is where open up organize the file structure it might it makes much more sense during a development process it's also much easier to extend the theme by installing node packages as the as the front and develop development skills because it's totally isolated from triple so you basically can install everything you like finally it integrates with storybook um so some feedbacks for me because i have been used to um this team for a while uh actually just for a couple months the positive feedback for me is so i'm actually from backend developer um so from that deal perspective this thing is much more easy to easy to spin up a responsive thing i also like the sim infrastructure it makes more sense to have a constraint not leave the code in everywhere other thing is because all the static csngs are all automatically built you could easily integrate with any of automation pipeline so okay like for instance if you have already have a pipeline you can just do this in your script um also because of reversing reversing engineering from me like if i'm i'm start doing this and i've thinking backwards um i think this setting up and there's a structure um and all kind of workflow is actually choose any drupal theme building process um you could have started from scratch and from other fountain framework or even not drywall yeah so the design still works uh some of uh um yes some of the net um yeah backslash from me is i feel like you know when i start doing content development i feel like somehow um yeah so node packages still take lots of space and if you're running a small instance a small container to do a front-end development so you kind of have to jack jaggery a little bit and the bootstrap storybook team is still an active development development so basically what happening yeah if you use that create something if the parent parent thing has been updated you you kind of have to keep your eyes on that so the latest um bootstrap storybook my hobby should be on the note 12 so make sure you use note version 12 and there's also like me how i i have it so i still spend some time to put everything together so i think that's it thank you guys for coming and um i think for the short short timeframe i only can do this so if you have any questions just to ask me and that's all from me and that's my handle in tribal.org so if you have any question pay me from there so that's it thank you any questions so oh thank you thanks uh yeah yeah so everyone have have a question you want to sue to me oh thanks thanks erica um yeah i'm trying to actually make the percentage shorter than 20 minutes um yeah i try to avoid to do a live presentation but um i've been playing this thing for a while so if you guys have any question that you can pay me afterwards um oh yeah just raise questions um in the drip.org um apparently i'm actually they're putting me as a mentor right now so um yeah but i kind of get inspired by this thing so yeah oh thank you thanks all right all right uh no more technical questions uh how do you upgrade new version of push trap all right what do you mean university uh new version uh bootstrap 5 is on the track but guessing i'm guessing um the the developer this guy uh mainly developed this bootstrap storybook thing is a main person he told me is he's going to on a track or sinking upgrade to bootstrap five five but so far both strap four still good to to go but i think eventually but i think you can try by yourself because basically i already told you is um if you get your right to into in in a in this fight structure you basically can do everything you like i think you just need to spend some time to put everything together but um yeah oh yeah so it's actually bootstrap forward version right now you can just try it out yeah so it's bootstrap for um i haven't used i have to use this for my work um yeah everything turned out it's pretty good right all right um is is a you can can everyone see my slice was it when i when i did in my presentation the slice was all right okay i think the session going to finish so all right thank you yeah thanks so much you told me that i can't really see the the slice all right thank you for coming you guys have a good time

Channel: DrupalSouth

Views: 133

Rating: 5 out of 5

Keywords:

Id: 40HAbkmyy9U

Length: 18min 57sec (1137 seconds)

Published: Wed Nov 25 2020