grid examples not working

[StephenBugden]

Hello,

I've just downloaded the css grid system from http://semantic.gs/
I then simply unzipped the files and tried accessing the examples via my browser, but they don't work as expected. i.e. Sidebar is under Main in each example.

I put them on my web server so you can see what I mean:
http://www.netmonics.co.uk/semanticgrid/examples/responsive/responsive.html

So is there something else I need to do?

I'm sorry if I've missed something.

Steve

[radyz]

I looked at your site and the less files are not being loaded correctly.

1. Your link tag must be: rel="stylesheet/less" type="text/css"

Other than that:

• Have you checked the locations are correct?
• Have you allowed that mime type on your server? (You can just set the .less extension to be served as .css)

[StephenBugden]

Hello,

Thankyou for your reply.

OK it's working now. I added the mime type '.less' setting it to 'text/less' in IIS.

If you don't mind, I have a couple of questions, if you don't have time I understand.

How can this work in older browsers if you use html5 tags? Do I just replace the article and section tags with div?

Is there anymore information on how to configure layouts, I could only find the examples given on the main page of http://semantic.gs/. I've tried to add another column, but it doesn't work, html and css below.

Steve

Not being a css wizz, I could certainly do with more tutorial examples, for example I tried to add another column, but it doesn't work:

---

In the responsive HTML:

<!-- Header -->
<header id="top">
    <h1><a href="http://semantic.gs/">The Semantic Grid System</a></h1>
</header>

<!-- Main Body -->
<article id="maincolumn">
    <h2>Main</h2>
</article>

<!-- Sidebar -->
<section id="sidebar">
    <h2>Sidebar</h2>
</section>

<!-- Sidebar -->
<section id="sidebar1">
    <h2>Sidebar 1</h2>
</section>

---

In the CSS

// header
header#top {
margin-bottom: 0.5em;
}

#maincolumn {
.column(6);
}
#sidebar {
.column(3);
}
#sidebar1 {
.column(3);
}

@media screen and (max-width: 740px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
},
#sidebar1 {
.column(12);
margin-bottom: 1em;
}
}

[radyz]

It seems you have a extra comma after your rule: "#sidebar", it invalidates the next rule.

Date: Thu, 14 Mar 2013 08:05:02 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
Subject: Re: [semantic.gs] grid examples not working (#87)

Hello,

Thankyou for your reply.

OK it's working now. I added the mime type '.less' setting it to 'text/less' in IIS.

If you don't mind, I have a couple of questions, if you don't have time I understand.

How can this work in older browsers if you use html5 tags? Do I just replace the article and section tags with div?

Is there anymore information on how to configure layouts, I could only find the examples given on the main page of http://semantic.gs/. I've tried to add another column, but it doesn't work, html and css below.

Steve

Not being a css wizz, I could certainly do with more tutorial examples, for example I tried to add another column, but it doesn't work:

In the responsive HTML:

The Semantic Grid System

Main

Sidebar

Sidebar 1

In the CSS

// header

header#top {

margin-bottom: 0.5em;

}

#maincolumn {

.column(6);

}

#sidebar {

.column(3);

}

#sidebar1 {

.column(3);

}

@media screen and (max-width: 740px) {

#maincolumn,

#sidebar {

    .column(12);

    margin-bottom: 1em;

},

#sidebar1 {

    .column(12);

    margin-bottom: 1em;

}

}

—
Reply to this email directly or view it on GitHub.

[StephenBugden]

OK thankyou!

[radyz]

Glad to be of help

Date: Thu, 14 Mar 2013 13:31:54 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
Subject: Re: [semantic.gs] grid examples not working (#87)

OK thankyou!

—
Reply to this email directly or view it on GitHub.