Subscribe: TJKDesign.com
http://www.tjkdesign.com/xml/TJKFeed.xml
Added By: Feedage Forager Feedage Grade C rated
Language: English
Tags:
atomic  box  classes  container  css  file  hidden floats  items  overflow hidden  rules  sheet  side  style sheet  style  styling 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: TJKDesign.com

cssmojo



A blog about HTML, CSS, JavaScript, Web Standards, and Accessibility.



Updated: 2017-07-13T19:46:48-07:00

 



Preventing Reflow

2017-03-03T00:00:00-08:00

I saw this in my timeline yesterday: Released css-aspect-ratio, a tiny module for preserving aspect ratios in pure CSS w/ custom properties. Take a look! https://t.co/CgUgv1ptaw— Sérgio Gomes (@sergiomdgomes) March 1, 2017 This is a quick preview of what we have in store for Atomic CSS. The video at the end of this article shows Atomizer in action - which is a very cool tool built by [@renatoiwa](https://twitter.com/renatoiwa). It also shows a "quick search" page meant to help authors quickly find the Atomic class that matches the property or value they want; that one is built by [@stevenrcarlson](https://twitter.com/stevenrcarlson). TL;DR: don't write rules in a style sheet, let Atomizer do that for you. Benefits: no maintenance, no bloat. If you are new to Atomic CSS you may want to read this article on Smashing Magazine, watch this HTML5DevConf video, or check this slide deck presented at FED London. Atomizer Atomizer is a node module which parses the files in your project (looking for Atomic classes) and create a atomic.css style sheet. If you use Atomic classes somewhere it will add those to the style sheet. If you then decide to remove some or change some, it will update the file to reflect what is actually being used in your project. For example, adding the following snippet in a file:
Creates the following rules in the Atomic style sheet: .M-a { margin: auto; } .W-50\% { width: 50%; } Changing the width in the snippet
Changes the rules in the style sheet: .M-a { margin: auto; } .W-40\% { width: 40%; } The config file Atomizer is smart enough to create many rules on the fly. This is true for classes for which the suffix is either a defined value or a "guessable" one. In the above examples, auto is a defined value while 40% and 50% are "guessable" ones. Authors can use the config file to create their own classes — to get any styling they want. For example, the following entries in the config file: 'color':{ custom: [ {suffix: 'primary', values: 'teal'} ] }, 'padding':{ custom: [ {suffix: 'gutter', values: '10px'} ] }, 'font-family':{ custom: [ {suffix: 'roboto', values: 'roboto, sans-serif'} ] }, 'box-shadow':{ custom: [ {suffix: 'light', values: '0 0 3px #ccc;'} ] } create these rules: .C-primary { color: teal; } .P-gutter { padding: 10px; } .Ff-roboto { font-family: roboto, sans-serif; } .Bxsh-light { box-shadow: 0 0 3px #ccc; } The config file is also used to define breakpoints (for RWD). This allows the creation of context-based classes. Classes related to breakpoints look like this: D-ib--sm (i.e. display: inline-block; to only apply within the "small" breakpoint) W-50%--md (i.e. width: 50%; to only apply within the "medium" breakpoint) Fz-18px--lg (i.e. font-size: 18px; to only apply within the "large" breakpoint) etc. Lastly, it is in the config file that we map the start/end keywords Atomic CSS uses with left and right (depending on script direction). Advanced classes We are introducing new classes/syntax to help authors create common styling without having to write a single rule in their style sheet. For example, adding the following snippet in a file: Creates the following rules in the Atomic style sheet: .Td-n\:h:hover { text-decoration: none; } .Fw-b\:f:focus { font-weight: bold; } Authors can even reference ancestors from the node they are styling, for example:
Creates this rule: .container:hover .container\:h\/Fw-b { font-weight: bold; } Which makes the element bold when the user hovers over its container (div[...]



Styling Effective Carousels

2015-02-01T00:00:00-08:00

This article is not about designing effective carousels but about styling them effectively. In other words, this is not about UI design but CSS constructs — how carousel items flow, their positioning and dimensions. TL;DR: use neither float nor position:absolute Relying on JavaScript for interaction, not for styling An "effective" carousel is a carousel that does not rely on JavaScript to: be responsive contain any number of items display any number of items The challenges There are many methods of displaying items of a carousel side-by-side, however some of these methods are better than others. Using float The carousel on http://www.disneystore.com/ shows the two main limitations of this styling: the container must be styled with a width greater or equal to the sum of the width of its children (their margin box) in order to display all the items side-by-side (to prevent those items from wrapping). the items' width cannot really be specified using percentages as the containing block's (the box that is used as a reference for calculating that width) dimension is tied to the number of its children — not to the carousel's visible area. To better understand the issue, consider this example below: .example, .example * { margin: 0; padding: 0; } .example { border: 5px solid deeppink; } .example li { font: 72px/100px arial, sans-serif; color: #fff; text-align: center; box-sizing: border-box; list-style-type: none; border: 1px solid #fff; background: #3CB371; width: 100px; height: 100px; } .example-1 { overflow: hidden; /* to contain the floats */ } .example-1 li { float: left; }
  • 1
  • 2
  • 3
  • 4
  • 5
ul { border: 5px solid deeppink; overflow: hidden; /* to contain the floats */ } li { border: 1px solid #fff; background: #3CB371; width: 100px; height: 100px; float: left; } 1 2 3 4 5 The list abobe contains five items — all styled as floats. The list itself is styled with overflow:hidden (to create a block-formatting context) so the list encloses the floats instead of collapsing onto itself. The problem here is that the items wrap if their container is not wide enough to contain all of them side-by-side, as shown below: .example-2 { overflow: hidden; /* to contain the floats */ width: 450px; } .example-2 li { float: left; } ul { overflow: hidden; /* to contain the floats */ width: 450px; } li { float: left; } 1 2 3 4 5 This is why this solution requires setting an explicit width on the container which prevents said container from being truly responsive (without the need for JavaScript). Using position:absolute In carousels like the one on http://on.aol.com/, all items are removed from the flow, hence each one of them relies on a different offset value to show next to its previous sibling. Consider this new example: .example-3 { height: 100px; /* prevent the container from collapsing */ } .example-3 li { position: absolute; } ul { height: 100px; /* prevent the container from collapsing */ } li { position: absolute; } 1 2 3 4 5 Because all boxes are absolutely positioned, they are removed from the flow and share the same x/y coordinates; the last box showing on top of the stack. As a result, authors need to do 3 things: style the container with a height, to prevent the following elements in flow from moving up (behind the boxes). style each box with a left offset, to show them side-by-side. style the container with position:relative, to make it the containing-block of its children. The same boxes styled as described above: .example-4 { height: 100px; /* prevent the container from collapsing */ p[...]