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

Recommended Posts

  • Owner

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

Link to post
Share on other sites
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Similar Content

    • By Jimi Wikman
      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.
       
    • By Jimi Wikman
      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.
       

      View full blog article
    • By 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.
    • By Jimi Wikman
      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.
    • By Jimi Wikman
      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.

×
×
  • Create New...