Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Domenic 42 posts 128 karma points
    Apr 24, 2017 @ 20:09
    Domenic
    0

    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

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Apr 25, 2017 @ 01:15
    Nicholas Westby
    0

    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.

  • Domenic 42 posts 128 karma points
    Apr 25, 2017 @ 19:13
    Domenic
    0

    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

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Apr 25, 2017 @ 21:21
    Nicholas Westby
    100

    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 it 6u(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#L12

    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).

    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

  • Domenic 42 posts 128 karma points
    Apr 25, 2017 @ 22:13
    Domenic
    0

    Thank you for the wonderful information and help! I will read everything you sent me.

    Most grateful,
    Domenic

  • Domenic 42 posts 128 karma points
    Apr 25, 2017 @ 15:13
    Domenic
    1

    Thank you Nicholas :)

    I look forward to trying it out. I also wanted to compliment you on your tremendous progress with Formulate.

    Regards,
    Dom

Please Sign in or register to post replies

Write your reply to:

Draft