background preloader

CSS Floats 101

CSS Floats 101
The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Article Continues Below Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it. We see floats in the print world every time we pick up a magazine article with an image on the left or right with text flowing nicely around it. The definition#section1 Let’s start with the definition of a float. A float is a box that is shifted to the left or right on the current line. The float property has four values that we can apply to it: left, right, inherit, and none. How floats behave#section2 Let’s look at a few more examples.

CSS Positioning 101 If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 In action#section6

The Mystery Of The CSS Float Property Advertisement Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. Definition and Syntax The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. Flickr photo by presentday The effectiveness of using floats in multi-columned layouts was explained by Douglas Bowman in 2004 in his classic presentation No More Tables: No More Tables Syntax Float in Practice

Fluid Images Things are looking good so far: we’ve got a grid-based layout, one that doesn’t sacrifice complexity for flexibility. I have to admit that the first time I figured out how to build a fluid grid, I was feeling pretty proud of myself. Article Continues Below But then, as often happens with web design, despair set in. So what happens when we introduce fixed-width images into our flexible design? Fig 3.0: Our flexible grid is finally finished. not a pixel value in sight, and we didn’t have to skimp on the aesthetics. Going back, back to markup, markup#section1 To find an answer, let’s do a quick experiment: let’s drop an image directly into our blog module, and see how our layout responds. Remember our little blockquote, comfortably tucked into our blog article? <div class="figure"><p><img src="robot.jpg" alt="" /><b class="figcaption">Lo, the robot walks</b></p></div> Nothing fancy: an img element, followed by a brief but descriptive caption wrapped in a b element. Fluid images#section2 Me?

Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website Advertisement Many companies try to create a great experience for customers. But few are willing to make the changes required to deliver on that promise. CSS3 continues to both excite and frustrate web designers and developers. Further Reading on SmashingMag: Link In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. The Media Queries5 in CSS3 take this idea and extend it. width and height (of the browser window)device width and heightorientation – for example is a phone in landscape or portrait mode? If the user has a browser that supports media queries then we can write CSS specifically for certain situations6. The dConstruct 2010 website in Safari on a desktop computer

Branding, Identity & Logo Design Explained A logo is not your brand, nor is it your identity. Logo design, identity design and branding all have different roles, that together, form a perceived image for a business or product. There has been some recent discussion on the web about this topic, about your logo not being your brand. What is brand? To explain this in more detail, let’s start at the top – the brand. What is branding? Branding is certainly not a light topic – whole publications & hundreds of books have been written on the topic, however to put it in a nutshell you could describe a ‘brand’ as an organisation, service or product with a ‘personality’ that is shaped by the perceptions of the audience. Many people believe a brand only consists of a few elements – some colours, some fonts, a logo, a slogan and maybe some music added in too. It is the consistency of this core idea that makes up the company, driving it, showing what it stands for, what it believes in and why they exist. What is identity design? What is a logo?

50 Free Wireframe Templates for Mobile, Web and UX Design In the initial stages of a project, when ideas aren’t quite fully formed, it’s good practice to wireframe the layout of your mobile app or web project by stripping away all design elements and flourishes to help define and better communicate the information hierarchy of the layout and plan for functionality and user flow. Whether you create them using a whiteboard, pencil and paper, web-based tools, or using a graphic application, effective wireframing and planning play a critical role in the success of your product. While most wireframing tools are readily and freely available (pen, paper, markers…), you may have to pay to use some web-based tools, and if you know where to look, you can also grab some free, templates for graphic applications like Photoshop, Illustrator or Sketch. Lucky for you know where to look, as you have landed on this page! Material Design Wireframe Kits Material Design Wireframe Kit (Sketch). Material Design Mobile Wireframe Templates (PSD). iOS Wireframe Kits

What is Vertical Align? CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it's use a little bit. The basic usage is like this: Notice in this usage case, it is being applied to the img element. The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage. The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. Baseline The default value of vertical-align (if you declare nothing), is baseline. Middle Perhaps the most common use for vertical-align is setting it to 'middle' on icon-size images. The browser does the best job it can centering the pixel height of the text with the pixel height of the image: Be aware that if the image is larger than the current font-size and line-height, it will push the following lines down if need be: Text-bottom Text-top Top & Bottom Sub & Super Vertical Align on Table Cells Share On

CSS Grid Layout Terminology, Explained In the CSS Grid Layout Specification, a grid is defined as the following - The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed Err… what? 🤔 CSS Grid Layout introduces a lot of new concepts; there are 17 new properties to learn, and many more new terms to understand. The Grid Container and Grid Items A Grid starts with the grid container. The grid container can be thought of like the flex container in the Flexible Box Layout Module (created with display: flex or display: inline-flex), or a basic Table (created with display: table or display: inline-table). A grid container establishes a new grid formatting context for its child elements, which are now grid items. Grid Lines Grid lines are the horizontal and vertical lines which divide the grid. The grid line number is used when placing grid items within the container. Grid Cells Grid Areas

Choosing a Grid System This entry is part 13 of 13 in the Design School for Developers Session - Show All « Previous In the previous article , I introduced you to grid systems. With any luck, by now, you should have a good understanding of what they are and why they’re a good weapon to have in your design arsenal. Today, I’m going to explain about choosing a grid system – from creating your own, to working with pre-made CSS frameworks. By the end of this article, you’ll have a good idea of the way you might like to walk your path with grid systems – and hopefully feel confident enough to do so. Our Choices Let’s begin by narrowing things down. Framework or D.I.Y.? We have two choices before us: do we go with a pre-made framework that somebody else has already built, or do we create our own grid system and work with that? I would always recommend that if you’re just starting out with designing for the web, then it may be more beneficial for you to start designing with pre-made frameworks. Pre-Made Frameworks D.I.Y.

All About Grid Systems – Web Design – Tuts+ Tutorials Now you know all about colour, typography and various things you should undertake before you start a design project, it’s time to start getting down and dirty with some of the basics of working with grids in your designs. Grids enable you to build solid structure and form into your designs. Much like we looked at typographic hierarchies and rhythm, we can effectuate the same feelings through using a grid structure. Just as with coding, there are recommended ways to organise modules and sections of code, and a grid system can help similarly when designing for the web. Grids aren’t just useful for us as designers or developers - they’re good for the user, too. If your website is well designed, a grid will help you to project that confidence further to your users - however consciously or sub-consciously that projection may be. What is a Grid System? ..a structure comprising a series of horizontal and vertical lines, used to arrange content. Advantages of Using Grid Systems Assignments