The W3C’s Web Content Accessibility Guidelines (WCAG) offers website operators a list of suggestions for the creation of making their web offers accessible. To this end, WCAG is based on 4 principles: Perceptibility, usability, intelligibility, and robustness. These are supported by 12 fundamental guidelines on how to tailor web content for people with sensory, motor, or cognitive limitations.
What makes Bootstrap so interesting?
Thanks to HTML and CSS templates, developers with interesting ideas for new websites no longer have to start from scratch. Content is taken directly out of tool kits and added into HTML documents, sparing any need for tedious CSS configurations. Here are some things that are included:
- Navigational elements
- Thumbnail overviews
- Dropdown menus
- Warning messages
- Progress bars
- Responsive video embedding
Another important aspect is Bootstrap’s grid layout. By dividing layouts into 12 columns, this layout system makes it easier for its users to precisely determine distances and position individual website elements. Whether using desktop, mobiles, or PCs with small monitors, users are able to decide between different screen sizes when arranging elements in the layout grids. This flexibility makes Bootstrap well equipped for responsive web design.
Bootstrap: download and first steps
2. Unpack the file and drag the Bootstrap folder into the desired project directory
3. The folder contains ‘css’, ‘fonts’, and ‘js’. In the ‘font’ folder, you’ll find more than 250 icons in the font, Glyphicons Halflings, which has been made available to Bootstrap for free. The files in the folder ‘css’ and ‘js’ are described individually below:
bootstrap.css: CSS code in readable form
bootstrap.min.css: minimized CSS code. Content irrelevant for the interpretation of the code, such as spaces, has been removed
bootstrap.css.map: contains CSS source maps that help you find the original source data in LESS format when developing
bootstrap-theme.css: CSS file of optional prepackaged theme
bootstrap-theme.min.css: minimized code of theme
bootstrap-theme.css.map: theme source map
5. Once all components are present and familiar, then the real work can begin. For demonstrative purposes, we’ve created an HTML welcome page, which we’ll then turn into a Bootstrap template.
6. Open your preferred code editor, like Notepad++, and add the following code into an empty document:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>Hallo, this is my first Bootstrap-Template!</h1> </body> </html>
The meta tag, ‘viewpoint’, within the head area ensures that the website is optimally displayed on mobile devices.
7. Save the project as ‘basic.html’ on the desktop
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css"> </head> <body> <h1>Hello, this is my first Bootstrap-Template!</h1> <script src="Bootstrap/js/jquery-1.12.0.min.js"></script> <script src="Bootstrap/js/bootstrap.min.js"></script> </body> </html>
9. To finish, save the document as ‘bootstrap-template.html’. By double clicking, you can open the Bootstrap HTML in your preferred browser where you should now see the message given in the title (h1)
10. Now you’re able to freely design your template. The different codes for typography, buttons, and the Bootstrap grid system, etc., can be found on the official website.
HTML/CSS knowledge is an important requirement
- Saves a lot of time
- Very good foundation for responsive web design
- Regular updates and huge community you can ask
- First-class documentation
Combined with the fact that it’s an open source project, the factors mentioned above prove once more why Bootstrap is one of the most popular frameworks for web design.