Initializr - Start an HTML5 Boilerplate project in 15 seconds!
Understanding Twitter Bootstrap 3
Version 3 of Twitter Bootstrap is a major change from all its past versions. It is a mobile-first framework and can claim to be one of the best CSS frameworks for building responsive website designs. In my last article I focused on building responsive websites using Twitter Bootstrap 2. From that, you should have an idea of how Bootstrap works. Since Twitter Bootstrap 3 is a mobile-first framework, by default whatever you design or create will be mobile compatible or responsive. Getting Started Twitter Bootstrap has a new website design which is itself built using the Bootstrap 3 framework. You can download the archive file here. Now, we have three directories, so let’s look at each of them. Our main CSS file is bootstrap.css, and we must include that in all our HTML pages. bootstrap.min.css is just the minified version of bootstrap.css. The biggest difference between Bootstrap 2 and Bootstrap 3 is the use of font files instead of flat images to showcase various image icons. The structure
Bower
10 Easy Steps to a Complete Understanding of SQL
Too many programmers think SQL is a bit of a beast. It is one of the few declarative languages out there, and as such, behaves in an entirely different way from imperative, object-oriented, or even functional languages (although, some say that SQL is also somewhat functional). I'm writing SQL every day and embracing SQL with my Open Source Software jOOQ. I thus feel compelled to bring the beauty of SQL a bit closer to those of you still struggling with it. readers who have already worked with SQL but never completely understood itreaders who know SQL well but have never really thought about its syntaxreaders who want to teach SQL to others This tutorial will focus on SELECT statements only. 1. Get this into your head first. SELECT first_name, last_name FROM employees WHERE salary > 100000 Easy to understand. What do we learn from this? So if this is so simple, what's the problem? Forget about all that. 2. For simplicity, not all SQL clauses are listed. There are three things to note: 3. 4.
CSS
Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. <! Mobile first With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>. You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. Bootstrap sets basic global display, typography, and link styles. Set background-color: #fff; on the body Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base Set the global link color via @link-color and apply link underlines only on :hover These styles can be found within scaffolding.less. Normalize.css Containers <div class="container"> ... <! Bold
Which Custom Web Fonts Solution Should You Use?
Over the past few years the number of fonts available for use in web design has dramatically increased. It wasn’t long ago that we all knew not to stray further than the basic Arial, Helvetica, Times, Georgia mix, but now there’s a range of services that allow the use of almost any font imaginable in your website design. This post rounds up the various custom web font solutions and looks at the pros and cons of each. The most basic solution out of the lot is the CSS3 @font-face property. I’m sure we’re all familiar with @font-face by now, it allows you to load a font file from your CSS and apply that font to the styling of your HTML text. Pros: Powered by CSS. Cons: Limited to open source fonts Links: Since Google launched its Google Web Fonts API the service has grown to include hundreds of freely available fonts for use in your designs. Powered by CSS. Choice is limited to a range of free fonts Premium service with a yearly fee
Components
Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible. How to use For performance reasons, all icons require a base class and individual icon class. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Use whatever option best suits your specific development setup. Accessible icons Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters.
Game Programming Patterns
Modals
Individual or compiled Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js). Using the compiled JavaScript Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Plugin dependencies Some plugins and CSS components depend on other plugins. Data attributes You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. That said, in some situations it may be desirable to turn this functionality off. $(document).off('.data-api') Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this: $(document).off('.alert.data-api') Only one plugin per element via data attributes Don't use data attributes from multiple plugins on the same element. Programmatic API We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. No conflict <!
Creating a Single Page Todo App with Node and Angular
Today we will be creating a very simple Todo application using the MEAN (Mongo, Express, Angular, Node) stack. We will be creating: Single page application to create and finish todosStoring todos in a MongoDB using MongooseUsing the Express frameworkCreating a RESTful Node APIUsing Angular for the frontend and to access the API While the application is simple and beginner to intermediate level in its own right, the concepts here can apply to much more advanced apps. What We’ll Be Building Base Setup File Structure We are going to keep the file structure very simple and put most of the code for our Node application into the server.js file. - public ----- core.js ----- index.html - package.json - server.js Installing Modules In Node, the package.json file holds the configuration for our app. Now if we run npm install, npm will look at this file and install Express and Mongoose. Node Configuration In our package.json file, we told it that our main file would be server.js. Database Setup Todo Model
