Basic Ready-to-Use CSS Styles. This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements. View demo Download source Today we are going to dig a little bit more into process development. When you’re creating a website or an application from scratch, you may need a collection of patterns helping you building thing up. That is the point of today’s tutorial. Just for you, I baked a little suite of basic CSS snippets, ready for use! Before going any further, let me explain to you how I’ve built this up. You can also build classes of classes to custom things to suit your needs. This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles.
Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements. Block-level elements The Markup The Basic CSS Shadows Links. A Call for ::nth-everything. With CSS3, we have positional pseudo class selectors to help us select specific elements when there are no other distinguishing characteristics other than where it is in the DOM in relation to it's siblings. :first-child:last-child:nth-child:nth-last-child :first-of-type:last-of-type:nth-of-type:nth-last-of-type :only-child:only-of-type We also get a couple of text-specific pseudo elements to help with our typography needs: ::first-letter::first-line That's a great start, but it really would be useful if we could extend the whole ":nth" concept to these typographic selectors.
Let me convince you. Please note that most of the code below is not valid. ::nth-line() / ::last-line / ::nth-last-line() We already have ::first-line, so to complete the set let's add ::nth-line(), ::last-line, and ::nth-last-line(). With these, we could select the first two lines of a poem to highlight. Or perhaps we could fade out the end of a passage. Relevant article by Adam Prescott. Take this example: The Complete Set. Resources | CSS Resources | Styleshout.com. Highly Maintainable, Efficient, and Optimized CSS. CSS1K. So What is This About? Back in 2003 (that's 9 years ago!) Dave Shea launched the CSS Zen Garden. It showcased what was possible with CSS-based designs, leading to an explosion in the use of CSS on the web.
More recently, Peter van der Zee created JS1k, a competition to build cool applications with no more than 1 K of JavaScript. A lot has happened since the Zen Garden days, and today you can do almost anything with only CSS. Do we need that much? Participation Submissions must consist of only CSS Submissions may be up to 1 K (1024 bytes) minified Vendor prefixes are not counted to the total number of bytes – submit your code unprefixed and we will add necesssary prefixes Any external resources and images, including data URI's, @font-face and @import's, are forbidden The page does not have to look the same in every browser, but graceful degradation is encouraged The submitted code is licensed under the MIT License.
CSS - Noupe. Total Recall #1: The Ultimate Collection of the Best Free Templates 2013 in PSD and HTML/CSS The past leaves its own mark, so it is very useful to look back early in the year, and put up a best-of-collection of remarkable things and resources. May be you have missed something valuable that might come in handy in the near future, probably something that will make your working process more efficient, time-saving and cost-effective. Or be it something that can help to quickly “kickstart” your web project, and is available free of charge and can freely undergo different changes. Today we are going to give a rundown of the previous year’s free stuff. To be more precise, today we have collected professional website layout PSD and HTML/CSS templates, which, as practice shows, are never enough.
Read more. Creating a CSS layout from scratch - Subcide. 7 additional tips for CSS markup. 1. Use a test page Make a test page that has: All of the common HTML elementsAll of your widgets and inline elements … on one page. This allows you to make and preview changes quickly. Snippllr.com has a couple of test pages containing the major HTML elements: 2. Using a CSS reset helps because it eliminates the inconsistencies between browsers and forces you to specify all of the styles you want. 3.Order your rulesets into sections – generic to specific Use stylesheet rule order to define “base” and “special case” tags. For example, I have used the following sections: 4. Organize the rules into “base” widgets and “special case” if necessary. 5. For example: 6.
Avoid modifying the HTML element styles without specifying a class. 7. CSS Properties Quick Guide. Float: center « Web Monkeys with Laserbeams. As a CSS enthusiast, one of the questions I have heard a lot over the past few years has been, “How do I float center?” To that, I have always replied simply, “you don’t,” and then I delve into what my colleague is actually trying to do.
(Really, when was the last time you wanted content to flow around both sides of a block?) Today my answer has changed. Here are three block-display elements. There are no explicit widths set. Siblings have the same effective width and are centered. Alternatives First off, let’s not use a cannon to kill a mosquito. What if you do not have (or desire) explicit margins or an explicit width? The simple, three-step process Consider the following HTML fragment in this example. <div class="rowWrapper"><div class="row">Here are three block-display elements. For the sake of the example, I’ll give the wrapper a red border and the rows a blue border. 1. Wrap your blocks and float the wrapper. 2. 3. Naturally, you’ll want to remove any visible signs of the wrapper.
Live Demo. This page contains the markup of the 10 “templates” from the Rapid Prototyping page. You may want to use Firebug or another developer tool to alter the markup or content of these boxes, or even their container's width to see how each grid behaves. Simple row Module 2A Module 2 B Module 3A Module 3B Module 4A Module 4B Layout 1 .header. .content. .footer. Layout 2 Layout 3 For this demo, containers are styled as follow: In real life, border styling would not be set globally like this, so here we use CSS3 for “layout 1” to avoid polluting these demo boxes with extra hooks (in non CSS3 browsers, there is a 2px top/bottom border on the content box of “layout 1”).