[OpenID Commits] r27 – / css images
[OpenID Commits] r27 – / css images
|
|
[OpenID Commits] r27 – / css images. drecordon at openid.net drecordon at openid.net … octet-stream Added: images/logo.gif =Binary files differ) Property …
Similar Posts
- Documents
- Client files
- Copy
- Proofs
- Staged/Development area (folder for a “clone of the site” where you can make changes and get sign off)
- Downloads
- reset.css
- main.css
- structure.css
- typography.css
- print.css
- helpers.css
- More consistant rendering due to reusing ideal CSS techniques
- Easier editing and maintenance as you can better recall what names mean
- The start of code that can be saved and reused every time
- A class that floats an image left / right and gives it some margin
- The structure for an unordered list navigation
- The structure for a form
- external link, pdf and download icons
- clearfix
- png fix
- Typeography baselines and hierarchies
- etc…
- Font sizing (all normal text is 12px, featured text is 14px bold)
- Margin’s (normal margin is 10px between elements, margin between two content blocks is 40px, etc…)
- All navigation tabs will have 15px height and 13px font
- etc…
[OpenID Commits] r27 – / css images
[OpenID Commits] r27 – / css images. drecordon at openid.net drecordon at openid.net … octet-stream Added: images/logo.gif =Binary files differ) Property …OpenID CSS iframe overlay
OpenID CSS overlays. This is an example of using CSS iframe overlays to fool a user to always trusting a site and logging them into a OpenID service.Slicing images, how does it differ using div’s and floats vs tables
slicing images, how does it differ using divs and floats vs tables … images – it’s not for divs (and ultimately CSS positioning) to control the layout of that imho. …Slicing images, how does it differ using div’s and floats vs tables
slicing images, how does it differ using divs and floats vs tables … images – it’s not for divs (and ultimately CSS positioning) to control the layout of that imho. …Cut & Paste CSS Vertical List Menu
It references two external files and 3 images. Download them below (right click, and select “save as”): cssverticalmenu.css; cssverticalmenu.js; The three images (resized):Use Google Code to Speed Up Development
Web development has gotten more complicated.
You’ve got to worry about a plethora of new issues that you’ve never thought about when you started doing this business: data asset management (DAM), you’ve got to build and code websites in no time fast, competition is fierce & everybody has their own web development company, you’ve got to keep your costs to a minimal, etc.
We’re here to give you one of those ideas that’ll do all of those things all at once. It’s pretty easy to do. It took me forever but i’ve finally discovered how to use SVN via TortoiseSVN (TortoiseSVN seems to be the easiest way to do SVN. Update, commit, merge files are easily executed with 2-3 clicks). If you do not have the pleasure of owning a windows machine there are many other SVN alternatives for MAC. Such a syncrosvn and versions.
What’s TortoiseSVN?
TortoiseSVN is just a open source program that manages file versions. At 3 Point 7 Designs, we discussed some methods to collaborate and keep our files updated so redundancy didn’t happen. At much of my discovery, we discovered that we can use this to also host some of our template files that we use to speed up development.
We decided that we’d host and feature our companies css/xhtml boilerplate to foster collaboration and version tracking on Google Code (code.google.com). In addition to this beautiful solution, it allows google to host our redundant files that we use for every project. Google hosting has got to be the best hosting on the internet. You can’t beat anything faster than google; they practically run and own the internet.
We just link the files to the google code repository and voila we are up and running.
Featuring 3.7 Designs Boilerplate!
We’re big fans of css frameworks. CSS frameworks are great providing quality control. It provides us the ability to get our job done quickly, efficiently and more consistently.
The 3.7 Design Boilerplate contains the file structure and the files needed to quickly start coding. It might take a while to get a hang of our id/class usages. Nonethless, it’s pretty KISS and makes sense.
Folders Structure
The following are some folders and they’re pretty self explanatory
/css – CSS files
/images – Images
/js – Javascript Files
/clientfiles – PSD, .ai, etc files go here
/concepts – concepts – currently and eventually will be moved to client files
/copy – contains word documents or text for the content of the website
CSS Files Explained
Reset.css – Some things that we commonly practice is resetting stylesheets so that they’re all at a beginning point. This is something that Eric Meyer’s blogged about.
Grid.css - We’ve added a set of grids that you can use. It’s actually a gride from 960.gs. You’re welcome to switch out any grid stylesheet here.
helper.css – This file gives you a running start if you’re prototyping a page. You can quickly using classes move block elements around with margins or padding. An example class : “ml-5” adds 5px of padding to the left side. “mh-10″ adds left and right padding. “padr-5” provides 5 px of padding on the right side, etc.
This file also contains the very important class: clearfix. If you’re not familiar with it it just primarily solves the problems of container div’s that don’t totally addup the total height of all of the child containers.
main.css This file allows is to create a base file from the reset to provide some type of consistency and legibility to the type. Often after type is reset the type is too small to read.
style.css This last file you’ll have to use locally because it’ll be key and important in customizing your website. All the other files you can link from the google code repository. This file is the file that will contain your site specific and context specific css code.
Download Boilerplate: Latest 2.0.zip
Put it all together
With all these things put together we are providing you with a starting point. If you don’t like the way we do things; that’s totally understandable. We’re hoping to inspire others to create their own or contribute to our project.
The best part of hosting your css files is that once you add more or append to your files it’ll effect all the websites that might be linking to your files.
Hope this has been most helpful.
CSS Examples – CSS2 Text Decoration
This property describes decorations that are added to the text of an element. … CSS examples using the text-transform property .tdn{text-decoration:none; …8 methods to bring your front end coding to rockstar levels
There are a lot of good front end developers out their right now. If you fancy yourself as a front end editor then you really should be looking at how you can differentiate yourself from the rest. Yes there are lots of “good” front end developers, but there are not a whole lot of excellent front end developers.
1. Improve Your Semantic Names
If you work in a team or ever revisit your code and need to update it then you should think about the quality of your class and ID names. It is not uncommon for developers to use class names like “box”, “wrapper”, or “container.” While you may think that these naming conventions or “semanitc enough” none of them describe the content that is inside them. Instead consider using HTML5 spec’s such as “content-sub”, “section”, “content-aside” or “content-sup.”
You and your team will have a much easier time sorting through code that describes the content than trying to remember the details of “box.”
Read more about semantic naming from Andy Clarke and A List Apart.
2. Improve the Organization of Your Files
I think it is reasonable safe to assume that most developers have at least started to organize their files by type (ie: a folder for images, css, javascript, etc…). You can go a step further and improve the organization even more, particularly any folder that is going to have a lot of files (such as Images in particular and CSS as a secondary.)
I find it best to create sub folders with in images and separate images based on design structure, buttons, headlines, photos, etc…
There are plenty of other folders you may want to create to keep the updating and growth of a site easy and efficient, including:
The Elements CSS Framework does a great job of organizing files based on the normal client/provider workflow.
3. Use Commenting in Your XHTML
Any time you end up developing complex layouts you are bound to use a lot of <div>s in your markup. This can be particularly confusing to go back and edit as it becomes hard to figure out which div is being closed where. You may see three </div>s all in a row.
To combat this simply add some coments at each </div> (or any other closing element if you find that it will be helpful) to let you know what element was just closed.
<div id="header" class="section">
<div id="header-logo">
<h1>HTMLiZER</h1>
</div><!--/#header-logo-->
</div><!--/#header-->
If you find it useful you can take it one step further and comment the primary area you would be editing (such as the main content area, sidebar, etc…)
4. Segment Your CSS
For small 4 – 5 page brochure sites your CSS will be pretty manageable even if you don’t spend the time and effort you should into organizing and commenting. Once you start developing web applications or large sites with a vast array of design “modules” you should make sure that you organize your CSS in way that is easy to manage.
I recommend splitting your css into logical different files for better organization, such as:
This way you don’t have to sort through all of the typography styling to find the area where you defined the size of the header. Likewise if you want to adjust the headings it is pretty simple to find it through a small typography.css file rather than a huge file that has everything.
5. Create a TOC With Comments in Your CSS
Every CSS file you plan on editing and extending over time should have a table of contents at the begining and a headline seperator at every section. This will allow you to easily jump to a section using “find” rather than scrolling for that one area that had the CSS you are hoping to modify.
EX
/***********
TOC:
=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio
****************/
/* ********* =1: HEADER *********** */
#header { … }
6. Compress and Combine Your CSS files
Even though it is easier to work on a site when you segment and organize your css into several different file names, it actually causes your site to load slower. The more calls the browser has to make to the server for additional files the slower it will load.
Before deploying your css files you should combine and compress them. Compressing them removes any uncessary whitespace, comments, etc… that is unnecissary when the site is live.
There are several handy tools to do this including this online version.
7. Create your own framework (or improve on another one)
As you get more experience under your belt you will find that you use the same methods and naming conventions over and over. This is helpful for several reasons and it should be encouraged. It has lots of benefits including:
Chances are that you end up rewriting the same type of code over and over again, simply because you don’t have it stored somewhere. Some examples may be:
Rather than reusing these bits of codes write modules into your own CSS framework (or you could imrpove on another one). This way you can streamline the development process so it takes less time and improve the consistancy of your work.
8. Develop your CSS to be modular or “object oriented”
You could assign every bit of code an unique ID or adjust the margins and padding per instance. Lots of coders do this to try and get the CSS as close to the designers comp as possible. However this is inefficient in development time and file size. Establish a set rule for differnt types of content and how they should be styled, this should include basic things such as:
This way you don’t have to rewrite the code for every new item added to the site. Additionally it will keep the site feeling consistant and well balanced visually. If all elements and every page follows the same rhythm it will feel more unified as a whole.
Some call this object oriented css, it is worth looking into for rockstar like front end coding.