Adapt Learning Community: Theme development workflow

Hi,

I am currently getting to grips with theming and I am getting some good results. One thing that bothers me though is the workflow.

I currently have to:

make the required change in the .less files and update the version in the bower.json file
re-zip the folder and re-upload the theme to the authoring tool
rebuild the course I am working on and preview to see the changes I have made.

As you can imagine this is causing a large lag in my design time. Does anyone have a more speedy solution? I guess I am looking for a way to preview on the go as I design to quickly view changes with minimal fuss (maybe using an exported course?)

Hi Nigel

We generally do any theme/plugin/menu development just using the framework initially as it means you can cut out most of what you're describing above. Then, once you're happy with it, you update bower.json and upload to the AT.

Show parent | Reply

Hello! I'm piping in because I am interested as well. I don't understand what AT is but are you suggesting that after the development process (on a local machine or server) when you've downloaded the developed pages and then uploaded onto your server (for the public) to make changes one only needs to update the (shoot - now I don't know) ...you update the bower.json and i haven't come across this.

Is it possible you could more fully explain this. I am at the point where I have tried two authoring methods (using the gui authoring tools - I failed to be able to use it satisfactorily - looks like I had stuff missing) and I am trying the method where you manually update the .json files (objectcomponent, article block etc) and then do a grunt build and refresh the browser. This is my second go at it).

Please

Show parent | Reply

'AT' is the Authoring Tool i.e. the GUI front end for developing courses.

If you're developing themes/menus/extensions/components it's much easier to do that directly in the Framework i.e. 'the method where you manually update the .json files then do a grunt build' and get everything working there before attempting to use what you have developed in the Authoring Tool.

Show parent | Reply

I appreciate the clear and gentle response thank you. I am working the manual way because for the life of me I can't get the virtual machine to load. That is for a different topic though!

Thanks

Show parent | Reply

Hi Matt,

I'm working on a theme using the framework. Is it possible for the less files to be compiled on change rather than having to do a grunt build every time?

Thanks,

Ryan

Show parent | Reply

Never mind, I've figured it out.

"grunt watch" does what I need.

Show parent | Reply

$ grunt dev will do the same thing (and more)

Do $ grunt help to see a list of all the available commands

Show parent | Reply

I've been so ornery but I think I am finally getting somewhere. Thanks.

On the main course page (course.json) I would like the text aligned differently. Perhaps I should be using a block instead. But for learning purposes, where do i change the font alignment from center aligned.

Also - where is the instructions for installing and using the gui authoring tool. I was a mess but uninstalled everything and reinstalled manually using the -g (global??) flag on everything. That has seemed to help. I am more or less successfully editing the course; component object article json files.

Show parent | Reply

Hi Jim

On the main course page (course.json) I would like the text aligned differently. Perhaps I should be using a block instead. But for learning purposes, where do i change the font alignment from center aligned.

If you run $ grunt dev and then $ grunt server (do this in a new command line window) this will build the course with 'source mapping' enabled (and 'watch' running) then launch it in your default browser. Assuming your default browser is a decent one like Firefox (100% Open Source!) or a half-decent one like Chrome (not 100% Open Source) you can then right click the text and select 'inspect element' to open the developer tools and view all the information about that particular DOM element, including what styles are applied to it and - because source mapping is on - which .less file they come from. See attached.

It's best to test any changes by making them in the developer tools first - get the settings you want, then go back and amend the .less files.

If you are not familiar with browser developer tools its worth taking a bit of time to read up on how they work for your chosen browser. Most are pretty similar these days though.

Also - where is the instructions for installing and using the gui authoring tool.

I think this page has everything you need?

Show parent | Reply

Ohh goodness you are treating me like a big kid and I appreciate it! I get the developer tools (clever!!) and I will play with the gui authoring tools tomorrow. Thanks for the help.

Is there a sense that there are many developers using ADAPT in Canada? The idea of it all seems fantastic. My expectation for usability was clearly out-of whack and hence my great appreciation for help.

Cheers

Jim N

Show parent | Reply

In case others stumble through this thread, I want to add a different "start" link for installing the authoring tool: https://github.com/adaptlearning/adapt_authoring/wiki/Installing-the-Authoring-Tool

The content at this link functions as an introduction. It can help one decide which installation method to use. It has a link to the page Matt references above.

Show parent | Reply

Thanks Matt, very useful.

I've been using grunt build --theme=adapt-my-theme to build my course with my own custom theme.

Is it possible to install my custom theme as described at the following link without making it publicly available?

https://github.com/adaptlearning/adapt_framework/wiki/Styling-your-course

Sorry for another question, just trying to get my head round the best way to develop with the framework.

Show parent | Reply

as far as I'm aware you just replace the theme that's currently in src/theme with your own...

I'm not a front-end person so I may be wrong about that! But if that doesn't work just hop on here and let me know

Show parent | Reply

Ha! I know I say I'm getting there every time but I am getting somewhere.

At this moment I have both the vagrant version of adapt running (displayed at localhost:5000) and the grunt version (displayed at localhost:9001). It feels like I only got it going through sheer luck. It isn't clear to me how I can get both systems running at the same time on the same adapt document (or course I suppose it is) or in the same directory or whatever. In fact when I look at the directory for adapt authoring (localhost:9001) - I see some vagrant files and no directories? Where is the actual adapt-learning instance that shows up at localhost:9001.

Because - I would like to use the vagrant virtual machine (at 9001) for editing the text and adding components but I would like to edit the .less files and recompile it all using the instructions which display the pages at localhost:5000.

Show parent | Reply