I have officially started. 

oh dat nice!

I'm trying to think up a name for a subsection of like .... plain ole' aesthetics. For things like what ‌ posted. SOME of them are for buttons / toggles, but the rest are just icons for aesthetics sake. 

Thoughts?

Otherwise, I have: 

- How to Use This Guide

- Text

- Text Input / Field

- Choices (checkbox, y/n, dropdown, etc)

- Buttons

- Form Display (for things like removing SharePoint buttons)

- Backgrounds / Borders

- Validation

- Images

- Icons (?) or should this just be part of images?

Anything else you'd like to see?

Each section will start with "this is what it looks like without any CSS" 

How about "Styling basics" or "Styling 101"

Good idea, ‌ - what do you envision that including? Things like "try to stick to 2 fonts maximum: 1 font for headers / subheaders, and 1 font for all else" and "only use 2 colours per form that conform to your branding"?  Stuff like that?

Rhia Wieclawek‌ maybe we just need a "blue steel" category for CSS that makes your forms "ridiculously good looking..."

or even "Le Tigre". It is a Little bit smoother. ;-)

Lol

What about those of us who can't read good?

what is this?! CSS for ANTS!??!

ROFL now I know I've found my tribe... well played! 

‌ ‌ ‌ ‌

yes, and maybe some basic styling tipps and tricks. Like how to style buttons (in general).

Looks more like REVLON...

Hmmmm, This all sounds like "Fancy Dress Up" for me :)

I'm on a 4.5 hr flight in a couple of days so I'll be able to put more of this together. If I have wifi maybe I'll even be able to upload it!

I'M SO EXCITED YOU GUYS

Progress attached.

So the first issue I'm running into, is that I want it to be just CSS - without needing to upload anything into the site anywhere to reference. Just simple stuff to add into the Settings. So I'll put resources in there (for example, for FontAwesome stuff that Patrick wrote about) but won't put them as copy/paste things.

Second, I'm testing everything before I add it so I can show screenshots in the side. 

The "how to use this guide" will explain how to add in CSS, with a brief outline of some of the css thingies (colour, radius, etc) and how you can change those.

This is meant to be for people - like me - who know nothing about CSS.

Would like your thoughts as I continue to work on it.

‌ ‌

PS I'd really like to see some text input CSS. 

That's a great beginning

What would be awesome is to mention the browser versions it has been tested on. There are always differences and unsupported features from one browser to another one .

It's always easier to upload a file, reference it in the settings of the form and then just add the right CSS class to the control. But I can see the advantage of just sharing CSS (rather than a reference file), users will then select and adapt what they like and build their own company style sheet.

When testing, have you added all type of controls in the form? Sometimes there are side effects as you don't always use CSS classes (I advice you to use CSS classes ).

Great job Rhia !!

Thanks for your comments, ‌!

I am testing in IE11, I guess I should test across all!

Can you explain to me about classes, and how to use those within the form?

no problem .

On every control in Nintex Forms you can add a CSS Class: in the control settings, Formatting section then CSS class field.

If you add "my-custom-select" CSS class to a dropdown list control, for example, you can use the following CSS declaration:

select.my-custom-select {}

instead of:

select {}

This way the style you will define in the curly brackets will only be applied to the control having "my-custom-select" CSS class and there won't be side effects

Hey Caroline, Lets be honest here, If it works in IE11 it will work in the other browsers.

IE is the only browser that has major issues still rendering.

Honestly do not think Rhia should have to spend any additional time trying testing on the other browser the user whom make use of that code can test and enhance the code where needed.

PS - I like the idea to add my-custom-select css class.

Kind Regards

You're right. But I know Companies still using IE9 . I just wanted her to mention on which browser it has been tested so that future users will be aware about that (not necessarily testing on every browsers).

I was sometimes surprised that a particular CSS worked on IE but not on Mozilla Firefox or Chrome (I admit, it was rarely).

HEHEHE.

I am aware of these companies, We ourselves have to custom our IE11 browser to support other applications.
Just my opinion that it should be the users responsibility to test if it will work in their environment.

Anyways, Keep up the good work.

Don't forget that sometimes Sharepoint can also do mean things like restrict the IE render version to something lower than the actual browser (especially for IE 11) using that silly tag: 

<meta http-equiv=”X-UA-Compatible” content = “IE=x”>‍

Unless you have access to the Masterpage, it can be a real roadblock in developing good (or at least partially modern) javascript / css for Nintex Forms.

Thanks, I have not come across any problems as yet. However we are moving over to EDGE in the near future..

This is however very helpful.

I suppose that maybe I should also maybe just go on and say how to fix it, instead of dropping mysterious hints!

I'm using SharePoint 2016, but I don't see why this wouldn't work for 2013, but I can neither confirm nor deny, so, just give it a shot and try not to break anything! 

If you have access to create a new Master Page, in the <head> of the html, you can find a meta tag that will look like: 

<head>
  <meta http-equiv=”X-UA-Compatible” content = “IE=x”>
‍‍‍‍

To override it, simply place another meta-tag above it that targets "edge" to make IE 11 not emulate down. 

<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />‍‍‍‍‍‍‍‍‍

For those who are wondering how to check if browser emulation is happening. Navigate to your SharePoint site using IE, and press F12 to open the developer console. Once the console opens, you'll see a tab called Emulation, and next to it a pictograph of a computer monitor along with the current browser version that is being emulated / targeted. 

Here is a screenshot of a SP2013 server that doesn't have the above fix 

And here is a screenshot of the 2016 Dev Site that I'm using which does have a corrected MasterPage

To learn more about Browser Emulation, checkout the following link: Emulate browsers, screen sizes, and GPS locations (Windows) 

Thanks for all your valuable comments and attachments. Looking forward for the Catalog.