Index
B
- background images
- CSS backgrounds / CSS backgrounds
- base64
- about / Usage of base64
- usage / Usage of base64
- Block Element Modifier (BEM)
- about / Block Element Modifier (BEM)
- URL / Block Element Modifier (BEM)
- using, in sample / Using BEM in our sample
- using, in SASS / Using BEM in SASS
- modifier, using / How to use modifier?
- block elements
- about / Block elements
- box-shadow
- adding / How to add box-shadow
C
- calc() method
- about / The calc() method
- centering elements
- about / Centering elements
- inline elements / Inline elements – horizontal centering
- horizontal centering / Inline elements – horizontal centering
- block elements / Block elements – centering in both axes
- axes, centering / Block elements – centering in both axes
- transform, using / Using transform in centering
- code optimization
- self-optimization / Self-optimization
- compatibility
- checking / Checking compatibility
- cross browser compatibility
- modern web browsers / Cross browser compatibility – which browsers should you install?
- Internet Explorer (IE) / Cross browser compatibility – which browsers should you install?
- inspector, using / How to use inspector
- key shortcuts / Key shortcuts
- CSS
- minifying / Minifying CSS
- CSS backgrounds
- about / CSS backgrounds
- repeating / Repeating of background
- background size / Background size
- background position / Background position
- multiple backgrounds / Multiple backgrounds
- sprites, creating / How to create and use sprites
- sprites, using / How to create and use sprites
- base64, using / Usage of base64
- CSS code
- assumptions / Good assumptions in code
- CSS declarations
- short forms, creating / Short forms of useful elements
- CSS elements positioning
- about / CSS elements positioning
- position static / Static, relative, absolute, fixed – differences
- position relative / Static, relative, absolute, fixed – differences
- position absolute / Static, relative, absolute, fixed – differences
- fixed elements / Static, relative, absolute, fixed – differences
- list of article, with fixed image / Lists with fixed images (on the right or left) and descriptions
- CSS methodologies
- about / CSS methodologies
- SMACSS / SMACSS
- OOCSS / OOCSS
- Block Element Modifier (BEM) / Block Element Modifier (BEM)
- selecting / Which methodology should you use?
- custom methodology, creating / Maybe your own methodology?
- cufon / Additional font and text features
D
- data attribute
- about / Data attribute
- issues / Issue – bold on hover moves the navigation
- display types
- about / Display types
- block elements / Block elements
- inline elements / Inline elements
- inline-block display / Inline-block display
- using, for navigations / Where can you use other types of elements – navigation
- using, for problem of equal boxes / Where can you use other types of elements – problem of equal boxes
- drawing primitives, in CSS
- about / Drawing primitives with CSS
- rectangle/square, drawing / How to draw a rectangle/square
- circle, drawing / How to draw a circle
- ring, drawing / How to draw a ring
- triangle, drawing with CSS / How to draw a triangle with CSS
E
- @extend / Extending classes (@extend)
- e-mail template
- inlining / Inlining the e-mail template
- e-mail template development
- Emmet
F
- file structure
- about / File structure
- creating / File structure
- final automatizer
- about / Final automatizer
- flexbox
- about / Flexbox
- basics / Flexbox
- initializing / Flexbox
- usage / Flexbox
- property align-items / Flexbox property align-items
- property flex-wrap / Flexbox property flex-wrap
- property justify-content / Flexbox property justify-content
- property align-content / Flexbox property align-content
- property flex-direction / Flexbox property flex-direction
- page structure, creating / Usage of flexbox – creating page structure
- order of boxes, changing in mobile/tablet view / Usage of flexbox – change order of boxes in mobile/tablet view
- floating elements
- about / Floating elements
- possibilities / Possibilities of floating elements
- issues / Most known floating problems
- clear fix/class/mixin, defining / Defining clear fix/class/mixins
- example / Example of using floating elements
- font and text features
- about / Additional font and text features
- non-standard fonts, using in browser / Using non-standard fonts in browsers
- CSS animations, using / Using CSS animations
- framework
- testing / Let's test and use our framework
- using / Let's test and use our framework
G
- Google Fonts
- reference link / Using non-standard fonts in browsers
- gradients, CSS
- about / Gradients in CSS
- linear gradient / Linear gradients
- mixins, using / Using gradient mixins
- radial gradient / Radial gradients
- grids
- about / Grids
- standard grids 16/12 / Standard grids 16/12
- Gulp
- about / Gulp
I
- (@import / Importing files (@import)
- @include / Simple mixins – where and how to use (@mixin, @include)
- IDE
- selecting / Choosing the right IDE
- programming process, setting up with snippets/Emmet / Speeding up the programming process with snippets/Emmet
- keyboard shortcuts / Keyboard shortcuts
- inline-block display
- about / Inline-block display
- inline elements
- about / Inline elements
J
- JADE
- using, as templating engine / Jade as your templating engine
- installing / Installing and using Jade
- using / Installing and using Jade
- URL / Installing and using Jade
- basics / Basics of Jade
- mixins / Mixins in Jade
- include method / Include and extend functions in Jade
- extend method / Include and extend functions in Jade
- in gulp.js / Jade in gulp.js
M
- (@mixin / Simple mixins – where and how to use (@mixin, @include)
- mailer
- testing / Testing your mailer
- main navigation, usage sample
- about / Usage sample – main navigation
- MeasureIT plugin
- about / MeasureIT plugin
- media queries
- about / Media queries – where can you use it, Media queries
- building / How to build media queries
- working / How media queries work?
- for specific views/devices / Media queries for specific views/devices
- selecting, for mobile devices / How to choose proper media queries for mobile devices
- template / Media queries template
- minification
- about / Minifying CSS
- mixins
- animation / Other mixins
- gradients / Other mixins, Clearfix
- clearfix / Other mixins, Clearfix
O
- OOCSS (Object Oriented CSS)
- about / OOCSS
- URL / OOCSS
- principles / OOCSS
- using, in sample / Using OOCSS in our sample
- opacity
- about / Dealing with opacity
- dealing with / Dealing with opacity
- versus rgba / Opacity versus RGBA – differences and where can we use them
- fallback for old IE versions / Opacity in the past – fallback for old IE versions
P
- .parent span
- .parent strong
- nth-of-type(2) / How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type
- nth-last-of-type(2) / How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type
- Pixelfperfect plugin
- about / Pixelfperfect plugin
- Pixelperfect layouts tools
- about / Pixelperfect layouts tools
- Pixelfperfect plugin / Pixelfperfect plugin
- MeasureIT plugin / MeasureIT plugin
- preprocessors
- about / Preprocessor – why should you use them?
- advantages / Preprocessor – why should you use them?
- elements, nesting / Nesting elements in preprocessors
- CSS code, parametrizing with variables / Using variables to parametrize your CSS code
- mixins, using / Using mixins in preprocessors
- mathematical operations / Mathematical operations
- logic operations / Logic operations and loops
- loops / Logic operations and loops
- multiple files, joining / Joining of multiple files
- Less / Less – a short introduction
- CSS, with Stylus / CSS with Stylus
- SASS / SASS – the most mature preprocessor
- SASS features / Short comparison
- Compass usage / Short comparison
- project, preparing
- about / Preparing your project
- files structure / Files structure
- variables, keeping / How to keep variables in a project
- mixins, keeping / How and where to keep mixins (local and global)
- typography styles, keeping in seperate file / Keep typography styles in a separate file
- specific elements, viewing / Views of specific elements
- proper selectors
- creating / Creating proper selectors
- IDs, using / Using IDs
- classes, using / Using classes
- grouping / Grouping selectors
- fundamental knowledge / Interesting selectors
- adjacent sibling combinatory + / Adjacent sibling combinatory +
- child combinator (>) / Child combinator ">"
- adjacent sibling combinatory ~ / Adjacent sibling combinatory ~
- element, obtaining by attribute / Getting elements by attributes
- attribute with exact value [attribute=&&value&&] / Attributes with exact value [attribute="value"]
- attribute which begins with [attribute^=&&value&&] / Attributes which begin with [attribute^="value"]
- whitespace separated attribute values [attribute~=&&value&&] / Whitespace separated attribute values [attribute~="value"]
- attribute value ends with [attribute$=&&value&&] / Attribute values ending with [attribute$="value"]
- attribute contains string [attribute*=&&value&&] / Attributes containing strings [attribute*="value"]
- !important, using in CSS / Using !important in CSS
- properties, CSS animations
- animation-name / Using CSS animations
- animation-delay / Using CSS animations
- animation-duration / Using CSS animations
- animation-iteration-count / Using CSS animations
- animation-fill-mode / Using CSS animations
- pseudoclasses
- about / Pseudoclasses
- hover state, checking / How can we check :active, :hover state?
- multilevel menu / Usage – multilevel menu
- CSS hover rows / Usage – CSS hover rows
- usage / Usage of pseudoclasses
- pseudoelements, using / How to use :first-child, :last-child, :nth-child()
- &first-child, using / How to use :first-child, :last-child, :nth-child()
- &last-child, using / How to use :first-child, :last-child, :nth-child()
- &nth-child(), using / How to use :first-child, :last-child, :nth-child()
- table, styling / Usage – styling table
- &nth-child parameters, exploring / Exploring :nth-child parameters
- &nth-last-child, using / How to use :nth-last-child
- &first-of-type, using / How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type
- &last-of-type, using / How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type
- &nth-last-of-type, using / How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type
- &nth-of-type, using / How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type
- empty elements, with &empty pseudoclass / Empty elements with the :empty pseudoclass
- pseudoelements
- about / Pseudoelements
- using / Pseudoelements, Where can we use :before and :after?
- &after / What is :before and :after?
- &before / What is :before and :after?
- simple text manipulation / First letter and first line – simple text manipulation
- selection color, changing / How to change selection color? Usage of ::selection
- &selection pseudo element / How to change selection color? Usage of ::selection
Q
- quality assurance (QA) phase
- about / Pixelperfect layouts tools
R
- responsive websites
- foundation / The foundation of responsive websites
- creating / The foundation of responsive websites
- desktop first methodology / Desktop first methodology
- mobile first methodology / Mobile first methodology
- viewport, adjusting in HTML / Adjusting the viewport in HTML
- viewport, selecting / Choosing the right viewport
- aforementioned fold methodology / Above the fold
- retina
- about / Retina problems
- retina problems
- about / Retina problems
- reusable mixins
- gathering / Gathering other reusable mixins
- primitives / Primitives
- Ruby on Rails (RoR) projects / SASS – the most mature preprocessor
S
- SASS foundation
- about / SASS foundation
- variables, using / Variables – where and how to use
- simple mixins / Simple mixins – where and how to use (@mixin, @include)
- classes, extending / Extending classes (@extend)
- files, importing / Importing files (@import)
- &, using / Using of
- Compass features / Compass features
- scalable and modular code
- building / Building scalable and modular code
- Scalable Inman Flash Replacement (SIFR) / Additional font and text features
- self-optimization, code
- about / Self-optimization
- steps / A few steps before you push code live
- short forms, using / Using short forms
- repetitions, checking / Checking repetitions
- short forms, code optimization
- about / Using short forms
- of paddings/margins / Short forms of paddings/margins
- of borders / Short forms of borders
- in fonts styling / Short forms in fonts styling
- in backgrounds / Short forms in backgrounds
- simple automatization
- SMACSS
- about / SMACSS
- URL / SMACSS
- rules / SMACSS
- base rules / Base rules
- layout rules / Layout rules
- module rules / Module rules
- state rules / State rules
- theme rules / Theme rules
- benefits / Summary of SMACSS
- specific devices, targeting through media queries
- about / Targeting specific devices through media queries
- CSS properties, in e-mail templates / CSS properties in e-mail templates
- responsive e-mail templates / Responsive e-mail templates
- sprite
- about / How to create and use sprites
- creating / How to create and use sprites
- using / How to create and use sprites
- standard reusable structures
- about / Standard reusable structures
- reusable multilevel menu / Reusable multilevel menus
- reusable buttons, creating / How to create reusable buttons
- stretch / Flexbox
- styling forms
- most known issues / Forms – the most known issues
- most known restrictions / Forms – the most known issues
- superpowers, enabling / Forms – enable superpowers
- input, styling / How to style simple input
- placeholders / Don't forget about placeholders
- complex and elastic forms, styling / Complex form based on input[type="text"] and labels
- textarea, styling / How to style textarea
- select (drop down), styling / Styling of select (drop down)
- supporting forms styling, with pseudoclasses
- about / Supporting forms styling with pseudoclasses
- validation, with &valid and &invalid / Validation with :valid and :invalid
- input statuses, adding / Adding input statuses :focus, :checked, :disabled
- placeholder, colorizing / Additional aspect – colorize the placeholder
T
- tables structure
- about / Back to tables
- styles, resetting / Resetting styles
- text-shadow
- adding / How to add text-shadow
- tips, for e-mail template development / Tips for e-mail template development
- traditional box model
- about / Traditional box model
- padding / Padding/margin/border/width/height
- margin / Padding/margin/border/width/height
- border / Padding/margin/border/width/height
- width / Padding/margin/border/width/height
- height / Padding/margin/border/width/height
- problems, omitting with / Omitting problems with the traditional box model (box-sizing)
- transform
- about / More about transform
- using / More about transform
- Typekit
- reference link / Using non-standard fonts in browsers
U
- UnCSS
- about / UnCSS
- integrating, in gulp / Integrating UnCSS in Gulp