CSS Grid and Bootstrap

Questions
1

Silverstripe Version:
4.0+
Question:

I’ve been trying to update my old SS website and think it will be easier to start fresh in SS4+. Having worked with CSS Grid for layouts, I find it really easy and fun.

Will this screw up the Bootstrap relationship in SS4+?

Or will it just require having my theme utilize Grid vs Bootstrap? and create a new CSS files

Here’s the site I’ve been working with: https://gridbyexample.com/

2

Your frontend theme can use whatever CSS / JS you choose, so it’s just a case of building the way you want to.

If you haven’t already seen them, the lessons are well worth a quick look, even if you’re already familiar with SS3. They’ll cover all the steps for setting up your own themes in SS4

1 Like
3

Thank you much. I’ve watched these a long time ago, but am definitely going to go through them again.

How do you name your images?

I have project system like 18004, which means the 4th architectural job in 2018. I’ve thought of using a system like that 18004-floorplan.jpg or something.

But do you follow any guideline or spec for image naming?

6

Hi DorsetDigital
When requiring css I’m using this in page.ss:

<% require css('layout') %>

For the other css, I’ve commented them out for the moment. When I look at Mozilla Developer it says the css is being pulled from debug.css. Yet, I’m not aware of pulling that file.

It also states css grid is not in use. It makes sense, but I’m confused why the layout.css is not being pulled.

body {
margin: 20px;
}

.header {
    grid-area: header;
    grid-row: 1fr;
}

.header primary {
    grid-area: header;
    grid-row: 1fr;
}

.sidebar {
    grid-area: leftbar;
}

.sidebar2 {
    grid-area: rightbar;
}

.article {
    grid-area: article;
}

.footer {
    grid-area: footer;
}

.wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
    "header"
    "sidebar"
    "article"
    "sidebar2"
    "footer";
  }

  .search-bar {
      width: 30px;
  }

I’ve named the divs in .ss files to match the layout.css I’ve created.

It was a little confusing in the tutorial, it seems like theres a page.ss in Templates folder (outside layout) and also in Layout folder.

Feel like I’m close to getting it right, but not quite there.

4

Depends a lot on the project and the purpose of the image. For a lot of jobs I don’t touch the image names at all. For some projects I try to name them according to what they are (especially on product-driven sites) to help to hint to the image search engines what they are.

In reality, provided you have good alt-text for them, you can use pretty much any scheme that works for you.

7

If you’re seeing debug.css and none of your page stuff, that sounds like it is showing the default error page.

Do you have the site in dev mode? There should be some clues somewhere as to what is going on. (Check the error logs, etc. too)

8

this is how the local _ss_environment.env file is configured.

Environment {#environment}

SS_ENVIRONMENT_TYPE="dev"

SS_DEFAULT_ADMIN_USERNAME="admin"

SS_DEFAULT_ADMIN_PASSWORD="1234"

SS_BASE_URL="http://localhost/"

### Database {#database}

SS_DATABASE_CHOOSE_NAME="true"

SS_DATABASE_CLASS="MySQLDatabase"

SS_DATABASE_USERNAME="root"

SS_DATABASE_PASSWORD="root"

SS_DATABASE_SERVER="127.0.0.1"

SS_BASE_URL="http://localhost/"

SS_BASE_URL="https://localhost/"

SS_BASE_URL="//localhost/"

What’s strange is I can see the content area but no navigation.

This is my Page.ss file in app>templates>layout>

<head>
<% base_tag %>
<title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
$MetaTags(false)
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<% require themedCSS('reset') %>
<% require themedCSS('typography') %>
<% require themedCSS('form') %>
<% require themedCSS('layout') %>

<link rel="shortcut icon" href="public/css/favicon.ico" />
</head>

<body class="$ClassName.ShortName<% if not $Menu(2) %> no-sidebar<% end_if %>" <% if $i18nScriptDirection %>dir="$i18nScriptDirection"<% end_if %>>
	<div class="wrapper">
	<div class="header" role="main">
		<div class="inner typography line">
			$Layout
        </div>
    </div> 
	<% include Header %>
	
    <% include SideBar %>
    <div class="content">
        <article>
            <h1>$Title</h1>
            <div class="content">$Content</div>
        </article>
            $Form
            $CommentsForm
    </div>
</div>	
	<% include Footer %>

	<% require javascript('//code.jquery.com/jquery-1.7.2.min.js') %>
	<% require themedJavascript('script') %>

</body>

</html>
9

I made a mistake with the theme.yml and app.yml files.

The tutorials ask to rename mysite.yml to app.yml. I did. The Name: myproject and project: app were not the same. After naming the project in both files to app it seems to have allowed the css files to be loaded.

app.yml

---
Name: myproject
---
SilverStripe\Core\Manifest\ModuleManifest:
    project: app

theme.yml

---
Name: app
---
SilverStripe\View\SSViewer:
    themes:
        - '$public'
        - '$default'
SilverStripe\i18n\i18n:
        default_locale: 'en_US'

No sure what to do with Name: myproject. Should you name my project to your website? When I tried that an error was thrown stating you can’t have two similarly named Names.

However, I’m now facing 500 errors. But at least the theme is loading.