BladeX::component('components.content'); // <content> ... </content>
BladeX::component('components.columns'); // <columns> ... </columns>
BladeX::component('components.column'); // <column> ... </column>
+ BladeX::component('components.grid'); // <grid cols="3" gap="md"> ... </grid>
BladeX::component('components.text-block'); // <text-block> ... </text-block>
BladeX::component('components.link-button'); // <link-button> ... </link-button>
}
],
"license": "proprietary",
"require": {
- "cubist/cms-back": "dev-master"
+ "cubist/cms-back": "dev-master",
+ "lavary/laravel-menu": "^1.7",
+ "nothingworks/blade-svg": "^0.3.1",
+ "spatie/laravel-blade-x": "^2.2"
},
"config": {
"optimize-autoloader": true,
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
+ },
+ "require-dev": {
+ "barryvdh/laravel-ide-helper": "^2.6",
+ "filp/whoops": "^2.3"
}
}
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+const files = require.context('./', true, /\.vue$/i)
+files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
/**
* Next, we will create a fresh Vue application instance and attach it to
* code may be modified to fit the specific needs of your application.
*/
-try {
- window.Popper = require('popper.js').default;
- window.$ = window.jQuery = require('jquery');
-
- require('bootstrap');
-} catch (e) {}
+// try {
+// window.Popper = require('popper.js').default;
+// window.$ = window.jQuery = require('jquery');
+//
+// require('bootstrap');
+// } catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
+++ /dev/null
-<template>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col-md-8">
- <div class="card">
- <div class="card-header">Example Component</div>
-
- <div class="card-body">
- I'm an example component.
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
- export default {
- mounted() {
- console.log('Component mounted.')
- }
- }
-</script>
--- /dev/null
+<template>
+ <div class="bg-white" v-show="visible">
+ <div class="header-search-box container py-3">
+ <form action="/search/" method="get" class="flex justify-between items-center">
+ <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none focus:outline-none focus:bg-grey-100"
+ type="text"
+ name="search"
+ autocomplete="off"
+ placeholder="Search...">
+ <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">
+
+ <!-- Todo: work out the best way to inline SVG files in vue components (via props, slots etc?) -->
+ <!--
+ See: https://gist.github.com/calebporzio/623c536f7fff77861b8a37ec11a1d3da
+ and https://stackoverflow.com/questions/44695560/how-can-i-import-a-svg-file-to-a-vue-component
+ -->
+
+ <!-- @svg('search', 'fill-current text-navy w-6 h-6') -->
+
+ </button>
+ </form>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+
+ data() {
+ return {
+ visible: false
+ }
+ },
+
+ mounted() {
+ console.log('Search component mounted.')
+ }
+ }
+</script>
$vertical-gutter = 5vw
// Breakpoints in Rupture (https://github.com/jescalan/rupture)
-$breakpoint-columns = 768px
+$breakpoint-columns = 768px // NOTE: this should align with the 'sm' screen value in tailwind.config.js
rupture.scale = 0 400px 768px 1024px
rupture.scale-names = 'small' 'medium' 'large'
rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
// Generate utility classes for grids
// Grid gaps are on 0.25vw jumps for greater control
+// Also some named gaps: sm, md, lg, xl
$vw-spacing = {
- '1': 0.25vw,
- '2': 0.5vw,
- '3': 0.75vw,
- '4': 1vw,
- '5': 1.25vw,
- '6': 1.5vw,
- '7': 1.75vw,
- '8': 2vw,
- '9': 2.25vw,
- '10': 2.25vw,
+
+ 'xs': 0.25vw,
+ 'sm': 0.5vw,
+ 'md': 1.25vw,
+ 'lg': 2.5vw,
+ 'xl': 5vw,
+
+ '1v': 0.25vw,
+ '2v': 0.5vw,
+ '3v': 0.75vw,
+ '4v': 1vw,
+ '5v': 1.25vw,
+ '6v': 1.5vw,
+ '7v': 1.75vw,
+ '8v': 2vw,
+ '9v': 2.25vw,
+ '10v': 2.5vw,
+ '20v': 5vw,
}
-// Generate classes
-for counter, vwAmount in $vw-spacing
+// Generate classes + make responsive
+
+@responsive
+ for id, vwAmount in $vw-spacing
- .grid-gap-{counter}v
- constrain(grid-gap, vwAmount)
+ .grid-gap-{id}
+ constrain(grid-gap, vwAmount)
//----------------------------------
+@responsive // Generate responsive utilities like sm:grid, md:grid-cols-2 etc
+ .grid
+ display: grid
-.grid
- display: grid
+ &-cols-auto
+ // Automatic number of columns based on number of children
+ // but with a min-width to stop them getting too small...
+ grid-template-columns: repeat(auto-fit, minmax(225px, 1fr))
- // ToDo: add Tailwind @responsive variations so grids can be changed via generic class names
+ &-cols-1
+ grid-template-columns: 1fr
- &-cols-2
- grid-template-columns: repeat(2, 1fr)
+ &-cols-2
+ grid-template-columns: repeat(2, 1fr)
- &-cols-3
- grid-template-columns: repeat(3, 1fr)
+ &-cols-3
+ grid-template-columns: repeat(3, 1fr)
- &-cols-4
- grid-template-columns: repeat(4, 1fr)
+ &-cols-4
+ grid-template-columns: repeat(4, 1fr)
//&-cols-2
--- /dev/null
+{{-- Grid Component --}}
+{{--
+ Using CSS Grid to make a grid out of any child elements.
+ By default, the grid is "auto", meaning it will make as many
+ columns as there are child elements until a minimum width for
+ each column is hit, then the columns will start to wrap
+
+ Possible column classes (listed here so PurgeCSS doesn't strip them):
+ grid-cols-auto (default)
+ grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4
+
+ eg.
+ <grid cols="4" gap="md" class="md:grid-cols-3 sm:grid-cols-2">
+ ...
+ </grid>
+--}}
+
+@php
+ // Default classes
+ $class = $class ?? '';
+ $cols = !empty($cols) ? 'grid-cols-'.$cols : 'grid-cols-auto';
+ $gap = isset($gap) ? 'grid-gap-'.$gap : 'grid-gap-lg'; // Can be overridden by passing an empty string
+@endphp
+
+<div class="grid {{ $cols }} {{ $gap }} {{ $class }}">
+ {{ $slot }}
+</div>
@include('cubist::head.htmldeclaration')
<head>
{{--@include('cubist::head.head')--}}
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="csrf-token" content="{{ csrf_token() }}">
+
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
</head>
<body class="font-body text-grey-dark">
@include('cubist::body.begin')
-<div class="flex flex-col min-h-screen">
+<div id="app" class="flex flex-col min-h-screen">
+
@include('partials.header')
@section('breadcrumbs')
@include('partials.footer')
</div>
+<script src="{{ mix('/js/app.js') }}"></script>
+
@include('cubist::body.end')
</body>
</html>
<columns>
<column>
- <h3 class="h2 simple pl-1v">Capteurs</h3>
+ <h3 class="h2 simple pl-1v md:text-2xl sm:pl-0">Capteurs</h3>
- <div class="grid grid-cols-2 grid-gap-5v pr-1v border-r border-grey-300">
+ <grid cols="2" gap="md" class="xs:grid-cols-1 pr-1v border-r border-grey-300 sm:pr-0 sm:border-0">
@for ($i = 1; $i <= 6; $i++)
<div class="bg-white px-1v py-6 flex">
<a class="animated-underline partial-underline flex flex-col justify-between w-full" href="#">
</a>
</div>
@endfor
- </div>
+ </grid>
</column>
<column>
- <h3 class="h2 simple pl-2v">Systèmes de mesure</h3>
+ <h3 class="h2 simple pl-2v md:text-2xl sm:pl-0">Systèmes de mesure</h3>
- <div class="grid grid-cols-2 grid-gap-5v pl-1v">
+ <grid cols="2" gap="md" class="xs:grid-cols-1 pl-1v sm:pl-0">
@for ($i = 1; $i <= 6; $i++)
<div class="bg-white px-1v py-6 flex">
<a class="animated-underline partial-underline flex flex-col justify-between w-full" href="#">
</a>
</div>
@endfor
- </div>
+ </grid>
</column>
];
@endphp
- <div class="grid grid-cols-3 grid-gap-10v">
+ <grid cols="3" class="sm:grid-cols-2 xs:grid-cols-1">
@foreach ($solutions as $i => $solution)
@php($i++)
<a class="solutions-link">
<span class="solutions-link-text">{{ $solution }}</span>
</a>
@endforeach
- </div>
+ </grid>
</content>
</full-width>
<content>
<text-block title="Actualités" />
- <div class="grid grid-cols-4 grid-gap-10v">
+ <grid cols="4" class="md:grid-cols-2 xs:grid-cols-1 xs:grid-gap-20v">
@for ($i = 1; $i <= 4; $i++)
<div>
<img class="mb-4" src="{{ asset('storage/uploads/images/news-1.jpg') }}" alt="">
<p><a href="#">Lire la suite</a></p>
</div>
@endfor
- </div>
+ </grid>
</content>
</full-width>
<content>
<text-block title="Nos clients" />
- <div class="grid grid-cols-4 grid-gap-10v">
+ <grid cols="4" class="sm:grid-cols-2">
@for ($i = 1; $i <= 8; $i++)
<div class="bg-white hover:bg-grey-200 cursor-pointer" style="padding-bottom: 58%"></div>
@endfor
- </div>
+ </grid>
</content>
</full-width>
</header>
-<div class="bg-white">
- <content class="header-search-box hidden py-3">
- <form class="flex justify-between items-center">
- <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none focus:outline-none focus:bg-grey-100"
- type="text"
- name="search"
- autocomplete="off"
- placeholder="{{ __('Search...') }}">
- <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">@svg('search', 'fill-current text-navy w-6 h-6')</button>
- </form>
- </content>
-</div>
+<search></search>
module.exports = {
theme: {
+ screens: {
+ // We're using the desktop-first approach to media queries so everything is max-width based
+ // The most important breakpoint for PMI is when the columns stack. This is defined in setup.styl
+ // and for now it needs to be manually matched here. The idea is that we can set styles using
+ // the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'.
+ // Sizes should be listed largest to smallest so they are generated in this order, allowing smaller
+ // breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2)
+ 'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
+ 'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... }
+ 'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... }
+ },
extend: {
colors: {
'inherit': 'inherit',
projects / pmi.git / commitdiff