PDA

View Full Version : Want feedback on a bootstrap html/css template



rhone101
Mar 9th, 2015, 03:18 AM
Hi,
I am a UI flat Designer who is a sophomore HTML/CSS/bootstrap designer. I am going to be asked to created the HTML/CSS templates for an Angular browser based application. NOTE: the developers do not want any hooks, they literally just want the UI in an HTML/CSS format for styling the application. What I am looking for is feedback on whether my code (below) is following what you consider best practices and forethought to re-usability (IE not defining sizes, only padding and margins. Any all feedback welcome. The css is at the bottom of the file. If you have any questions I will respond asap.



<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link media="all" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<div class="content_container">
<div class="row ">
<div class="content_header">
<div class="heading_title">
<span><h3 class="panel-title">
<span class="fa-stack"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-th-large fa-stack-1x"></i></span> Passage One - Russian</h3>
</span>
</div><!--panel_heading--->
</div><!--header--->
</div><!--row--->
<div class="passage_container">
<div class="row">
<div class="col-md-4">
<div class="preview_container">
<div class="panel-heading_passage">Passage One</div>
<div class="passage_preview_container">
<div class="col-md-12">
<div class="passage_preview_content">
<p>Una investigación está en marcha después de un competidor canino murió el día después de tomar parte en Crufts , una de las más prestigiosas exposiciones caninas del mundo. La autopsia indica que fue envenenado .</p>
</div>
</div><!--end passage preview container col--->
</div><!---end passage_preview_container--->
<div class="translation_preview_heading">Translation Preview</div>
<div class="translation_preview_container">
<div class="col-md-12">
<div class="translation_preview_content">Florida residents Patrick and Sue Johnson knew the storm was coming. They tried to get out of northern Kentucky on Wednesday night. Instead, they got stuck in the snow on Interstate 65.>The couple and their two dogs were still there Thursday morning, more than 14 hours later. "We're just sitting here praying, hoping to get out," Patrick Kilgallon told CNN on Thursday.</div>
</div><!--end translation preview col--->
</div><!---end translation_preview_container--->
</div><!--end trans and passage preview_container--->
</div><!--end left side preview columns--->
<div class="col-md-8">
<div class="panel-heading_translation">My Translation</div>
<div class="form col-md-12">
<form action="/" class="passage_translation" method="post">
<div class="form-group">
<div class="translation_sentence_block">
<div class="source_sentence">
<p>Флорида жителей Патрик и Сью Эллен Johnson зналшторм приближается. Они пытались выбраться из северной Кентукки.</p>
</div><!---end source_sentence---->
<textarea class="form-control" id="sentence_1" placeholder="Enter Sentence One Translation Here......"></textarea>
</div><!---end sentence_block---->
</div><!---end form-group--->
<div class="form-group">
<div class="translation_sentence_block">
<div class="source_sentence">
<p>Вместо этого, они застряли в снегу на шоссе 65 </p>
</div><!---end source_sentence---->
<textarea class="form-control" id="sentence_2" placeholder="Enter Sentence Two Translation Here......"></textarea>
</div><!---end sentence_block---->
</div><!---end form-group--->
<div class="form-group">
<div class="translation_sentence_block">
<div class="source_sentence">
<p> " Мы просто сидим здесь молиться , надеясь выйти, " сказал Патрик Kilgallon CNN в четверг.</p>
</div><!---end source_sentence---->
<textarea class="form-control" id="sentence_3" placeholder="Enter Sentence Three Translation Here......"></textarea>
</div><!---end sentence_block---->
</div><!---end form-group--->
</form><!--end form div---->
</div><!---end translation entry column ----->
<div class="col-md-10"></div>
<div class="advance_button col-md-2">
<button type="button" class="btn btn-info btn-lg">Next Passage<i class="fa fa-arrow-circle-right fa-1x"></i>
</button>
</div><!--end button columns---->
</div><!--end form column--->
</div><!--end tanslation column--->
</div><!--end page container row--->
</div><!--content_container--->


<style>
div.main-container.container {
width: 70% !important;
max-height: 50% !important;
padding-top: 100px;
}

.page-header {
display: none;
}

footer {
display: none;
}

.navbar.container {
max-width: 1140px;
display: none;
}

.content_header {
background-color: #3571ba;
height: 50px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 25px;
border: 2px solid;
border-color: #3571ba;
}

.heading_title {
padding: 5px 0px 0px 25px;
}

.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 15pt!important;
}

.content_header,
.content_header i {
color: #fff;
}

.content_header i {
padding-right: 5px;
padding-left: -15px;
}

.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
font-size: 15pt;
vertical-align: middle;
}

.panel-heading_passage {
padding: 5px 0px 10px 15px;
font-size: 1.2em;
font-weight: bold;
color: #3571ba;
}

.translation_preview_heading {
padding: 5px 0px 10px 15px;
font-size: 1.2em;
font-weight: bold;
color: #4C4C4C;
}

.passage_preview_container {
margin-left: 10px;
background-color: #3571ba;
color: #fff;
border-radius: 5px;
margin-bottom: 15px;
min-height: 250px;
}

.translation_preview_container {
margin-left: 10px;
background-color: #efedee;
color: #6d6d6d;
border-radius: 5px;
min-height: 200px;
}

.content_container {
background-color: #f9f9f9;
border-radius: 5px;
border: 0px solid;
border-color: #c1c1c1;
margin-right: 15px;
margin-left: 15px;
padding-bottom: 25px;
width: 100%;
}

.passage_preview_content {
padding: 15px 0px 0px 0px;
}

.translation_preview_content {
padding: 15px 0px 0px 0px;
}

.translation_sentence_block {
border-radius: 3px;
background-color: #ececec;
padding: 8px;
margin-bottom: 8px;
}

.source_sentence {
border-radius: 5px;
background-color: #3571ba;
padding: 10px;
color: #fff;
margin-bottom: 8px;
}

.passage_container {
padding-right: 20px;
padding-left: 20px;
}

.source_sentence,
.p {
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
}

div.translation_sentence_block textarea {
width: 100% !important;
border-radius: 5px;
padding: 10px;
background: #fff;
border: none!important;
box-shadow: 4px 4px 4px #cecece inset;
}

.sentence_label {
padding: 0px 0px 7px 0px;
font-size: .8em;
color: #818181;
}

.panel-heading_translation {
padding: 5px 0px 10px 15px;
font-size: 1.1em;
font-weight: bold;
color: #484848;
}

div.panel-heading span .panel-title {
top: -7px;
position: relative;
}

i.fa.fa-arrow-circle-right {
font-size: 16pt;
margin-left: 50px;
vertical-align: middle;
}

button.btn.btn-info.btn-lg {
float: right;
margin-top: 30px;
background-color: #4498de;
background-image: none;
border: none;
height: 41px;
width: 210px;
color: #fff;
padding: 0px;
font-size: 1.2em;
}

.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
color: #fff;
background-color: #3571ba !important;
border-color: #3571ba !important;
}

body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}

h1, h2, h3, h4, h5, h6,.h1,.h2,.h3,.h4,.h5,.h6 {
font-family: "font-family: 'Open Sans', sans-serif;

}
</style>

VIPStephan
Mar 9th, 2015, 09:43 AM
I’m probably going to arise a heated argument but from my personal and professional point of view the best practice is not to use Bootstrap at all. I’m getting a headache if I see all those links and references to external third-party servers downloading a lot of unnecessary bloat. I mean, how many megabytes does the client have to download before looking at your simple “flat UI”? Then, also, Bootstrap makes you write a lot of redundant and non-semantic HTML code for no good reason (which, additionally, has a few errors).

The best practice is to create your own slim and reusable template system using semantic HTML (https://en.wikipedia.org/wiki/Semantic_HTML) and progressive enhancement (https://en.wikipedia.org/wiki/Progressive_enhancement) specifically for this application. In the end it will save you (and anyone else) a lot of work in maintenance and a lot of bandwidth for your servers and your users.