Own CSS - framework
Are you using a CSS framework?
For those who use CSS - framework in their work, please share your experience in the comments, it will be very useful and interesting.
CSS - framework is a pre-prepared set of HTML and CSS files. The idea is that when creating each new project, use this ready-made set of files, in which a layout has already been created for you, set the font style and write all the basic code common to most sites. I use my own CSS - framework, it is very simple, the idea is taken from the book "CSS handmade", apply it whenever I start to implement a new project.
')
I will show you the code for each CSS file.
You can also use a ready-made CSS framework, for example: 960 Grid System or Blueprint . If you use a ready-made framework, then there is a danger that there will be a lot of rubbish in your code. Which you will not use in your project. In any case, the choice is yours which framework to use, I only share my work experience and the option that is more suitable for me.
Let's see how the frameworks of my framework are arranged. First, let's talk about the HTML file that is used for any of my projects, I call it index.html . Inside the index.html file is a simple blank structure for those elements that I plan to use in any project.
Watch and enjoy.
Index.html file:
Next we look at each of the four CSS files I use. Let's start with screen.css - the main style sheet. It is just a list of other style sheets. Import order is important.
Screen.css file
The first style sheet that is imported into the screen.css file is the reset.css style sheet . It resets the default styles that browsers use by default.
File reset.css
The reset.css file, which I use when creating all the projects, is largely borrowed from Eric Meyer. After resetting the default browser settings, we add basic styles. The main master.css file contains all the styles for the design of this site. To speed up the creation process, I added some basic elements.
Master.css file
Finally, we import the ie.css file, which contains all the additional code for Internet Explorer. I prefer to separate these rules into a separate style sheet so that master.css remains clean and free from the disgrace that occurs in IE.
Ie.css file
I just described the structure of my small framework. This does not mean that I consider it the best. Rather, I hope to awaken your interest in creating your own framework (if you don’t have it yet).
For those who use CSS - framework in their work, please share your experience in the comments, it will be very useful and interesting.
CSS - framework is a pre-prepared set of HTML and CSS files. The idea is that when creating each new project, use this ready-made set of files, in which a layout has already been created for you, set the font style and write all the basic code common to most sites. I use my own CSS - framework, it is very simple, the idea is taken from the book "CSS handmade", apply it whenever I start to implement a new project.
')
I will show you the code for each CSS file.
You can also use a ready-made CSS framework, for example: 960 Grid System or Blueprint . If you use a ready-made framework, then there is a danger that there will be a lot of rubbish in your code. Which you will not use in your project. In any case, the choice is yours which framework to use, I only share my work experience and the option that is more suitable for me.
Let's see how the frameworks of my framework are arranged. First, let's talk about the HTML file that is used for any of my projects, I call it index.html . Inside the index.html file is a simple blank structure for those elements that I plan to use in any project.
Watch and enjoy.
Index.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <!-- [if gte IE 7]><!--> <link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" /> <!--<! [endif]--> </head> <body> <div id="wrap"> <div id="header" class="group"> <div id="logo"> LOGO </div> <ul id="nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <!-- /header --> <hr /> <div class="group"> <div id="main"> Main </div> <!-- /main --> <hr /> <div id="secondary"> Secondary </div> <!-- /secondar --> </div> <!-- /.group --> <hr /> <div id="footer"> Fotter </div> <!-- /footer --> </div> <!-- /wrap --> <!-- c(yats) --> </body> </html> Next we look at each of the four CSS files I use. Let's start with screen.css - the main style sheet. It is just a list of other style sheets. Import order is important.
Screen.css file
/* Title: Imported style sheets are used in the project Author: author@yats.com.ua */ /* import stylesheets */ @import url ("reset.css"); @import url ("master.css"); @import url ("ie.css"); /* end import */ The first style sheet that is imported into the screen.css file is the reset.css style sheet . It resets the default styles that browsers use by default.
File reset.css
/* Title: Reset default browser styles Author: author@yats.com.ua */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; background: transparent; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } The reset.css file, which I use when creating all the projects, is largely borrowed from Eric Meyer. After resetting the default browser settings, we add basic styles. The main master.css file contains all the styles for the design of this site. To speed up the creation process, I added some basic elements.
Master.css file
/* Title: Master styles for screen media Author: author@yats.com.ua */ body{ font-family: "Helvetica neue", Helvetica,Arial, sans-serif; color: #444; font-size: 62.5%; background: #fff; } /* links */ a:link, a:visited { color: #369; outline: none; } a:hover{ color: #39c; } /* Page structure ------------------------------*/ #wrap{ margin: auto; max-width: 62.5em } #main{ } #secondary{ } #footer{ } /* Header ------------------------------*/ #logo{ } /* nav */ #nav{ } /* Main styles ------------------------------*/ /* Secondary styles ------------------------------*/ /* Footer styles ------------------------------*/ #footer{ } /* Misc. ------------------------------*/ hr, .hide { display: none; } a img { border: none; } /* self-clear floats */ .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Finally, we import the ie.css file, which contains all the additional code for Internet Explorer. I prefer to separate these rules into a separate style sheet so that master.css remains clean and free from the disgrace that occurs in IE.
Ie.css file
/* Title: IE patches Author: author@yats.com.ua */ /* PNG fix */ * html #selector { /* for IE<6 */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/image.png'); background-image: none; background-repeat: no-repeat; background-color: transparent; } /* self-clear floats */ * html .group { /* IE6 */ height: 1%; } *:first-child+html .group { /* IE7 */ min-height: 1px; } I just described the structure of my small framework. This does not mean that I consider it the best. Rather, I hope to awaken your interest in creating your own framework (if you don’t have it yet).
Source: https://habr.com/ru/post/171303/
All Articles