I'm using skel.js, an alternative to bootstrap along with some heavy css for my site. I'm having a heck of a time styling using Umbraco HQ's product. Your forms system seems to be more efficient dealing with look and feel, multiple columns etc. Will it work with skel? Thanks.
I don't see why it wouldn't work with Skel. If you run into difficulties, I'd be happy to help.
Worst case scenario, you can create your own template that renders with Skel-specific markup. Though, that's basically the nuclear option if you can't get it working otherwise.
It's worth noting that the default template (Responsive Bootstrap Angular) handles rows/columns in a particular way. While field types (e.g., upload, text, button, etc.) can be overridden, there isn't currently a simple way to override the row/column rendering. Maybe that would be a useful feature if Skel requires a particular sort of layout.
Let me know how it works out for you and we can chat further.
I installed Formulate and got a very basic form up and running. As per your documentation I had to include a number of additional js libraries, of course bootstrap. I also tried just swapping skel with bootstrap in my master template with encouraging results.
My concern is that I would have to re-write quite a bit code with skel specific markup if I stick with that grid system. If I go the bootstrap route it significantly alters the look and feel of the site, unless I'm missing something? I'm a bit green with CSS/grid systems. Thanks again :)
You'd simply modify that line to generate the Skel version. Note that this is the uncompiled JavaScript. In your install of Formulate, this JavaScript will be bundled into the file ~/App_Plugins/formulate/responsive.bootstrap.angular.js. If you are interested in making this upgrade-proof, let me know. It's a bit more work, but will serve you better in the long run.
Bootstrap is Optional
By the way, the Bootstrap stuff is included just for convenience. I'd recommend styling things so they fit with the theme of the rest of your site (i.e., I wouldn't recommend including the Bootstrap CSS at all). IIRC, the Bootstrap JavaScript isn't used for anything (i.e., you should be able to remove it without issue).
skel.js
Hi Nicholas,
I'm using skel.js, an alternative to bootstrap along with some heavy css for my site. I'm having a heck of a time styling using Umbraco HQ's product. Your forms system seems to be more efficient dealing with look and feel, multiple columns etc. Will it work with skel? Thanks.
Domenic
I don't see why it wouldn't work with Skel. If you run into difficulties, I'd be happy to help.
Worst case scenario, you can create your own template that renders with Skel-specific markup. Though, that's basically the nuclear option if you can't get it working otherwise.
It's worth noting that the default template (Responsive Bootstrap Angular) handles rows/columns in a particular way. While field types (e.g., upload, text, button, etc.) can be overridden, there isn't currently a simple way to override the row/column rendering. Maybe that would be a useful feature if Skel requires a particular sort of layout.
Let me know how it works out for you and we can chat further.
Hello again Nicholas,
I installed Formulate and got a very basic form up and running. As per your documentation I had to include a number of additional js libraries, of course bootstrap. I also tried just swapping skel with bootstrap in my master template with encouraging results.
My concern is that I would have to re-write quite a bit code with skel specific markup if I stick with that grid system. If I go the bootstrap route it significantly alters the look and feel of the site, unless I'm missing something? I'm a bit green with CSS/grid systems. Thanks again :)
Dom
Use Skel Grid System
Sounds like you have a few approaches you could take. I'll just assume you want to go with Skel. If that's the case, you'll want to modify Formulate so it uses Skell's grid system. Seems like the main difference is that Bootstrap would call a class
col-md-6, whereas Skel would call it6u(medium). Not too much of a difference. Here's the line of JavaScript that generates that in Formulate: https://github.com/rhythmagency/formulate/blob/6800dbe067e27c0b33c8ea484510849a83e7584f/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form/rows.js#L12You'd simply modify that line to generate the Skel version. Note that this is the uncompiled JavaScript. In your install of Formulate, this JavaScript will be bundled into the file
~/App_Plugins/formulate/responsive.bootstrap.angular.js. If you are interested in making this upgrade-proof, let me know. It's a bit more work, but will serve you better in the long run.Bootstrap is Optional
By the way, the Bootstrap stuff is included just for convenience. I'd recommend styling things so they fit with the theme of the rest of your site (i.e., I wouldn't recommend including the Bootstrap CSS at all). IIRC, the Bootstrap JavaScript isn't used for anything (i.e., you should be able to remove it without issue).
General Grid System Info
Some more food for thought is that grid systems aren't all that hard to recreate. In fact, I created this page to assist with that (unrelated to Formulate): http://rhythmagency.github.io/reference/tutorials/grid-1/
If you view the source of that page, you'll see some comments that explain all of the CSS and how it works to create a grid system.
You might also be interested to know that you can generate a version of Bootstrap that just contains the grid system: http://stackoverflow.com/questions/20403443/how-to-get-just-the-responsive-grid-from-bootstrap-3
Thank you for the wonderful information and help! I will read everything you sent me.
Most grateful,
Domenic
Thank you Nicholas :)
I look forward to trying it out. I also wanted to compliment you on your tremendous progress with Formulate.
Regards,
Dom
is working on a reply...