Showing posts with label bootstrap. Show all posts
Showing posts with label bootstrap. Show all posts
Sunday, January 1, 2017
Thursday, September 8, 2016
GlobalMedicine Wordpress
Customized Solutions for Global Medical Information
Clients tell us that we provide a flexible, responsive, and personable experience for them. And at ProPharma Group, those clients come from all over the world.
With strategically positioned contact centers around the world, we can provide a truly global solution to the medical information (MI) needs of pharmaceutical, biotechnology, and medical device companies.
By outsourcing pharmaceutical contact center services to ProPharma Group, our clients are able to alleviate challenges associated with developing and maintaining an internal department. Our five globally integrated, international contact centers are staffed with pharmacists, nurses, and life science graduates, many with advanced degrees. The inquiries they handle come from health care professionals, patients, and consumers all over the world.
With ProPharma Group as a partner, you can provide your customers with:
- Industry experienced medical information specialists to manage each case accurately and professionally
- Multi-lingual support in approximately 30 native languages
- A globally integrated, validated database
- Support for a single product or therapy area, a product cluster, or your full product portfolio
- Medical information responses consistent with product labeling and regulatory guidance
- Experience in a diverse range of therapeutic categories
- Adverse event processing and product complaint services
Our Professional Contact Centers are located in:
- Overland Park, Kansas
- St. Louis, Missouri
- St. Paul, Minnesota
- Richmond, United Kingdom
- Melbourne, Australia
Thursday, August 25, 2016
Bootstrap for beginner
Bootsrsp for beginner by ARNAUTWEB
Programming with HTML5 and CSS3 technologies have dramatically improved the landscape in web development. These technologies have certainly presented better ways to develop intriguing websites with unique interfaces.
Programming with HTML5 and CSS3 technologies have dramatically improved the landscape in web development. These technologies have certainly presented better ways to develop intriguing websites with unique interfaces.
HTML5 and CSS3 offer incredible functionalities that certainly empowered developers to generate worthwhile websites while encompassing ongoing web trends. Whether you want to integrate an exclusive graphic design in the interface or any other enticing media element like animation, these markup languages allow you to accomplish the task with a flair. Moreover, all the major browsers also support them and ensure a seamless execution of websites developed with these languages. This is not it.
We all are aware of the rapidly increasing demand of a mobile-optimized website. This growing demand has substantially made the responsive designs gain a great momentum. A responsive web design approach not only allows one to efficiently deal with the proliferation of mobiles, but also ensures a miraculous performance of websites on both desktops and mobile devices. Since, CSS3 media queries buttress responsive design, no wonder why more and more people are considering HTML5 and CSS3 to develop a responsive website.
This guide will reveal a step by step process for building a responsive blog by using HTML5 and CSS3. The tutorial has been written while assuming that its readers possess basic knowledge about both the technologies.
Let’s begin.
1. Create a basic HTML file
The HTML5 embraces simple and easily understandable doctype. Moreover, it also eradicates the usage of self-closing tags, and introduced several new elements, including <menu>, <video> and <audio>, to name a few. It eventually saves a lot of web development time and efforts.
Here is the complete code that you need to include in your HTML file.
Code Snippet of HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Responsive Blogs Using HTML5 and CSS3</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<header id="header">
<h1>This is a Responsive Blogs Using HTML5 and CSS3</h1>
<nav class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="content" class="clearfix">
<section id="left-sidebar">
<p>Left Sidebar Content Goes Here</p>
</section>
<section id="right">
<p>Right Side Content Goes Here</p>
</section>
</div>
<footer>
<p>Some copyright and legal notices gere. May be use the © symbol a bit.</p>
</footer>
</div>
</body>
</html>2. Working on various sections of Page
In the above mentioned code snippet, I have included five HTML tags that can help you define your web page. The entire page is wrapped via a div tag, and the wrapper ID will wrap on the complete website.
Broadly, there are three different sections on a page, including header, content div and the footer. They have been defined in the code by their respective tags. The ‘nav’ tag has been also used to define the navigation elements. Through the section tag, the content section and sidebar are defined. In order to make them float, CSS style needs to be considered.
3. Styling via CSS3
To enhance the basic layout created via the HTML in step 1 and create a refined look and feel, CSS3 can be used for styling in a required way. Here I have worked on CSS to create pretty effects.
• Code Snippet to create ‘navigation link hover’ effect:
#wrapper{
width:1024px;
margin:0 auto;
}
#header h1{
text-align: center;
}
nav.navigation {
display: block;
margin-bottom: 10px;
}
nav.navigation ul {
list-style: none;
font-size: 14px;
text-align: center;
}
nav.navigation ul li {
display: inline-block;
}
nav.navigation ul li a {
display: block;
float: left;
padding: 3px 6px;
color: #575c7d;
font-size:22px;
text-decoration: none;
font-weight: bold;
}
nav.navigation ul li a:hover {
background: #ccc;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 0;
text-decoration: none;
}
By including chink of code in your CSS document, you can create some cool and neat navigation link hover effect.
• Code Snippet to create ‘clearfix styles’ effect:
/* page Content */
#content {
display: block;
clear: both;
margin-bottom: 20px;
min-height: 500px;
}
#left-sidebar {
width: 35%;
float: left;
margin: 0 15px;
background: #ccc;
min-height: 500px;
text-align: center;
}
#right {
float: right;
width: 62%;
background: #efefef;
text-align: center;
min-height: 500px;
}
footer{text-align: center;}
/* clearfix */
.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
The clearfix styles can ensure a standard-compliant blog. The aforementioned code includes #left-sidebar and #right elements that represent the respective side of the section to the page. The div#content container consists the clearfix class. This will help float the web content in an optimal way while cleaning up the additional space.
4. Creating a Responsive Blog using HTML5 and CSS3
For creating a responsive blog, one can use the attributes of the targeted device. However, there is a better solution that can be used by implementing a CSS framework like the Bootstrap.
Bootstrap offers a brilliant way to create a responsive blog that can run efficiently on various screen sizes.
Code Snippet of Responsive Blog using HTML5 and CSS3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<header>
<h1>Welcome to My Blog </h1>
<p>Check the responsive blog page!</p>
</div>
<div class="row">
<div class="col-md-4">
<h3>First Blog Post</h3>
<p>Blog Content Goes Here</p>
</div>
<div class="col-md-4">
<h3>Second Blog Post</h3>
<p>Blog Content Goes Here</p>
</div>
<div class="col-md-4">
<h3>Third Blog Post</h3>
<p>Blog Content Goes Here</p>
</div>
</div>
<footer id="footer">
<p>copyright text </p>
</footer>
</div>
</div>
</body>
</html>
To ensure that your blog can be easily accessed from various devices, the viewport meta tag can be used. This meta tag basically defines the way your blog will be represented on a device.
In the above code,
- width is set equal to the device-width.
- Initial scale is set to 1. This will help embrace the touch-zooming effect on the blog.
This is a complete guide to create a responsive blog while using HTML5 and CSS3 technologies. Go through the steps thoroughly. There are several amazing effects that you can add in your blog via CSS3. I have included a few of them. I hope this will help you create a requisite responsive web design with an intriguing interface with a breeze.
Bootstraps Tricks for blogger
Tips and Tricks
Note
There are several tips & tricks we found over the time that are worth mentioning.
Floating
When using
float: left;, display: block; is not required anymore as every element which is floated automatically gets the block state. This does not apply to sub-elements.Image Optimisation
Images are the number one source of optimisation when it comes to file size. Optimise images using tools like CodeKit, ImageOptim or our internal Gulp command:
Contribution
Note
You are very welcome improving this boilerplate for Aldryn and your everyday use, especially the documentation always needs love. Feel free to fork and send us pull requests and follow the guidelines from within this section.
Code of Conduct
- Ensure code validates against or own guidelines
- Write documentation about what you are doing
- If you are not sure, just ask - join our community #aldryn on Freenode
Documentation
To extend and run the documentation, you will need Python and Virtualenv installed on your computer. You also need Git and a GitHub account obviously.
In addition, follow the steps underneath to get them running:
- clone the repository using
git clone https://github.com/aldryn/aldryn-boilerplate-bootstrap3.git - navigate to the documentation through
cd aldryn-boilerplate-bootstrap3/docs - run
make installto install additional requirements - run
make runto let the server run
Now you can open http://localhost:8000 on your favourite browser and start changing the rst files within
docs/.
You need to be aware of reStructuredText to format the documentation properly.
Guidelines
- Always start paths with a
/and leave the trailing slash. - Leave two spaces before a title.
- Write “Django”, “django CMS” or “Aldryn”.
- Write names properly: Sass, Bootstrap, JavaScript instead of sass (or SASS), bootstrap and javascript.
- Additional guidelines from django CMS apply.
Pull Requests
Before starting to work on issues or features, please mind the branching model:
- master is used for hotfix releases (1.1.x)
- develop is used for features and issues (1.x.x)
Everything that is merged to develop will be released within the next proper release (1.x.x). Major releases (x.0.0) will have their own branches but are always merged to develop before releasing to master.
A pull request needs the consent of two developers familiar with this repository to be merged.
Releases
- Adapt the CHANGELOG.rst
- Adapt AUTHORS.rst if required
- Bump version in boilerplate.json
- Create a GitHub tag
- Add the release notes on the GitHub tag
- Build new tag on readthedocs.org
- Run
bash tools/release.shbefore release on Aldryn - Run
aldryn boilerplate uploadto release on Aldryn - Test, inform, present
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive projects on the web especially for mobile, making front-end web development job faster and a lot easier. But, how many of us know the feature benefits of Bootstrap? Hence, this article is aimed to unveil those secrets of Bootstrap’s extensive capabilities. It is a handy tool for techies of varying skill levels, for devices of all shapes and sizes, and for projects of all sizes.
Bootstrap’s architectural framework is based on HTML and CSS design templates making it useful for typography, forms, buttons, tables, navigation, modals, image carousels and many other including optional JavaScript plugins. Bootstrap’s ability to easily create responsive designs is yet another interesting feature.
Use case
There might be programming contexts when you intend to use your own custom CSS and JavaScript code to develop sites or application, without even realizing the mighty capabilities of bootstrap which could have eased your task thus saving time.
Certain things are mandatory or optional before you begin to create the website – five columns layout, hover dropdown, column ordering and so on. Now, here is the good news!!! You need not create a custom code for all these tasks. We shall provide the readymade bootstrap code thus helping you to save your valuable development time.
The prime motive of this article is to share our learned knowledge about bootstrap and exhibit the framework’s capabilities:
Solution
Five columns Layout
Bootstrap does not provide any grid system by default that allows us to create five columns layout, but I can assure its simplicity.
This is the most advanced solution since it works smoothly with Bootstrap 3. Reusing classes conjointly with the current Bootstrap classes for responsive design is possible.
Initially, you need to create a default column definition in a similar method as Bootstrap does it. Call them col-*-5ths to avoid chaos with other names. Next, define the width of new classes, if media queries are different.
CSS:
Add this to your global stylesheet, or even to the bottom of your Bootstrap.css document.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
|
Sample HTML:
For instance, if you want to create a div element typical to a five column layout on medium screens and two columns on smaller ones, just use a similar code below:
1
2
3
4
5
|
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
|
How to Enable Bootstrap 3 Hover Dropdowns
The default navigation behaviour of Bootstrap does not have out-of-the-box hover dropdowns and the mobile menu is pretty boring. Still, if you prefer using it, here are some tricks to fine tune without complete customization.
Some clients, sites, or apps will expect you to have hover dropdowns on desktop. As seen below, this is never available out-of-the-box with Bootstrap 3.
You can easily add hover dropdowns with the following CSS:
1
2
3
4
5
6
|
@media only screen and (min-width : 768px) {
/* Make Navigation Toggle on Desktop Hover */
.dropdown:hover .dropdown-menu {
display: block;
}
}
|
The CSS makes the dropdowns show all independently without leading you to the parent link on mouse click. Though not the most ideal solution, the following javaScript (jQuery) may help you achieve desired results:
1
2
3
4
5
|
$('.dropdown-toggle').click(function() {
var location = $(this).attr('href');
window.location.href = location;
return false;
});
|
Don’t forget Container Fluid for Full Width Rows
During the first instance of using Bootstrap 3, we did not use the container-fluid class for full width rows. If that was our requirement, then we would have simply omitted the container. This makes sense and the grid system tends to work without it. But, it is problematic because Bootstrap’s row class has a -15px left and right margin.
Please find an example below to know more:
Note: You may view in a full window to understand better.
Column ordering
Alter the order of the grid columns with .col-md-push-* and .col-md-pull-* classes:
The push class will move columns to the right while the pull class will move columns to the left.
The order of the columns in your HTML mark-up should be as expected in mobile displays. This also signifies that the pushing and pulling is done on the larger desktop views.
Let’s study the following example:
Let’s study the following example:
We have two columns of equal width which will be pushed and pulled on sm or larger viewports.
1
2
3
4
5
6
7
8
|
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<!-- Column A -->
</div>
<div class="col-sm-6 col-sm-pull-6">
<!-- Column B -->
</div>
</div>
|
On the larger desktop views (sm or larger) the columns are pushed and pulled.
On the mobile view (xs) the columns are fetched in the natural order of the markup.
Labels for Screen Readers
Using placeholders for your input fields is usually the best practice to even add a hidden label for the input, so that screen readers can read the page.
The following example helps us to understand how to set that up fast with Bootstrap:
1
2
|
<label for="id-of-input" class="sr-only">My Input</label>
<input type="text" name="myinput" placeholder="My Input" id="id-of-input">
|
No Gutter Column
Bootstrap facilitates customizing and compiling your own build based on your requirements. This is anything from colors, container sizes, and to gutter padding size. However, sometimes you might encounter an instance where you just want a single row without padding. In most cases, you will just select the column individually and get rid of the padding with CSS. You can build your own utility class helper to achieve this. This utility class will cover all column sizes and still supports full responsiveness.
Take a look at CSS snippet below:
1
2
3
4
|
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
|
And this is how you can use it in your HTML:
1
2
3
4
5
6
7
8
9
10
11
|
<div class="row no-gutter">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
|
