ribs-admin-bundle-templates/public/pages/dashboard.html

This package contain html css and js of RibsAdminBundle

<div class="ribs-container-fluid">
	<div class="page-title">
		<span>Global</span>
		<h3>Form et composants</h3>
	</div>

	<div class="row">
		<div class="cxs-12 cmd-8">
			<form action="" class="ribs-form">
				<div class="block">
					<header>
						<h5>Champs du formulaire</h5>
					</header>


					<div class="row form-section">
						<div class="cxs-12 cmd-4">
							<h6>Checkboxes</h6>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox checked cxs-2" id="checked1">
								<label for="checked1" class="cxs-6">Checked type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox checked cxs-2" id="checked2" checked>
								<label for="checked2" class="cxs-6">Checked type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox checked cxs-2" id="checked3" disabled>
								<label for="checked3" class="cxs-6">Checked type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox checked cxs-2" id="checked4" disabled
									   checked>
								<label for="checked4" class="cxs-6">Checked type</label>
							</div>
						</div>
						<div class="cxs-12 cmd-4">
							<h6>Radio button</h6>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox rounded cxs-2" id="rounded1">
								<label for="rounded1" class="cxs-6">Rounded type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox rounded cxs-2" id="rounded2" checked>
								<label for="rounded2" class="cxs-6">Rounded type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox rounded cxs-2" id="rounded3" disabled>
								<label for="rounded3" class="cxs-6">Rounded type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox rounded cxs-2" id="rounded4" checked
									   disabled>
								<label for="rounded4" class="cxs-6">Rounded type</label>
							</div>
						</div>
						<div class="cxs-12 cmd-4">
							<h6>Toggle switches</h6>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox switched cxs-2" id="switched1">
								<label for="switched1" class="cxs-6">Switch type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox switched cxs-2" id="switched2" checked>
								<label for="switched2" class="cxs-6">Switch type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox switched cxs-2" id="switched3" disabled>
								<label for="switched3" class="cxs-6">Switch type</label>
							</div>
							<div class="row form-group">
								<input type="checkbox" class="ribs-checkbox switched cxs-2" id="switched4" checked
									   disabled>
								<label for="switched4" class="cxs-6">Switch type</label>
							</div>
						</div>
					</div>

					<div class="row form-section">
						<div class="row form-group">
							<div class="cxs-12">
								<h6>Select</h6>
							</div>

							<div class="cxs-12">
								<select name="" id="" class="form-control">
									<option value="1">Option 1</option>
									<option value="2">Option 2</option>
								</select>
							</div>
						</div>
					</div>

					<div class="form-section">
						<div class="row form-group">
							<div class="cxs-12">
								<h6>Buttons</h6>
							</div>

							<div class="cxs-12">
								<button class="ribs-button">Primary</button>
								<button class="ribs-button secondary">Secondary</button>
								<button class="ribs-button success">Success</button>
								<button class="ribs-button danger">Danger</button>
								<button class="ribs-button warning">Warning</button>
								<button class="ribs-button info">Info</button>
								<button class="ribs-button dark">Dark</button>
								<button class="ribs-button white">White</button>
							</div>
						</div>
						<div class="row form-group mt1">
							<div class="cxs-12">
								<h6>Buttons outline</h6>
							</div>

							<div class="cxs-12">
								<button class="ribs-button outline">Primary</button>
								<button class="ribs-button secondary outline">Secondary</button>
								<button class="ribs-button success outline">Success</button>
								<button class="ribs-button danger outline">Danger</button>
								<button class="ribs-button warning outline">Warning</button>
								<button class="ribs-button info outline">Info</button>
								<button class="ribs-button dark outline">Dark</button>
								<button class="ribs-button white outline">White</button>
							</div>
						</div>
					</div>

					<div class="row form-section">
						<div class="cxs-12 cmd-6">
							<h6>Forms</h6>

							<div class="form-group">
								<label for="name">Prénom</label>
								<input type="text" class="form-control" id="name" name="name">
							</div>
							<div class="form-group mt1">
								<label for="lastname">Nom</label>
								<input type="text" class="form-control" id="lastname" name="lastname">
							</div>
							<div class="form-group mt1">
								<div class="input-group">
									<div class="input-prepend">
										<span>test text</span>
									</div>
									<input type="text" class="form-control" id="mail" name="mail">
								</div>
							</div>
							<div class="form-group mt1">
								<select name="select" id="select" class="form-control">
									<option>Option 1</option>
									<option>Option 2</option>
									<option>Opetion 3</option>
								</select>
							</div>
							<div class="form-group mt1">
								<label for="autocomplete">Autocomplete</label>
								<input type="text" class="form-control input-autocomplete" id="autocomplete" name="autocomplete">
							</div>
						</div>
						<div class="cxs-12 cmd-6">
							<h6>Validations</h6>

							<div class="row">
								<div class="cxs-12 cmd-6 form-group">
									<label for="namevalid">Prénom</label>
									<input type="text" class="form-control is-valid" id="namevalid" name="namevalid"
										   value="Sierra">
									<div>Ce prénom est valide</div>
								</div>
								<div class="cxs-12 cmd-6 form-group">
									<label for="lastnamevalid">Nom</label>
									<input type="text" class="form-control is-invalid" id="lastnamevalid"
										   name="lastnamevalid" value="Brooks">
									<div>Ce nom est invalide</div>
								</div>
							</div>

							<div class="row">
								<div class="cxs-12 cmd-6 form-group">
									<label for="username">Nom d'utilisateur</label>
									<input type="text" class="form-control is-invalid" id="username" name="username"
										   value="s.brooks">
									<div>Ce nom d'utilisateur est déjà utilisé</div>
								</div>
								<div class="cxs-12 cmd-6 form-group">
									<label for="email">Email</label>
									<input type="text" class="form-control is-valid" id="email" name="email"
										   value="s.brooks@example.com">
									<div>Cet email est valide</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
		<form class="cxs-12 cmd-4 ribs-form">
			<div class="block">
				<header>
					<h5>Form groups</h5>
				</header>

				<div class="row form-section">
					<div class="cxs-12">
						<h6>Input groups</h6>

						<div class="form-group mt1">
							<div class="input-group">
								<div class="input-prepend">
									<span>@</span>
								</div>
								<input type="text" class="form-control" id="username1" name="username"
									   placeholder="Nom d'utilisateur">
							</div>
						</div>

						<div class="form-group mt1">
							<div class="input-group">
								<input type="text" class="form-control" id="email2" name="email"
									   placeholder="Adresse email">
								<div class="input-append">
									<span>@anthony-pilloud.fr</span>
								</div>
							</div>
						</div>

						<div class="form-group mt1">
							<div class="input-group">
								<div class="input-prepend">
									<span>€</span>
								</div>
								<input type="text" class="form-control" id="amount" name="amount" placeholder="1000">
								<div class="input-append">
									<span>.00</span>
								</div>
							</div>
						</div>

						<div class="form-group mt1">
							<div class="input-group">
								<div class="input-prepend no-p">
									<button class="ribs-button white" type="button">Ajouter</button>
								</div>
								<input type="text" class="form-control" id="user" name="user"
									   placeholder="Nom d'utilisateur">
							</div>
						</div>

						<div class="form-group mt1">
							<div class="input-group">
								<input type="text" class="form-control" id="user1" name="user1"
									   placeholder="Nom d'utilisateur">
								<div class="input-append no-p">
									<button class="ribs-button white" type="button">Ajouter</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row form-section">
					<div class="cxs-12">
						<h6>Input groups less border</h6>

						<div class="form-group mt1">
							<div class="input-group no-separation">
								<div class="input-prepend">
									<span>@</span>
								</div>
								<input type="text" class="form-control" id="username2" name="username2"
									   placeholder="Nom d'utilisateur">
							</div>
						</div>

						<div class="form-group mt1">
							<div class="input-group no-separation">
								<div class="input-prepend">
									<span>€</span>
								</div>
								<input type="text" class="form-control" id="amount1" name="amount1" placeholder="1000">
								<div class="input-append">
									<span>.00</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="block">
				<header>
					<h5>Sliders and progress bar</h5>
				</header>

				<div class="row content">
					<div class="cxs-12">
						<div class="progress-bar">
							<div style="width: 20%"></div>
						</div>
					</div>
				</div>
			</div>

			<div class="block">
				<header>
					<h5>Content block</h5>
				</header>

				<div class="row content">
					<div class="cxs-12">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, distinctio
							dolores
							ex expedita ipsa laborum minus nesciunt praesentium qui quidem quisquam repellendus
							voluptates.
							Ad delectus error libero totam vero?</p>
					</div>
				</div>

				<footer class="row center-xs">
					<a href="" class="ribs-button white center">Tout voir</a>
				</footer>
			</div>
		</form>
	</div>
</div>

<script src="../node_modules/ribs-checkbox/dist/js/ribs-checkbox.js" async></script>
<script src="../dist/js/form.js"></script>