You could even try restyling the design to fit on a page with clearer typography, different background color, or even field input icons. I really like the style of this form because it feels so clean and fits nicely into any page background. I just think it's a nice little extra feature to expand the design qualities of the interface. Of course these switches are not required to get the horizontal form design working on your website. EDIT CSS PRESTASHOP RESPONSIVE COLUMNS HOW TOIt has a lot of code snippets which explain how to run the plugin with a single switch, and the purpose of multiple switches on the same page. To learn a bit more about the code check out the Switchery documentation. So for each element passed into the function(parameter html) we apply the Switchery method. Since everything is run manually through JavaScript the code new Switchery must be executed for each checkbox or it will just look like a typical HTML field. Then below this variable we have a forEach() loop running through each of the selected elements. In this case I'm using the default class. querySelectorAll to match every element using the switch class. With regular JavaScript it's difficult to select all elements without a special loop or function. The JS code might seem a little confusing but hopefully you can understand the basics. var elems = (document.querySelectorAll('.js-switch')) Since this plugin doesn't use jQuery the code samples are written in plain JavaScript. EDIT CSS PRESTASHOP RESPONSIVE COLUMNS FOR FREEThere's not a whole lot of code required and the snippets are available for free on the Switchery website. Focusing on the simplest mobile elements will allow the interface to scale up naturally.Īssuming you've already included the Switchery CSS and JS files we can move onto the setup. But other developers prefer working from mobile first and building out because it forces critical thinking. Some people may find this confusing and it's perfectly fine to rewrite the code if that would help. So the media queries actually target how the form will look beyond 850px width. Using this method all of the basic styles are meant for the responsive theme first. EDIT CSS PRESTASHOP RESPONSIVE COLUMNS FULLPercent-based widths take into account the full width of the container which makes everything clean and responsive. The media queries posted above signify how the individual columns should form. I think this redesign looks a lot cleaner because it makes the white background feel more like flat paper, rather than digitally textured. I've changed the colors and updated how the input fields animate when focused. Most of the general page structure was copied and revamped from the original CodePen edit. This forces each input to have its own line in the form, offering a lot more space to mobile users. Once the page goes below 850px each form field is displayed as a blockline element. As the page shrinks smaller each field block will also shrink to maintain the same ratio. col-submit is a fullwidth container centering the submit button. The internal labels and input fields are surrounded by grey borders and lots of padding.Īt the very bottom. Each individual div is meant to give the impression of a small block in an application form. These column widths are generated using CSS to ensure the perfect amount of space for each input field. You'll notice that each row in the form has a different class of divs. At the very top I've placed a large header using the font Laila from Google Web Fonts. The page is contained within a div using the ID #wrapper centered and fixed on the page. Moving down into the page body things can seem a little muddied. Horizontal Application Form - Template Monster Demo EDIT CSS PRESTASHOP RESPONSIVE COLUMNS DOWNLOADLuckily this doesn't require jQuery so all you need to do is download a local copy of the CSS & JS files from the GitHub repo. After testing out a few different plugins I chose Switchery - an open source JavaScript library for creating iOS-style ON/OFF switches. Read on to learn how to build responsive css3 form fields yourself and take a peek at my live sample demo below:įirst I'm setting up a local HTML5 page with an external CSS file named styles.css. I took the original design and expanded the concept to include another row of fields, custom submit button, and a some iOS7 checkbox switches. This stood out to me as a form you might see on a detailed job application page. The form itself is very clean, minimalist, and designed to be responsive. Recently I stumbled onto a free form PSD which was then rebuilt into an HTML/CSS CodePen. Advancing CSS3 techniques offer a wide array of solutions for previously complicated page effects. This has opened a treasure chest full of neat ideas for responsive layouts, page structures, and of course form fields. Developers are growing much more comfortable using CSS3 properties in major website projects.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |