Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

  • Management
  • Design
  • Requirements
  • Development
  • Test
  • Atlassian

Categories

  • Personal
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-Commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-Commerce
  • Others

Categories

  • Thoughts
  • Debate
  • Health
  • Hobbies

Categories

  • Personligt
    • Åsikter
    • Humor
    • Spel
    • Träning
  • Allmänt
    • Internet
    • Program & tjänster
  • Intressant
    • Prylar
  • Professionellt
    • Management
    • Krav
    • Designs
    • Webbutveckling
    • Test
    • Atlassian
    • säkerhet
    • Förvaltning
    • Ehandel
    • Wordpress
  • Personligt_

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-commerce
  • Assa Abloy
  • Axfood
  • Bikbok
  • Bonnier
  • ChessIT
  • Egmont
  • Elkjøp
  • Electrolux
  • Happy Socks
  • Home Enter
  • Home Shop
  • H&M
    • Jira Expert
  • Indiska
  • Inkclub
  • Interflora
  • Martin & Servera
  • MQ
  • Pricerunner
  • Shopathome
  • Svenska Färghusgruppen
  • Stadium
  • Stockholm Exergi
  • Trygg Ehandel
  • Viktklubb

Categories

  • Prologue
    • About This Book
  • The Tools
    • Jira Software
    • Confluence
    • Jira Service Management
  • The Inception Phase
    • Portfolio Management
    • Project Management
  • The Design Phase
    • Design as part of the Inception phase
    • Design as part of the Requirement phase
    • Working with design libraries
  • The Requirement Phase
    • Definition of Requirements
    • The four levels of Requirements
  • The Development Phase
    • Atomic design
    • Estimations
  • The Test Phase
    • The Definition of Test
    • Types of Test
  • The Operations Phase
    • Release Management
  • The Post Go-Live Phase
    • Incidents
    • Changes
  • Notes
    • My Muses
    • Research

Categories

  • Theme Building
  • Javascript Framework
  • CSS Framework
  • IPS: Pages
    • Database Templates
    • Block Plugin Templates
    • Page Templates
  • Custom Applications
  • Tips & Tricks

Categories

  • Europe
    • Central Europe
    • Eastern Europe
    • Northern Europe
    • Southeastern Europe
    • Southern Europe
    • Western Europe
  • North America
    • United States of America
    • Canada
    • Mexico
    • Caribbean
    • Central America
  • South America
    • Argentina
    • Bolivia
    • Brazil
    • Chile
    • Colombia
    • Ecuador
    • Falkland Islands
    • Guyana
    • Paraguay
    • Peru
    • Suriname
    • Uruguay
    • Venezuela
  • Africa
    • Northern Africa
    • Central Africa
    • Western Africa
    • Eastern Africa
    • Southern Africa
  • Asia
    • Central Asia
    • East Asia
    • South-Eastern Asia
    • Southern Asia
    • Western Asia
  • Oceania
    • Australia
    • Fiji
    • Kiribati
    • Marshall Islands
    • Micronesia
    • Nauru
    • New Zealand
    • Palau
    • Papua New Guinea
    • Samoa
    • Solomon Islands
    • Tonga
    • Tuvalu
    • Vanuatu

Categories

  • Shared Hosting
  • Virtual Private Server
  • Cloud Hosting
  • Dedicated Hosting
  • Co-Location
  • Hosting Services

Categories

  • Professional
    • Management
    • Design
    • Requirements
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce

Categories

  • Defects
  • Ideas
  • Development
  • ☑ Archive

Categories

  • Professional
  • Management
    • Agile
  • Requirements
  • Design
  • Development
    • Frontend
    • Backend
  • Testing
  • Operations
    • Hosting
  • Atlassian
  • Security
  • E-commerce
    • CRO
    • SEO
  • Interesting

Forums

  • General
    • Open Forum
    • Support
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Test / QA
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
    • Invision Community
  • Jobs
    • Looking for employee / consultant
    • Looking for Job / Assignment
  • Building The Site's Forums
  • Destiny 2's Discussions
  • The Journey's Discussions
  • Cinephilia's Topics
  • Diablo 4's Diablo 4 Topics
  • Shadownessence's Topics
  • sensory hyperreactivity's Topics
  • Wolcen's Wolcen Topics
  • Quality Assurance Heroes's QA Topics
  • Visual Studio Code's Forum
  • Adobe Illustrator's Adobe Illustrator Forum
  • Sketch Guru's's Sketch Topics
  • Requirements & test management in Jira's Topics
  • Microsoft Teams's Microsoft Teams Discussions
  • Figma's Figma Topics
  • Microsoft Planner's Microsoft Planner Topics
  • Psychology's Psychology Topics
  • Microsoft Word's Microsoft Word Topics
  • Microsoft Powerpoint's Microsoft Powerpoint Topics
  • WordPress Devs's Wordpress Topics
  • Ornamental Design's Ornamental Design Topics
  • Adobe Photoshop's Photoshop Discussions
  • Agile 2's Agile 2 Topics
  • Agile 2's Agile 2 Principles
  • Microsoft Outlook's Outlook Topics
  • My Book's Discussions
  • Outriders's Outriders Discussions

Categories

  • Jimi's Files
    • Curriculum vitae
    • Presentations
    • Certificates
  • Management
  • Requirements
  • Design
    • Fonts
  • Code
  • Test
  • Operations
  • Atlassian
    • Certificates of Excellence
  • Security
  • Ecommerce
  • Invision Power Services
    • JWSE Support Tickets
    • JWSE Task Management
  • Shadownessence's Files
  • WordPress Devs's Wordpress Files

Calendars

  • Project: JWSE Workboard
  • Project: JWSE Workboard
  • Community Calendar
  • Professional Events
  • Management Events
  • Requirement Events
  • Design Events
  • Development Events
  • Test Events
  • Atlassian Events
  • Operations Events
  • E-commerce Events
  • Destiny 2's Events
  • The Journey's Events
  • Cinephilia's premieres
  • Diablo 4's Diablo 4 Events
  • Agile 2's Agile 2 Events

Blogs

  • How to start your own blog
  • Sketch Blog
  • Building The Site's Blog
  • Destiny 2's Destiny 2 ramblings
  • The Journey's Stories
  • Diablo 4's Diablo 4 blog
  • Sketch Guru's's Sketch News
  • Requirements & test management in Jira's News
  • Agile 2's Agile 2 Blog

Categories

  • Personal
    • Humor
    • Music
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
  • Destiny 2's Videos
  • The Journey's Videos
  • Cinephilia's Trailers
  • Diablo 4's Diablo 4 Videos
  • Wolcen's Wolcen Videos
  • Visual Studio Code's Videos
  • Adobe Illustrator's Adobe Illustrator Videos
  • Sketch Guru's's Sketch Videos
  • Requirements & test management in Jira's Videos
  • Microsoft Teams's Microsoft Teams Videos
  • Figma's Figma Videos
  • Microsoft Planner's Microsoft Planner Videos
  • Psychology's Psychology Videos
  • Microsoft Word's Microsoft Word Videos
  • Microsoft Powerpoint's Microsoft Powerpoint Videos
  • WordPress Devs's Wordpress Videos
  • Ornamental Design's Ornamental Design Videos
  • Adobe Photoshop's Photoshop Videos
  • Agile 2's Agile 2 Videos
  • Microsoft Outlook's Outlook Videos
  • Outriders's Outriders Videos

Categories

  • Movies
    • Action Movies
    • Adventure Movies
    • Animated Movies
    • Comedy Movies
    • Crime Movies
    • Drama Movies
    • Fantasy Movies
    • Horror Movies
    • Romance Movies
    • Sci-Fi Movies
    • Thriller Movies
    • Western Movies
  • TV Shows
    • Action TV Shows
    • Adventure TV Shows
    • Animated TV Shows
    • Comedy TV Shows
    • Crime TV Shows
    • Drama TV Shows
    • Fantasy TV Shows
    • Horror TV Shows
    • Romance TV Shows
    • Sci-Fi TV Shows
    • Thriller TV Shows
    • Western TV Shows

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me

  1. Front-end development is fascinating, not only because you can create magical experiences and it is very tangible to see the results of your work, but also because of the vast number of options available for building UIs. Regularly we face the decision to pick from fantastic JavaScript frameworks and CSS or visual design frameworks, which grew up so complex that they have their own learning curve.
  2. Not too long ago, someone asked me if I could clone the Google Font theme toggle button, and after looking at it, it looked like a lot of fun to try and do, so I took on the challenge! 🔗 Links ✅ Google Fonts: https://fonts.google.com/ ✅ My finished code: https://codepen.io/kevinpowell/pen/Po... ⌚ Timestamps 00:00 - Introduction 00:55 - Getting everything ready 03:14 - Setting the stage with CSS 07:08 - Adding custom properties 10:36 - Changing the theme on click 15:01 - Changing the aria-label on click 18:04 - adding the tooltip 23:22 - Animating the tooltip 27:27 - Animating the icon 35:06 - Changing the icon on page load 40:48 - Adding the pulse animation 50:00 - Using focus-visible to improve the tooltip
  3. Polypane is a browser built from the ground up to create websites and apps and it just released version 2.1 with some nice new features. The aim is to give you better insights into your site and make the entire developer/designer workflow faster and the features to do so is pretty great. What's new? Quick list of the major new features: Live CSS Edit all panes at the same time Social media previews See what your page looks like when shared on Facebook, Slack, Twitter and LinkedIn. Meta info Get a full overview of all your meta tags Handoff / browse Use Avocode, Zeplin and more directly in Polypane Workspaces UI Quickly switch between your favorite pane sets Beyond that, we also added network throttling, new and improved overlays, better indicators, ways to detect when your site is shown in Polypane, speed improvements, and many more smaller features. You can read all the changes here: Polypane 2.1: Edit all your panes at the same time | Polypane browser for dev & design POLYPANE.APP With Polypane, we want to give you better insights into your site and make the entire developer/designer workflow faster… --- If you do not know what Polypane is, then maybe this short video can help explain it.
  4. Class prefixes/modifiers Wait, what's that sm: bit in the atomic classname example above? That's a new naming convention you'll see which controls at which breakpoints the style is applied. Unprefixed (e.g. ipsBorder_top). Applies to all devices, desktop and smaller. md: (e.g. md:ipsBorder_top). Applies to tablets and smaller. sm: (e.g. sm:ipsBorder_top). Applies to phones only. sm and md prefixes take priority over the desktop classname. This means you provide the desktop classname but can override it for tablets and/or phones by also adding an md: or sm: classname. For example, ipsPadding_top:double sm:ipsPadding_top:half applies double top padding on desktop, but only half top padding on phones. You'll also see modifiers on some classes (as in the example above), for example ipsPadding:half. ipsPadding is saying 'apply padding to all sides', and the ':half' modifier makes it a smaller amount. View full record
  5. Class prefixes/modifiers Wait, what's that sm: bit in the atomic classname example above? That's a new naming convention you'll see which controls at which breakpoints the style is applied. Unprefixed (e.g. ipsBorder_top). Applies to all devices, desktop and smaller. md: (e.g. md:ipsBorder_top). Applies to tablets and smaller. sm: (e.g. sm:ipsBorder_top). Applies to phones only. sm and md prefixes take priority over the desktop classname. This means you provide the desktop classname but can override it for tablets and/or phones by also adding an md: or sm: classname. For example, ipsPadding_top:double sm:ipsPadding_top:half applies double top padding on desktop, but only half top padding on phones. You'll also see modifiers on some classes (as in the example above), for example ipsPadding:half. ipsPadding is saying 'apply padding to all sides', and the ':half' modifier makes it a smaller amount.
  6. "Pull" class To better display content areas on mobile, a class named ipsResponsive_pull has been added which 'pulls' a box on the left and right sides on small devices. It's intended to be used on boxes (normally with the ipsBox class) that you want to take up the whole screen width on mobile, allowing better usage of the available screen space. View full record
  7. "Pull" class To better display content areas on mobile, a class named ipsResponsive_pull has been added which 'pulls' a box on the left and right sides on small devices. It's intended to be used on boxes (normally with the ipsBox class) that you want to take up the whole screen width on mobile, allowing better usage of the available screen space.
  8. Borders We've also added a class family to add light grey 1px borders to elements - used commonly as dividers between some parts of the page. ipsBorder - apply border to all sides ipsBorder:none - remove border from all sides ipsBorder_vertical - apply border to top and bottom ipsBorder_horizontal - apply border to left and right ipsBorder_top, ipsBorder_bottom, ipsBorder_left, ipsBorder_right - apply border to a particular side These classes have md and sm prefixed versions too, to control borders shown on each device size. This is particularly useful if you apply a border to a flex child which is in a row on desktop but a column on desktop, for example - you will be able to easily control which side the border appears on once collapsed. View full record
  9. Borders We've also added a class family to add light grey 1px borders to elements - used commonly as dividers between some parts of the page. ipsBorder - apply border to all sides ipsBorder:none - remove border from all sides ipsBorder_vertical - apply border to top and bottom ipsBorder_horizontal - apply border to left and right ipsBorder_top, ipsBorder_bottom, ipsBorder_left, ipsBorder_right - apply border to a particular side These classes have md and sm prefixed versions too, to control borders shown on each device size. This is particularly useful if you apply a border to a flex child which is in a row on desktop but a column on desktop, for example - you will be able to easily control which side the border appears on once collapsed.
  10. Gaps Another new family of classes is ipsGap. These classes are used when you want spacing between elements. In the past, you'd have to use :last-child or :first-child to exclude an element, or loop over the elements in the template to leave off a class. If elements wrapped to a new line, putting spacing between the lines was tricky too. ipsGap solves this by applying even spacing between elements, then applying a negative margin on the whole container to bring it back to the starting position. The classname is followed by a modifier, which is a number from our spacing scale, e.g. 1 is 4px spacing, 2 is 8px spacing and so on. ipsGap:1 (1-5 available) - applies both horizontal and vertical spacing around each element in the container ipsGap_row:1 (1-5 available, as well as 0 to remove) - applies vertical spacing on each element in the container Notice ipsGap_row also supports the :0 modifier. This allows you to have horizontal-only spacing - simply apply ipsGap:1 ipsGap_row:0. Be aware that using both ipsMargin (or custom styles that apply a margin) and ipsGap on the same element can cause issues. You may want add a wrapper element to handle your margin in this situation. View full record
  11. Gaps Another new family of classes is ipsGap. These classes are used when you want spacing between elements. In the past, you'd have to use :last-child or :first-child to exclude an element, or loop over the elements in the template to leave off a class. If elements wrapped to a new line, putting spacing between the lines was tricky too. ipsGap solves this by applying even spacing between elements, then applying a negative margin on the whole container to bring it back to the starting position. The classname is followed by a modifier, which is a number from our spacing scale, e.g. 1 is 4px spacing, 2 is 8px spacing and so on. ipsGap:1 (1-5 available) - applies both horizontal and vertical spacing around each element in the container ipsGap_row:1 (1-5 available, as well as 0 to remove) - applies vertical spacing on each element in the container Notice ipsGap_row also supports the :0 modifier. This allows you to have horizontal-only spacing - simply apply ipsGap:1 ipsGap_row:0. Be aware that using both ipsMargin (or custom styles that apply a margin) and ipsGap on the same element can cause issues. You may want add a wrapper element to handle your margin in this situation.
  12. CSS Variables & calc We're now making use of CSS variables (also known as CSS custom properties). Check out this MDN article if you aren't familiar with them. This enables us to define some values in one place but use them throughout the product - and it allows you to change the value in one place if you wish to do so for your theme. Most of our CSS variables are defined at the top of global.css in the CSS framework, but you'll also see some other local variables defined in other places. Variables are simply used by wrapping the name in the var() function, e.g. var(--positive-light). You'll see some variables named --sp-1 and so on. This is our new 4px spacing scale. In 4.5 and going forward, when we style elements we'll generally be using one of these values for widths, heights, borders, spacing etc. to keep everything consistent. You should do the same for elements you create. We're also making use of calc(). This is another CSS function that allows math operations to be done. Instead of having to hardcode numbers for positions, sizes etc., we can now use calc() to do it for us based on some other values (often CSS variables). CSS Variables for theme settings We are deprecating the usage of the {theme} and {hextorgb} tags for color-type theme setting keys (but not for non-color settings or when you need to pass a specific hex code in). Instead, color-type theme settings will automatically have a CSS variable created for them, named --theme-setting_key, where setting_key is the key of the setting as defined in the AdminCP. The variable will be a triplet representing the color, for example 255, 255, 255. Therefore, this value can be used with both the rgb and rgba CSS color functions. Here's an example. If in the past you'd wanted to use the area_background theme setting in your CSS, you'd do background: {theme="area_background"}. Or if you want some opacity, you'd do background: {hextorgb="area_background" opacity="0.2"}. In 4.5, the correct way of using these will be: background: rgb( var(--theme-area_background) ) and background: rgba( var(--theme-area_background), 0.2 ) respectively. We're doing this now because it will open up some exciting functionality in future. To be clear, any existing usage of {theme} and {hextorgb} will continue to work fine in 4.5, but we encourage you to move over to the CSS variable approach. View full record
  13. CSS Variables & calc We're now making use of CSS variables (also known as CSS custom properties). Check out this MDN article if you aren't familiar with them. This enables us to define some values in one place but use them throughout the product - and it allows you to change the value in one place if you wish to do so for your theme. Most of our CSS variables are defined at the top of global.css in the CSS framework, but you'll also see some other local variables defined in other places. Variables are simply used by wrapping the name in the var() function, e.g. var(--positive-light). You'll see some variables named --sp-1 and so on. This is our new 4px spacing scale. In 4.5 and going forward, when we style elements we'll generally be using one of these values for widths, heights, borders, spacing etc. to keep everything consistent. You should do the same for elements you create. We're also making use of calc(). This is another CSS function that allows math operations to be done. Instead of having to hardcode numbers for positions, sizes etc., we can now use calc() to do it for us based on some other values (often CSS variables). CSS Variables for theme settings We are deprecating the usage of the {theme} and {hextorgb} tags for color-type theme setting keys (but not for non-color settings or when you need to pass a specific hex code in). Instead, color-type theme settings will automatically have a CSS variable created for them, named --theme-setting_key, where setting_key is the key of the setting as defined in the AdminCP. The variable will be a triplet representing the color, for example 255, 255, 255. Therefore, this value can be used with both the rgb and rgba CSS color functions. Here's an example. If in the past you'd wanted to use the area_background theme setting in your CSS, you'd do background: {theme="area_background"}. Or if you want some opacity, you'd do background: {hextorgb="area_background" opacity="0.2"}. In 4.5, the correct way of using these will be: background: rgb( var(--theme-area_background) ) and background: rgba( var(--theme-area_background), 0.2 ) respectively. We're doing this now because it will open up some exciting functionality in future. To be clear, any existing usage of {theme} and {hextorgb} will continue to work fine in 4.5, but we encourage you to move over to the CSS variable approach.
  14. Font sizes We've moved font sizes to a fixed scale. These have been implemented as theme settings so they are customizable. However, rather than use the theme setting value directly, you should make use of the new {fontsize} plugin. This plugin ensures the global scale is applied to any values passed in, allowing 'large print' versions of themes to be easily created. You should use the {fontsize} plugin for font sizes both when you use one of the theme settings and when you use specific pixel values (e.g. {fontsize="72"} - for 72px text) When used with the {fontsize} plugin, the type scale keys are: x_small (12px) small (13px) medium (14px) base (16px) large (18px) x_large (20px) 2x_large (24px) 3x_large (30px) 4x_large (36px) View full record
  15. Font sizes We've moved font sizes to a fixed scale. These have been implemented as theme settings so they are customizable. However, rather than use the theme setting value directly, you should make use of the new {fontsize} plugin. This plugin ensures the global scale is applied to any values passed in, allowing 'large print' versions of themes to be easily created. You should use the {fontsize} plugin for font sizes both when you use one of the theme settings and when you use specific pixel values (e.g. {fontsize="72"} - for 72px text) When used with the {fontsize} plugin, the type scale keys are: x_small (12px) small (13px) medium (14px) base (16px) large (18px) x_large (20px) 2x_large (24px) 3x_large (30px) 4x_large (36px)
  16. Flexbox While we've used flexbox in some places in previous versions, 4.5 makes much wider use of it and also introduces a new family of classes. If you aren't familiar with flexbox, I highly recommend this CSSTricks article for a primer on it. Essentially, instead of positioning elements using floats/clears/etc., flexbox treats the container as a flexible box with properties for controlling how elements inside of it as laid out. 4.5 has a number of new classes that are essentially just convenience for the usual CSS rules. ipsFlex (sets element to display: flex) ipsFlex-ai:start, ipsFlex-ai:center, ipsFlex-ai:end, ipsFlex-ai:stretch (ai - values for align-items property) ipsFlex-as:start, ipsFlex-as:center, ipsFlex-as:end, ipsFlex-as:stretch (as - values for align-self property) ipsFlex-jc:start, ipsFlex-jc:center, ipsFlex-jc:end, ipsFlex-jc:around, ipsFlex-jc:between (jc - values for justify-content property) ipsFlex-fd:column, ipsFlex-fd:row, ipsFlex-fd:column-reverse, ipsFlex-fd:row-reverse (fd - values for flex-direction property) ipsFlex-fw:wrap, ipsFlex-fw:nowrap, ipsFlex-fw:wrap-reverse (fw - values for flex-wrap property) ipsFlex-flex:10 - sets flex-grow: 1 and flex-shrink: 0 ipsFlex-flex:11 - sets flex-grow: 1 and flex-shrink: 1 ipsFlex-flex:01 - sets flex-grow: 0 and flex-shrink: 1 ipsFlex-flex:00 - sets flex-grow: 0 and flex-shrink: 0 All of these classes have md and sm prefixed versions too, and this opens up the possibility of having different layouts on different device sizes in a way that's much easier than the hoops you'd have to jump through before. For example, to create some elements that show as a row on desktop but collapse to a column on mobile, you'd just apply ipsFlex ipsFlex-fd:row sm:ipsFlex-fd:column. The sm:ipsFlex-fd:column class overrules the ipsFlex-fd:row class on mobile, adjusting the layout. (Note: flex-direction: row is the CSS default direction anyway, so you can actually leave out ipsFlex-fd:row - it's implicit. I included it in the example for clarity.) View full record
  17. Flexbox While we've used flexbox in some places in previous versions, 4.5 makes much wider use of it and also introduces a new family of classes. If you aren't familiar with flexbox, I highly recommend this CSSTricks article for a primer on it. Essentially, instead of positioning elements using floats/clears/etc., flexbox treats the container as a flexible box with properties for controlling how elements inside of it as laid out. 4.5 has a number of new classes that are essentially just convenience for the usual CSS rules. ipsFlex (sets element to display: flex) ipsFlex-ai:start, ipsFlex-ai:center, ipsFlex-ai:end, ipsFlex-ai:stretch (ai - values for align-items property) ipsFlex-as:start, ipsFlex-as:center, ipsFlex-as:end, ipsFlex-as:stretch (as - values for align-self property) ipsFlex-jc:start, ipsFlex-jc:center, ipsFlex-jc:end, ipsFlex-jc:around, ipsFlex-jc:between (jc - values for justify-content property) ipsFlex-fd:column, ipsFlex-fd:row, ipsFlex-fd:column-reverse, ipsFlex-fd:row-reverse (fd - values for flex-direction property) ipsFlex-fw:wrap, ipsFlex-fw:nowrap, ipsFlex-fw:wrap-reverse (fw - values for flex-wrap property) ipsFlex-flex:10 - sets flex-grow: 1 and flex-shrink: 0 ipsFlex-flex:11 - sets flex-grow: 1 and flex-shrink: 1 ipsFlex-flex:01 - sets flex-grow: 0 and flex-shrink: 1 ipsFlex-flex:00 - sets flex-grow: 0 and flex-shrink: 0 All of these classes have md and sm prefixed versions too, and this opens up the possibility of having different layouts on different device sizes in a way that's much easier than the hoops you'd have to jump through before. For example, to create some elements that show as a row on desktop but collapse to a column on mobile, you'd just apply ipsFlex ipsFlex-fd:row sm:ipsFlex-fd:column. The sm:ipsFlex-fd:column class overrules the ipsFlex-fd:row class on mobile, adjusting the layout. (Note: flex-direction: row is the CSS default direction anyway, so you can actually leave out ipsFlex-fd:row - it's implicit. I included it in the example for clarity.)
  18. Victor Aflarenko

    Victor Aflarenko

    Hi! I'm Victor Aflarenko, a Swedish guy who is very passionate about music and graphic design. I love what I do, this is my passion. My inspiration comes from everything between music and buss rides.
  19. MikaelX

    Mikael X Johansson

    I am a very driven developer with a wide spectrum of knowledge and I like to take part in the whole process of the product. Great knowledge in NodeJS, Express, GIT, Jade/Pug, Sass/CSS, MySQL, XML, CSS, HTML, jQuery, xAuth, Facebook, Twitter, routing, prototyping just to mention a few Specialties: NodeJS, Express, PM2, Routing, Plugins, NPM, Bower, mySQL, XML, HTML, SASS/CSS, JS/ES2016, Gulp, Vagrant etc, please ask me for more details if you're interested
  20. My assignment was to create a new design for a political community called TheLeft. The design would then be implemented using HTML and CSS. The community also needed custom content blocks using Invision Communities Pages module. I created a new structure for that and added blocks for hero banners and other blocks need to create the desired design. I also configured Invision Community and built the structure of information to make it a complete community experience.
  21. In this article, we suggest you to get acquainted with the free editor of web languages - CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans. CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content. If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files. The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors. CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key. The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script. Other useful functions and features of the IDE: A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it. Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale. Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others. The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian. The professional version of CodeLobster IDE provides the programmer with even more features. For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting. In addition the professional version includes an extensive set of plug-ins: Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS. A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins. Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress. Also CodeLobster IDE has special plug-in for Bootstrap. We can download and install any framework directly from the program without being distracted from the main tasks. In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects. You can download CodeLobster IDE from the original website: http://www.codelobster.com/
  22. In this article, we suggest you to get acquainted with the free editor of web languages - CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans. CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content. If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files. The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors. CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key. The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script. Other useful functions and features of the IDE: A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it. Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale. Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others. The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian. The professional version of CodeLobster IDE provides the programmer with even more features. For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting. In addition the professional version includes an extensive set of plug-ins: Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS. A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins. Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress. Also CodeLobster IDE has special plug-in for Bootstrap. We can download and install any framework directly from the program without being distracted from the main tasks. In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects. You can download CodeLobster IDE from the original website: http://www.codelobster.com/ View full blog article
  23. One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com and seeing if we can recreate it with only HTML and CSS! /// Timestamps 00:00 - Introduction 01:17 - Overview 02:18 - HTML 13:57 - CSS basic setup 15:35 - styling the front 28:24 - front and background hover 38:15 - animating the game name 42:43 - the rank 46:33 - styling the back 60:14 - fixing the spacing 65:31 - fade-up and in for the back
  24. Understaning how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.
  25. While all the combinators are useful from time to time, but the adjacent sibling selector is easily the one I use the most often. It has a several really good uses, a few of which I'll be diving into in this video!
×
×
  • Create New...