I am having trouble using multiple code snippets in Atom. I must be missing some syntax as only the last snippet works. (New HTML page) If I swap the order, this means the BootstrapBlock works, but never both? Any ideas welcome.
#BOOTSTRAP BLOCK
".text.html":
"BootstrapBlock":
"prefix": "BootstrapBlock"
"body": '''
<div class="container">
<div class="row">
<div class="col-xs-12">
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end container -->
'''
#NEW HTML DOCUMENT
".text.html":
"start":
"prefix": "start"
"body": '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale = 1.0">
<link rel="shortcut icon" type="image/ico" href="/img/assets-images/favicon.ico">
<title></title>
<!-- FRAMEWORK -->
<link href="_includes/css/bootstrap.min.css" rel="stylesheet">
<link href="_includes/css/master.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="_includes/scripts/bootstrap.min.js"></script>
</body>
</html>
'''
The reason why only the last snippet works is because you overwrite they key ".text.html". Both snippets should be children of the first key, i.e. remove the second ".text.html" key.
Related
So, I was studying the front-end course which was created in 2018 and this guy Brad Hussey was teaching Bootstrap, and when I downloaded the source code and everything to make the website work, the grid system for example was not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Forms</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap Forms</h1>
<p class="lead">Let's work with some sexy, pre-styled forms, shall we?</p>
</div><!-- page-header -->
<div class="row">
<div class="col-sm-4">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
You're missing closing div tags. Other than that it seems to work alright.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Forms</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"> <!--- you never closed --->
<div class="page-header">
<h1>Bootstrap Forms</h1>
<p class="lead">Let's work with some sexy, pre-styled forms, shall we?</p>
</div><!-- page-header -->
<div class="row"> <!--- you never closed --->
<div class="col-sm-4">
</div>
</div> <!--- add </div> here --->
</div> <!--- add div here --->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to load my external style sheet . It is loading but the style is being overrided by some other file.
How can i load my styles using ec
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary">Primary</button>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Try adding !important attribute to css rule you are trying to implement. It will force your rules to the matched set of element or classes!
When I do gg=G, almost everything get indented correctly, except <meta tag and <link tag when there is no / in before > like this />.
here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<br>
<meta name="keywords" content="">
<meta name="author" content="">
<title>
Site Title
</title>
<!-- CSS -->
<link href="css/main.min.css" rel="stylesheet">
<link href="css/cos.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="js/ie8.js"></script><![endif]-->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
</script>
</head>
<body>
</body>
</html>
Here is what expected:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<br>
<meta name="keywords" content="">
<meta name="author" content="">
<title>
Site Title
</title>
<!-- CSS -->
<link href="css/main.min.css" rel="stylesheet">
<link href="css/cos.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="js/ie8.js"></script><![endif]-->
<script src="js/ie.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
</script>
</head>
<body>
</body>
</html>
I've tried everything I could find on the net, but still the same.
I'm using VIM version 7.4.873. MacVim 7.4 (77) compiled by Homebrew.
here is my .vimrc file:
filetype plugin indent on
syntax on
set bg=dark "background=dark
set ic "ignorecase
set hls "hlsearch
set is "incsearch
set scs "smartcase
set gd "gdefault
set ai "autoindent
set si "smartindent
set ci "copyindent
set pi "preserveindentd
set bs=2 "backspace=indent,eol,start
set fenc=utf-8 "fileencoding=utf-8
set enc=utf-8 "encoding=utf-8
set ts=4 "tabstop=4
set sts=0 "softtabstop=0
set sw=4 "shiftwidth=4
set noet "noexpandtab
"set sm "showmatch
set ru "ruler
set nu "number
set rnu "relativenumber
set wrap "wrap
set ch=1 "cmdheight=1
set title "title
set ls=2 "laststatus=always
set stl=%.50F%m\ "statusline=F
set stl+=\|\
set stl+=%p%%\
set stl+=\:\ %l/%L\
set stl+=\:\ %c\
set stl+=\:\ %v\
set stl+=%=
set stl+=%y
set stl+=[%{&fenc?&enc:&fenc}]
set stl+=[\#%n]
set cul "cursorline
set clipboard=unnamed
" Other settings
let g:PHP_vintage_case_default_indent = 1
No plugin or indent scripts.
Any ideas?
i am using this in HTML5
<link rel="stylesheet" type="text/css" href="css/loader.css" media="all"/>
But w3c validator giving me this error:-
Element link is missing required attribute property.
Please help i am stucked with it,
My Code is:
<!DOCTYPE html>
<html lang="en">
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><html lang="en"><![endif]-->
<!--[if !IE]><html lang="en"><![endif]-->
<head>
<!-- The title of your site -->
<title>Directus Media LTD</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Always make sure to check the robots tag -->
<meta name="robots" content="index,follow">
<meta name="description" content="Directus Media specialises in websites for small to medium businesses"><meta name="keywords" content="southport graphic design, liverpool web design, southport social media management"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/lib/modernizr.js"></script>
<!-- Liquid Slider Master -->
<!-- Essential stylesheets -->
<link rel="stylesheet" href="css/loader.css" media="all"/>
<link rel="stylesheet" href="css/lib/essentials.css"/>
<link rel="stylesheet" href="css/lib/ytplayer.css"/>
<link rel="stylesheet" href="css/lib/font-awesome.min.css"/>
<link rel="stylesheet" href="css/lib/magnific-popup.css"/>
<link rel="stylesheet" href="css/lib/jquery.bxslider.css"/>
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/colors/black.css"/>
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
Everything is according to standards. Please have a look on the code. I don't know why validator is not passing my page.
you can add property="stylesheet" in the link tag
link tags don't need self closes. Remove that and try again.
http://www.w3schools.com/tags/tag_link.asp
I have a mockup here
http://dummytest.herokuapp.com/
At the moment the plain vanilla HTML shows first and then it flickers and it is rendered with CSS applied. How can I get my page to show the CSS styling as the first thing completely bypassing the unstyled text?
Your document is not well formed (wiki), which is leading to this behavior.
Generally web pages go:
<html>
<head>
<!-- meta tags go here along with title,
script links, and css style references -->
</head>
<body>
<!-- elements for rendering go here -->
</body>
</html>
You would like to correct your HTML to comply with HTML standard:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Harness</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--<Le>HTML5 shim, for IE6-8 support of HTML elements</Le>--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--<Le>styles</Le>-->
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/datepicker.css" rel="stylesheet">
<link href="/stylesheets/style.css" rel="stylesheet">
<style>body {
padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="/javascripts/slimScroll.min.js"></script>
<script src="/javascripts/housefix.js"></script>
<script src="/javascripts/bootstrap-transition.js"></script>
<script src="/javascripts/bootstrap-alert.js"></script>
<script src="/javascripts/bootstrap-datepicker.js"></script>
<script src="/javascripts/bootstrap-modal.js"></script>
<script src="/javascripts/bootstrap-dropdown.js"></script>
<script src="/javascripts/bootstrap-scrollspy.js"></script>
<script src="/javascripts/bootstrap-tab.js"></script>
<script src="/javascripts/bootstrap-tooltip.js"></script>
<script src="/javascripts/bootstrap-popover.js"></script>
<script src="/javascripts/bootstrap-button.js"></script>
<script src="/javascripts/bootstrap-collapse.js"></script>
<script src="/javascripts/bootstrap-carousel.js"></script>
<script src="/javascripts/bootstrap-typeahead.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<p>
Home |
Log In
</p>
<h2>Welcome! Please log in.</h2>
</body>
</html>
Put all your <head></head> code in one place and all your <body></body> code in one place as well.
Currently you have 2 sets of <head> and <body>. Take the one above (with menu) and merge it with the one below (with welcome message).
It would be best to run all your webpages through http://validator.w3.org/ to avoid future problems like this.