Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

more examples would be helpful #175

Closed
programming-kid opened this issue Oct 6, 2013 · 4 comments
Closed

more examples would be helpful #175

programming-kid opened this issue Oct 6, 2013 · 4 comments
Labels
Duplicate

Comments

@programming-kid
Copy link

I am new to semantics and I am not really able to figure out exactly how it works .bootstrap has a format like

<body>
  <div class='container'>
    <div class="row">
      <div class="col-md-6">
            Blah blah
        </div>
        <div class="col-md-6">
            Blah blah
            </div>
     </div>
  </div>
</body>

In semantic I am not able to find equivalent to .container I guess it is .ui.page but it doesn't exactly behave as one

What I am suggesting is please create some example pages so that newcomers like me who are used to bootstrap can quickly get started with semantics .Best part would be to convert these bootstrap examples to their semantic equivalents to help new developers to get started quickly.
@jlukic
Copy link
Member

jlukic commented Oct 6, 2013

A top level grid used for page layouts is ui page grid and will automatically add page gutters to the left and right of your columns to center your page contents and is responsive

You can also trigger other responsive behavior using mobile/tablet/computer only on a row or column or by adding in stacking to a row thats content can be increased to full width columns for mobile.

Agreed about examples, i will add shortly #126 #60

@jlukic jlukic closed this as completed Oct 6, 2013
@jlukic jlukic reopened this Oct 6, 2013
@jlukic jlukic closed this as completed Oct 6, 2013
@jlukic jlukic mentioned this issue Oct 9, 2013
Closed
@namuol
Copy link

namuol commented Dec 25, 2014

Erp -- wrapping my page in a ui page grid gives it a negative margin-top, causing the top of the entire page to be pulled out of view.

Easy to fix with a hack, but why is this happening? I assume I'm missing some other sort of container that offsets this margin, correct?

@codynguyen
Copy link

I'm new to semantic-ui & I'm experiencing the negative margin-top too when trying to use .ui.page.grid to mimic bootstrap's .container as suggested here: http://stackoverflow.com/a/28676816

My html is as followed:

  body.menu.pushable
    .ui.fixed.inverted.menu
      .ui.page.grid
        .left.menu
          a.item(href='#') Brand
          a.item(href='/dashboard') Dashboard

        .right.menu
          a.borderless.item(href='/logout') Logout

    .pusher
      .full.height
        .main.container
          block content
      .ui.footer.vertical.segment

Can anyone explain why it is happening & the semantic-ui way to resolve this? Also is there any update on the progress of adding .container support?

@jlukic
Copy link
Member

jlukic commented May 15, 2015

Container is in 2.0 which will be available june 1st. You are probably experiencing collapsing margins.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Duplicate
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jlukic @codynguyen @namuol @programming-kid