Watson
Watson
Reputation Top 10%
Watson
1 Snippet  (434th place)
Published
1 Channel
Created
1 Channel
Following
Mar 25, 2017
Last Visit
Jul 5, 2015
Registered
30 points  (1062nd place)
Reputation
Junior Code Generator
Junior Publisher
Junior Trend Maker
Junior Autobiographer
Serious Autobiographer
Junior Famous Coder

Recent Snippets See all snippets by Watson

public by Watson created Jan 19, 2017  2241  1  4  1

simple Generator duplicate classes CSS

		<?php
		if(isset($_POST['submit'])){
			$count = $_POST['count'];
			$shag = $_POST['shag'];
			$prefix = $_POST['prefix'];
			$postfix = $_POST['postfix'];
			$attribut = $_POST['attribut'];
			$znachenie = $_POST['znachenie'];
		}
		function rasschet($count, $shag, $prefix, $postfix, $attribut, $znachenie){
			$html = '';
			for($i = 0; $i<=$count; $i++){
				if ($shag != ''){
					if($i%$shag == 0){
						$html .= ".".$prefix.$i.$postfix." { ".$attribut.": ".$i.$znachenie.";}<br/>";
					}
				}
			}
			echo $html;
		}

		?>
		<!DOCTYPE html>
		<html lang="ru">
		<head>
			<meta charset="UTF-8">
			<title>simple Generator duplicate classes CSS</title>
		</head>
		<body>
			<div class="container">
				<div class="row">
					<div class="page-header">
						<h2>Generator duplicate CSS .class {attr: value;}</h2>
					</div>
				</div>
				<div class="row">
				<div class="panel-group"><div id="examp" class="panel panel-success"><div class="panel-heading"><a data-toggle="collapse" href="#collapse0" class="btn btn-primary"> <i class="indicator glyphicon glyphicon-collapse-down"></i> Example</a></div><div id="collapse0" class="panel-collapse collapse "><div class="panel-body">
					<div class="col-sm-6">
											<div class="panel panel-primary">
							<div class="panel-heading"><h4>example input:</h4></div>
							<div class="panel-body">
							max volume : 25<br/>
							step: 5<br/>
							prefix : max_w<br/>
							postfix : p<br/>
							attribute class : max-width<br/>
							units : %
					</div>
				</div>
					</div>
					<div class="col-sm-6">
						<div class="panel panel-primary">
							<div class="panel-heading"><h4>example out:</h4></div>
							<div class="panel-body">
							<code>.max_w0p { max-width: 0%;}<br/>
							.max_w5p { max-width: 5%;}<br/>
							.max_w10p { max-width: 10%;}<br/>
							.max_w15p { max-width: 15%;}<br/>
							.max_w20p { max-width: 20%;}<br/>
							.max_w25p { max-width: 25%;}</code>
						</div>
						</div>
					</div>
					</div></div></div></div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="thumbnail">
							<form action="service_css.php" method="post">
								<div class="form-group"><input type="text" name="count" value="" placeholder="max volume attribute of class" class="form-control"></div>
								<div class="form-group"><input type="text" name="shag" value="" placeholder="step volume" class="form-control"></div>
								<div class="form-group"><input type="text" name="prefix" value="" placeholder="prefix of name css class" class="form-control"></div>
								<div class="form-group"><input type="text" name="postfix" value="" placeholder="postfix of name css class" class="form-control"></div>
								<div class="form-group"><input type="text" name="attribut" value="" placeholder="attribute class" class="form-control"></div>
								<div class="form-group"><input type="text" name="znachenie" value="" placeholder="units: em, rem, px, pt or %" class="form-control"></div>
								<div class="form-group"><input type="submit" name="submit" value="Submit" class="btn btn-success btn-block"></div>
							</form>
						</div>
					</div>
					<div class="col-md-6">
						<div class="thumbnail">
							<?php 
//echo $html;
							rasschet($count, $shag, $prefix, $postfix, $attribut, $znachenie);
							?>
						</div>
					</div>
				</div>
			</div>


			<!-- Latest compiled and minified CSS & JS -->
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
			<script src="//code.jquery.com/jquery.js"></script>
			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
			<script>
function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find("i.indicator")
        .toggleClass('glyphicon-collapse-down glyphicon-collapse-up');
}
$('#examp').on('hidden.bs.collapse', toggleChevron);
$('#examp').on('shown.bs.collapse', toggleChevron);
			</script>
		</body>
		</html>            
;