Search the Community
Showing results for tags 'css'.
-
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.
-
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.
-
"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.
-
"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
-
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
-
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
-
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.
-
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.
-
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).
-
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).
-
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
-
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
-
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-a
-
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-a
-
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.- 1 review
-
- 1
-
-
- graphic design
- webdesign
- (and 15 more)
-
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- 1 comment
- 1 review
-
- 1
-
-
- system team lead
- system architect
- (and 15 more)
-
invision community TheLeft - Invision Community Developer
Jimi Wikman posted one project in Development
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.- 1 comment
-
- 1
-
-
- invision community pages
- political
- (and 6 more)
-
editor CodeLobster IDE - free PHP, HTML, CSS, JavaScript / TypeScript editor
Stas Ustimenko posted a blog article in Development
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 JavaSc-
- 1
-
-
- codelobster
- free
- (and 7 more)
-
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 JavaSc
-
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 -
css Block, Inline, and Inline-Block explained | CSS Tutorial
Jimi Wikman posted a video in Development
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. -
css combinator The one CSS combinator I use in every project
Jimi Wikman posted a video in Development
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! -
In this video we look at how to make a fully responsive card with HTML and CSS, with a big helping hand from flexbox!
-
Today, we're going to check out some crazy CSS backgrounds you can create while harnessing the power of repeating linear (or radial) gradients. This affect gives you the ability to create very complex and interesting backgrounds for your projects.
-
CSS has come a long way, but min(), max(), and clamp() make a lot of things a lot easier than they used to be, and really open up the world of responsive typography like we never had before! Clamp() is the ingredient that we've needed for a long time to really be able to make type fully responsive in our CSS, and to be able to do it on one line is absolute magic!
